Building A Front End Portfolio — My Process
Before we get started I want to clarify a few things about what you should expect from this article. This article is primary for those who are just starting out in web development. If you have some years of this experience, this article may not be for you.
Let’s get started!
First thing’s first (I’m the realest) jk, but maybe. Before we start firing up our code editors and server environments lets put our pen to the paper and map this baby out. If you are building a portfolio and want to follow along get out a sheet of paper.
Laying The Ground Work
Before we get to the fun stuff we need to do a bit of planning. In general, I use the following list of questions to map out my personal projects before I start:
1. What am I building and who is it for?
2.What technologies are best suited for building this project?
3.Have I written at least one user story for this project?
The list above helps me solidify in my mind what I am building and how it will be used. My rule of thumb is:
Always build with a purpose
Once we have the answers to our first three questions we can start laying the foundation for our build. Things we need before we can start coding up our site:
Content — I can not stress this one enough, CONTENT FIRST. Even if its demo content, gather it and put it in a file somewhere. The major benefit of the content first approach is that you are able to wireframe more effectively and have fewer surprises when it comes to final stages of your build.
Wireframes — Typically I do this on a piece of paper for each page of my site, It’s less about specifics and more about generalizing the layout of your site. Think about what your user cares about most when going to your site, give that a priority in your layout design.
Style Guides — Get together the color palette for your design, define general UI guides. Are you going to have sharp edges on your buttons, transparent backgrounds, animations? Define the style of each aspect of your site as much as possible.
Once you have all this completed, mock up your design in Photoshop, Illustrator, Sketch, Gimp or whatever you have available.
Time To Build
Now that we know what we are building, who we are building it for and what we want it to look like, we can start the fun part. This is where we fire up our servers and start clack’in those keys.
Here are a couple things to keep in mind while building:
Responsive design- developing mobile first or desktop first doesn’t really matter, the bottom line is that it needs to work on as many devices as possible. Constantly check your work on other devices or by using Chrome’s dev tools.
Accessibility — It’s up to us to make the web a something that everyone can use. Make sure you keep in mind those who might be trying to view your website with a disability. If you aren’t familiar with web accessibility here is a great over view: https://ux.mit.edu/accessibility/guidelines
Clean Code — This may be a “no brainer” but your portfolio MUST have clean code.
Remember that your portfolio will evolve over time as you learn and grow as a developer. Write comments to yourself, submit your code for peer review on Reddit or stack exchange when you are done. Also, I would encourage writing down your process in you git repo as you go. This will come in handy when it’s time to refresh your portfolio down the road. Being able to look back on your process is so valuable. It also serves as a reminder of how far you have come.
