Learning Frontend Code
Overview
After completing my UX Design bootcamp, I wanted to understand the possibilities, complexities, and challenges that might arise in the development stages of design. I continued my learning journey with a Frontend Development for UX Designers certificate, where I developed a portfolio website as my main project. I went into this journey with no experience but a strong desire to learn. In the end, I am happy with my final product and even happier with my growing knowledge of frontend dev!
Role Frontend Developer, UX Designer & Researcher
Tools VS Code, GitHub Desktop, GitHub, Codepen.io, W3C
Languages HTML, CSS, Javascript
Timeline 8 weeks (March - April 2023)
Link https://beckyingram.github.io/portfolio-site-becky-ingram/
Background
In order to learn frontend development, I took on the challenge of building my first website. A portfolio to display my UX projects was a perfect project to take on. I also would add links to my CV, methods to contact me, a bit of background on who I am, and the skills/tools that I currently bring to the table.
The Challenge: With no prior coding experience, I would build a website to showcase my professional experience and projects.
The Strategy: I used the skills I learned during my frontend development course (along with the help of my mentor!) to create a website that was functional, well-designed, and allowed me to learn multiple development languages.
Process
Discover & Inspiration
To begin, I wrote down any content that I would include on my portfolio site. I also looked at as many other portfolios as I could to discover what other people had commonly included, what I liked/disliked, and what seemed to function well. I compiled a list and took note of anything particularly inspirational.
Wireframes
In pdf format, I created low and mid fidelity wireframes that included all of the content that would go on my website. Once I had these nicely worked out, I turned them into high fidelity mockups. I did this for mobile, tablet, and desktop screens so that my website would retain its structure and readability at any resolution. I included color schemes and other UI elements in the high fidelity mockups, which proved to be extremely helpful to refer to when coding later on. Before finalizing my color selections, I ran them through a website that ensured they complied with accessibility standards.
Development
HTML
HTML is the brick and mortar of my website. I began by creating the foundation of three pages: my work, my “about me,” and a page for one UX case study. I learned that HTML uses elements like divs to create containers that structure websites. At this point, I also added all of my text content. Then, I viewed it in Chrome and discovered that for the most part, things looked pretty bad. The only style on my website were the default styles that Chrome graciously provides for headers and similar things.
It didn’t look great (yet).
CSS
Next, I learned about CSS. I played games like flexbox froggy which helped me learn and understand how adding CSS to my page could add layouts, positions, sizes, padding, margins, color, and even animations. I also used CSS to add media queries for three break points on my page to ensure my website would include a properly functioning responsive design.
Things were really taking shape now!
Javascript
Finally, my site was starting to look real! But I still needed to dip my feet into Javascript before completing my introduction to frontend dev. I used Javascript to create a toggle for my navigation menu when it is in mobile view. This feature helped enhance the user experience by avoiding nav text getting smashed together.
User Testing
I conducted 5 usability tests to ensure that my website design was functioning well. I walked users through 4 scenarios designed to test if my site was intuitive and organized. I evaluated tests using Jakob Nielson’s Severity Ratings scale.
All users were able to successfully complete each task. Feedback that participants provided during tests helped me discover other ways to improve my portfolio website.
I documented the primary problems that were identified during usability tests, along with their severity rating and recommendations for fixing each problem.
Quality Control & Publish
Finally, I put my finished code through a few quality control tests. I used the W3C Validator, HTMLHint, StyleLint, Prettier, and Standard JavaScript to find and fix errors. I then opened my site on multiple browsers and ensured that each screen size functioned properly at each size.
Once things were all set, I published my website using gh-pages. I chose this option because I wanted to become more familiar with using GitHub.
Solution
My website is live! Using HTML, CSS, and Javascript, I created a responsive website that includes columns, rows, a navigation menu, clearly demarcated sections (hero, header, main, footer), images at multiple resolutions, and a cartoon animation. I learned how to change the state of links and buttons, personalize my site with a favicon, and add text alignment/styling.
At times throughout the process, I had to face challenges like figuring out why my code wasn’t working, as well as learn why my code was actually finally working (arguably more important). The best part of the process was, in fact, the process—a cheesy, yet very true statement about my burgeoning skill set. I feel very comfortable with what I have learned so far and I will continue to expand my knowledge base because I truly enjoyed coding!