Frontend Web Development
HTML . CSS . JavaScript
Overview
The objective of this project was to use HTML, CSS and JavaScript to build a portfolio website showcasing my UX design case studies.
Background
After completing a 7-month UX immersion program, I took a Frontend Web Development course in order to learn HTML, CSS and JavaScript. As a designer, I think it’s important to understand these syntaxes in order to build products with their development in mind.
This project helped me to understand how these frontend languages work, their limitations as well as the information engineers need to successfully code a product. This knowledge will not only ensure effective communication with the developers as well as a smooth handoff of my designs but will also inform my design decisions early in the process.
Understanding what kind of information developers need, the types of assets and image sizes they require and how they structure a website with coding will help me to create a design and system that can be easily built.
The Challenge
While I have developed websites using various CMS systems, I have never coded a site. The challenge in this project was to use HTML, CSS and JavaScript to create a site based off a design that I wireframed.
The Goal
To design a responsive website using HTML, CSS and JavaScript, demonstrating my understanding of how the languages work and their best practices.
Timeline
December 2021 – January 2022
Role
Frontend Developer
Tools
Atom
GitHub
Process and Insights
Wireframe and Curate Content
I began by wireframing my design in Figma and breaking it down into containers, marked by colored blocks, to help define the code. I then compiled the copy and images that would be used on the site. I created text files to organize the copy and sized all the images I was using for large screens (1200px) and small screens (600px). Additionally, I compressed the images using TinyPNG in order to optimize them for quick page loading. I created a site folder which included these assets and would be the place where all site files are organized
Structuring pages with HTML
I used the Atom text editor to begin building my HTML pages. I structured each page of the site to include the header, main and footer sections. I then organized the content within each section using <div> based off my wireframes. I added classes and IDs to each <div> in order to have more control when it comes to styling the pages with CSS.
Working off of my wireframe was instrumental in ensuring I included the proper code for each section, container, row and column.
Setting Up GitHub
Once I began building the structure of the site, I set up GitHub and created a repository for my project. This not only backed up the work I was doing but allowed me to track changes in my code using its version control. As I was developing the site, I would push the updates to GitHub so that I had notes (commits) and a running tab of all changes.
Styling with CSS
With the HTML files built, I moved onto creating a Cascading Style Sheet in order to style the look of the pages, defining typography, color, spacing, layout and more. I created a master CSS page which was linked to each of the HTML pages. I used a mobile first approach to design for the smallest screen and then added media queries to make the site responsive, adjusting to screens of all sizes.
Adding Interactions with JavaScript
I used HTML to structure the site, CSS to style it and then added JavaScript to implement some interactivity. I relied on jQuery to add a hamburger menu that would show and hide the site pages in the mobile view.
User Testing
With the site nearing completion, I recruited five individuals and conducted tests remotely using Zoom and a GitHub branch of my site. I developed a script and created four tasks for participants to test the site’s usability. After evaluating the completion of each task and asking follow-up questions, I was able to determine areas of the site that needed to be addressed before launching.
Code Quality & Cross-Browser Testing
The final step was to ensure my code was easily readable, had consistent styling, with no misspellings or ambivalent syntaxes. I used the W3C validator in Atom along with CSS and JavaScript linters to check each line of code. After addressing any errors and warnings, I conducted cross-browser testing in the Chrome, Safari, Firefox and Edge. Additionally, I checked the site in all available viewports to confirm it was responsive and free of errors at each breakpoint.
The Solution
I’ve developed a responsive portfolio site based off a previous design and coded the entire project using HTML, CSS and JavaScript. Through the process, I learned how these languages work individually and with one another. Beyond having a portfolio that I coded from scratch, I have a greater understanding of frontend development which will help me work closer with engineers to develop successful products.