Create a Featured Projects Portfolio Site

Showcase select projects 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. In this exercise, we will create a portfolio with three “featured” items. This “depth-over breadth” approach is well suited for designers that want to showcase a smaller amount of projects and go into great detail for each one. Case studies are well suited to tell a story and highlight the design process.

See a Demo
https://laulima.hawaii.edu/access/content/group/21336a81-b8f0-4b8c-8059-ba1b1b192128/public/tests/portfolios/myportfolio3/

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

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

Download Starter Files
https://laulima.hawaii.edu/access/content/group/21336a81-b8f0-4b8c-8059-ba1b1b192128/public/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!

---

“Three Case Studies” Version (2020)

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

…and also start with a simple style.css file with the following base styling.

CSS

At this stage, you should be experimenting with different ways to layout the page until you have a solid layout that is robust. This is a great time to try out different techniques and learn new approaches to layout, such as CSS Grid and Flexbox.

Once you are comfortable with your layout system, you can go ahead and remove the commented code.

---

Add CSS Table of Contents and Base Styling

Once you have a stable setup, be sure to pause and clean up your code by adding comments, a table of contents at the top, and any base styling that you will need, such as your base typography (e.g. a type specimen) and commonly used UI elements (e.g. buttons).

CSS Table of Contents

CSS Globals (Reset, Colors, & Typography)

CSS Responsive Images and Default Buttons

CSS Layout & Site Structure

---

Completed Home Page

Continue to add final content and styling until you get a complete home page.

HTML

CSS for Featured Project Sections

---

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

See the Pen Custom Portfolio Test #0.2 by kccnma (@kccnma) on CodePen.0

Once the home page is stable, the next step will be to create some subpages, starting with the following:

• projectname/index.html
• about.html

---

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.

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
https://laulima.hawaii.edu/access/content/group/21336a81-b8f0-4b8c-8059-ba1b1b192128/public/tests/portfolios/myportfolio3/

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

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

---

Be sure to customize it to meet your goals and needs. 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 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

• Chris’s Blog post on Portfolio Entries
• Chris’s various portfolio tests

Go Further

• Explore and test out different custom grid layouts like this mockup grid test with variable-sized thumb images.
• Consider implementing a sortable gallery
  • Check out MixItUp by Kunk Labs

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.