Coding my First Website
When a code-fearing designer tries to develop
The transition from graphic to web design felt like the most natural thing in the world. I love typography, color palettes, branding, moodboards, site maps, wireframes, and the adobe programs feel like my tight-knit family. While smiling and learning about design principles and other familiar territory, in the back of my mind a pesky little developer was always reminding me, “you’re gonna have to learn to code at some point…” But I would always brush it off. “Nah”, I would think, “coding is scary.”
Developers always look like they’re having an argument with their computer in a language about as legible as ancient Egyptian.
But I knew if I was to design for the computer, I was going to have to speak it’s language. Even if it was just the mere hypertext markup one.
My site was to be a simple one. I decided to inform and educate the public on what I felt was the under-appreciated music genre of “Dreampop”. I would encourage you to learn more about the genre, but the topic isn’t really the important thing here, it’s the building. I planned out a very rough and basic wireframe outlining my goals, audience, color scheme, user flow, and placement of navigational items. My wireframes also included areas intended for placement of content and images/multimedia objects.
I used AWS (Amazon Web Services) to host my site but other popular sites include Bluehost or Justhost. The domain name is free when you purchase your web hosting and then the hosting will cost $3–5 a month. I used Brackets, an open source code editor, to do my development. Brackets advertises itself as being crafted “from the ground up for web designers and front-end developers”. It has inline editors and a very useful tool “Live Preview”, which allows you to instantly see changes made to your html and css in a real time connection with your web browser. I used “Cyberduck” as my FTP client to upload my files to my server.
With everything in place, I was ready to begin the actual coding of my first web page. From the course I was taking, I was provided with basic tutorials teaching about a big part of HTML: TAGS. I was introduced to nav tags, paragraph tags, block-quotes tags, comments tags, break tags, footer tags by w3schools, unordered and ordered lists tags. I learned why things were placed in parenthesis and brackets and how one missing backslash could break everything. Most of my learning can be accredited to “w3schools”. While I’m sure there are a lot of educational websites out there for learning web technologies, w3schools was the most helpful for me. It provides examples, tips, and even shows which browsers support what. 10/10 would recommend #notsponsored.
After tags came links. I built my “Home” and “About” page and then linked them together. Then I linked to another website and create a link that scrolls down the page. I used Cyberduck to upload my html page from my local computer to the server computer at AWS and beamed at my little website full of tags and links.
Just as every one thinks their own baby is cute even when it’s not, I felt I had created quite the site at this point. As proud as I was my site was obviously lacking style and color so I began adding CSS. This was the fun part for me. I really enjoyed learning about the technical elements behind design, and as cute as my ugly baby site was I couldn’t deny the transformation just from the minimal CSS addition.
I added photos and graphics and structured them in an ordered list and then used CSS to present them as multiple rows and columns. I added a web form that contained drop down lists, radio buttons, check boxes, and text areas. I also incorporated a responsive navigation system for mobile phones as well as additional media such as videos, audio, and a map. I also explored Google Analytics to track traffic sources visiting my site (there weren't many visitors.) At this point my ugly baby site was a smiling post pubescent site with it’s braces freshly removed. As my very first site, maybe it still wasn’t something to write home about, but I sure did. All my friends and family got a link to my site and I finally started understanding why this “developing” thing was so rewarding.
What I learned from building my first site is that it really isn’t as scary as it seems. As with all skills, there’s a learning curve that can be steep, but there are plenty of resources to help you break into the basics. In addition to learning about development tools and processes, this project helped me understand how development is really about learning how to learn. I was also able to more fully understand and appreciate the relationship between design and development.
http://54.235.7.184/- link to website
Jessica Ames is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Code a Website from Scratch) in the (DGM 2120 Course) and representative of the skills learned.
