Personal Portfolio

Course Project • Front-End Development

Project Overview

For my front-end development specialization course, I was tasked with creating a responsive portfolio using HTML, CSS, and JavaScript.

Tools

Atom
Github
W3C Validator

Context & Challenge

Building a portfolio from scratch was a fantastic way for me to develop basic front-end development skills. I was able to familiarize myself with industry-standard systems, platforms and web development methodologies. I learned about HTML page structure, CSS stylesheets and layouts, text editors and linters, JavaScript data types, libraries, and plugins. Learning these coding skills was also extremely helpful in understanding Webflow, which I used to build my actual portfolio.

A major reason for me to learn front-end development was the ability to work effectively in cross-functional teams as a UX designer. Understanding coding languages would allow me to know the possibilities and limitations of development, and help me communicate more effectively with developers.

Portfolio Layout

Key Features

A homepage with a short introduction and work examples
An about page with some key information about you as a person, your skills, and the tools you use
A detailed project page for each project telling the story of the project
A contact section on each page with contact information

Wireframes

The wireframes focused on three viewpoints: mobile, tablet, and desktop. Each layout was optimized for the differing sizes to keep everything responsive. For example, the two-column layout on desktop collapses on mobile view.

HTML, CSS, & JavaScript

Utilizing Atom and Github, I set up the Home, About, and Project pages using a mobile-first approach. I chose to use one main color and kept the rest minimal to keep the focus on my work, making sure to use hover states on the navigation menu and both styles of buttons. The same colors and fonts are used for this portfolio as well as my resume to maintain a cohesive style.

I also learned how to include transitions and animations and had some fun playing around with options. I was especially proud of figuring out how to animate the navigation menu and social media icons, as I had to do extra research.

I made sure to use linters and W3C markup validation to check for errors throughout the process of creating the portfolio.

Takeaways

Before this endeavor, I had zero knowledge about coding. Now, I feel well-equipped to work with developers. The Hack for LA team I volunteer with uses Github for project management, and when designing web pages, I am aware which components are viable using simple HTML and CSS and which elements need JavaScript. This makes handoff easier, and during team meetings I understand more of the jargon spoken and can give better input and feedback on designs.