Display your work by coding an online portfolio site from scratch

There are many different ways to share your work online. If you are a web designer with front-end web development skills looking to showcase your talent, one of the best ways is to custom design and code your own portfolio site from scratch.

See a Demo
http://nma.kcc.hawaii.edu/gargiulo/tests/portfolios/customportfolio1/

View on Github
https://github.com/kccnma/teachingmaterials/tree/master/customportfolio1

View on Codepen
https://codepen.io/kccnma/pen/bLKKqV

Download Starter Files
http://nma.kcc.hawaii.edu/gargiulo/tests/portfolios/img.zip

Let's Code!

Get started by launching your favorite code editor (IDE)

Create a new HTML folder named "customportfolio"

Inside of your new directory, create a new index.html file and then download the provided portfolio images for this exercise.  Next, create another new folder named "css" and inside of it create a new file named style.css. These two files (index.html and style.css) are the initial files that we will be editing. Once you are all setup, your local folder setup should look something like this:
Code, Save, Refresh, Repeat!

Start with Markup (HTML), then add Styling (CSS), then Repeat.

Ideally, you should code line-by-line and write every line of html and css from the source code below by hand. To speed up the process (for those with neither the time or patience), please feel free to copy-and-paste large blocks of code, one-at-a-time, in order. After each iteration (code block), be sure to hit save then preview your changes in the browser (refresh) before moving on the the next code block.

HTML

[gist https://gist.github.com/kccnma/0857a371f00861d41a1eb51a540a02d8 /]

...and also start with an empty style.css file with the following table of contents.

CSS

[gist https://gist.github.com/kccnma/3cf6e89485eb1ebc5c7ad62b96348ac5/]

Then add the following body contents:

  • header
    • navigation
  • main
    • one section with a bunch of images
  • footer
    • navigation
HTML

[gist https://gist.github.com/kccnma/70f8c36a2fbe8c8191c23701b20dd11f/]

Add in your HTML5 css (for IE8 and below) along with the least amount of main body and typography styling.

Notice how there is no css reset, nor a comprehensive typography setup. This minimal approach to custom (bespoke) development keeps your code lean by embracing browser defaults.

CSS

[gist https://gist.github.com/kccnma/498a473b872c07d584191e6745b404ff/]

Next add your structural css for your site header, nav, and footer.

CSS

[gist https://gist.github.com/kccnma/6da79245b1b6fbe9f7a0b61c7baf2fdf/]

Next, lets code a simple image grid from scratch, only instead of reverting to your safe go-to methods (e.g. inline-blocks or floated elements), you should try to be a little more flexible and use flex-box!

CSS

[gist https://gist.github.com/kccnma/f0300750da15e82a86c0f6d752c58f64/]

Once the home page is stable, let's create the two main sub pages:

  • about.html
  • contact.html

The header and footer are the same (except for the "selected" state (class) on the nav, so simply do a save-as from your index.html, update your title tag, move your selected state to the correct nav item, and lastly, add the body content alone.

HTML

[gist https://gist.github.com/kccnma/4d57afcdd613668d234000b8cd2da02c/]

[gist https://gist.github.com/kccnma/a931678a8f75e516497cf83f08ded13e/]

Once the primary sub pages are set up and working OK, let's create one portfolio entry sub page using the "web site" project as our working example content.

HTML

[gist https://gist.github.com/kccnma/98cc9374a1a618254205488210d636cc/]

For the sub pages, we're going to need some css help for the hero section (to break out of our fixed-width and go full-width) and for our internal content layout, which we'll use a traditional layout grid, only this time, let's use flexbox!

CSS

[gist https://gist.github.com/kccnma/c7ea7c757c47353e0bc1a3f2723e4894/]

Let's Spice it Up!

Finally, lets add some simple (fake) page transitions that with a "fade-in" and "move-in" effect via css3 animation.

CSS

[gist https://gist.github.com/kccnma/a3744153228ecf5ecd1ce240e3909bfa/]

When you are done, the home page should look like this:

[codepen_embed height=”660” theme_id=”0” slug_hash=”bLKKqV” default_tab=”result” user=”kccnma”]See the Pen Custom Portfolio Test #0.1 by kccnma (@kccnma) on CodePen.[/codepen_embed]

For the completed version with sub pages and additional css (e.g. circular image helper), see the demo and source code via the links below:

See a Demo
http://nma.kcc.hawaii.edu/gargiulo/tests/portfolios/customportfolio1/

View on Github Button
https://github.com/kccnma/teachingmaterials/tree/master/customportfolio1

View on Codepen
https://codepen.io/kccnma/pen/bLKKqV

Download Starter Files
http://nma.kcc.hawaii.edu/gargiulo/tests/portfolios/img.zip

Next Steps: Continue adding more pages with real content

After the home page is secure, along with at least one project/portfolio entry sub page, you can move on to add all pages with real content. As you add all sub pages and content, be sure to test on multiple devices and screen sizes and try designing-as-you-code. You might find it helpful (and easier at times) to design in the browser instead of in your usual design application.

One last thing: Have fun!

Summary

Coding your online portfolio is never an easy task. There are so many ways to present your work, so which way is best? Unfortunately there is no right or wrong answer—only you can make this decision. The good news is that you can use your online portfolio as a great excuse to practice writing custom hand-written code from scratch, because the best way to become a stronger web designer and front-end web developer is to create web sites.  The the more custom coded sites you make, the easier it will get as you develop your own best practices for writing code and solving code-related UX and UI problems.

Related Resources and Reading

Go Further

Author Notes

This was written specifically to help aspiring web designers as they aim to:

  • Synthesize the concepts and skills garnered as a designer and front-end web developer by showcasing a culmination of projects in a custom designed and coded bespoke interface that integrates conceptual thinking and aesthetic application.