Overview
There are many benefits for Designers who understand code. The most essential ones for me are
-Understanding the limitations of designs as they are being created
-Improving communication between fellow developers
-Implementing responsive designs that adapt to different screen sizes.
By coding my own portfolio using HTML, CSS, and JavaScript I was able to create a responsive website while gaining a new set of skills at the same time.
My website can be viewed by clicking the button below.
Challenges
With no coding experience at all, it was a challenge to understand the basic principles at the beginning and why they had to be followed.
I may not ever be a full-time front-end developer but I did want to understand how this side of a product team works since my overall goal is to be a product manager.
Process & Insights
The first task before beginning anything was to gather the content that I needed to post in the proper folders and create descriptions for all my elements so that it would be easier to plug into my code once I began writing it.
The next task was to get inspiration about the type of portfolio I wanted to create. I began laying out my basic HTML which included me adding code to my header, main, body, and footer elements.
Layout, color schemes, typography, font size, and line heights are where my focus shifted as I began my CSS code. A big challenge I faced during this step was my picture blowing up too big and not being able to figure out how to resize them to the screen they were being viewed on.
Mobile device functionality was challenging as well specifically with the menu since a drop-down menu was added only for the mobile version and went away in the desktop version. That was done using JavaScript and I enjoy how the function came out (image on the left).
User Testing
I tested this with 5 participants for usability functions. I gave my candidates 4 tasks paired with 4 scenarios followed by open-ended questions to gather feedback on the website. Here is the Usability Test Report revealing results:
Solutions
After conducting my usability test and making adjustments it was time to clean up my files before publishing. I used linters to analyze my code for any errors, checked the site to make sure it worked on various browsers, then used the Beautify plugin to make my code look nice, organized, and consistent between all my pages.
Goal
The goal of this project is to have a professional responsive website that I created myself to attract potential employers and understand the challenges that full-time developers face.
I learned how to use HTML, CSS, and JavaScript along with gaining plenty of resources that I know I will be using in the future. I can't wait to show off my new skills and portfolio to the world.
All work was created using Atom and the repository can be viewed on the GitHub link at the bottom of this page.
