The Art of Coding: Making Art using codes, and the basics of coding
My first time coding was when I was eighteen and wanted to add special features to my Tumblr account. Somewhere along the times of random dashes and letters, I input a series of words into the index.html box so my website could have audio play automatically. I had only understood the very basics of coding.
As my fourth year starts to end, and the semester comes to a close, I thought a lot about what I was going to do after graduation. I wanted to pursue my art, but I wasn’t sure how to do that just yet. I decided to go on codeacademy.com and try out the tutorials about how to code a website. I wanted to create a website of my own so I could sell my art online.
The first lesson in this syllabus was learning about opening attributes <p> and closing <p/>. Anything written inside of those brackets would be translated onto the website. The attributes “<body> and <body/>” functioned similarly in which anything written inside the symbols would appear on the page. This seemed pretty simple to me.
After adding different titles and media into the webpage, It took my quite a long time to figure out how to do the codes myself. Even with some help I wasn’t able to understand where which set of letters and codes went. I always praised coders for how well they were able to create amazing websites.
In the next lesson, the code “alt” was used paired with images.
<img src=”https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt=A picture of a brown bear sitting upright and relaxed />
Although not seen on the page itself, “alt” is important in case any image fails to load on the webpage. The brief description would provide the slightest visualization for any user. In terms of sourcing the image, “src” is also an important attribute to address where the file is store. Thus “URL” which stands for uniform resource locator.
In the next session, coding a “learn more” page that links to another website simply uses the attribute “_blank”. It helps clean up the page instead of having various links. Setting the “target” attribute to “_blank” instructs the bowser to open the relevant Wikipdeia page in a new window.
<a href=”https://en.wikipedia.org/wiki/Brown_bear" target=”_blank”>Learn More</a>
Similarly, like my old Tumblr page I was able to input a video clip using the same code as image.
After the session, I tried out the free fashion site and finished the quiz. There were many other programs and badges that I had to learn. Next I decided to try out the introduction of Java Script. I learnt the difference between the two types of comments. Single line comments are usually denoted with two forward slashes “//” Multiple linned comments are denoted with a star “*”. I began to question how coders remembered all these codes. There were so many functions that was hard to remember! As we learned in class machines are unforgiving. While coding Java script I noticed that each line must be meticulously constructed. The order in which these attributes appear must be in a particular order. For example, parent and grandparent codes can not appear in a mixed order.
The website also allows you to explore code through artwork and drawing. There are multiple games on the site that allow you to make interesting patterns using the code. The pattern I created below is run by setting colours, and direction. Overall, the experience learning code was more fun than I initially expected! Although there were some trouble learning, it made me think of how fast I learnt the basics relative to other disciplines. Traditional art work takes years of practise and patience, but I was able to create these patterns in a matter of seconds. As a traditional fine artist, I’m looking to expand my skills especially towards the digital realm! As I learned in my last blog, Adobe and Illustrator are the programs I learned to upload my art work online.
