Learning Intention:
By the end of this lesson, I will be able to create a personal portfolio website using HTML, CSS, and Bootstrap, and integrate JavaScript for interactive elements.
Success Criteria:
Now I can:
- Structure a multi-page portfolio using HTML, showcasing key sections like “About Me,” “Projects,” and “Contact.”
- Style the portfolio using CSS and Bootstrap to ensure a responsive and visually appealing design.
- Integrate JavaScript to add interactive features, such as form validation, modals, or dynamic content.
What goes onto a Personal Portfolio website?
This is one of those age old questions, for the most part its about showcasing work that you’ve done rather than just creating an online resume or CV. In some instances the Online CV is all we really need. As designers, we get to do this in a fun way, an normally get a chance to innovatively show the type of work we can do before someone even gets a chance to see our work!
To start with, we’re going to have a look through a number of different online portfolios from experienced designers and brainstorm the different things we like, dislike, find interesting and things that blew you away.
For this matrix, we want to focus on a number of things, design choices, content, interactivity and responsiveness as well as the useability principles and principles of visual communication. The idea here is not to create a different matrix for each of the portfolios below, but rather take notes on all of the different user interfaces / user experiences and then have a catalog of different ideas to potentially implement when creating your own portfolio.
Please be aware, you might not have an entry for every box in the matrix.
Next, we want to look at some professional designers portfolios, now there is no expectation for you to create something that looks like this, I’d say mostly because you don’t have the body of work to showcase; yet. But we can definitely put things in place so that as the body of work you have increases, it sets you up with the ground work already done.
Dennis Snellenberg – www.dennissnellenberg.com
Olivier Ifrah – www.olivierifrah.com
Kyson Dana – www.kysondana.com
Olaolu Olawuyi – www.olaolu.dev
Brittany Chiang – www.brittanychiang.com
Robb Bowen – www.robbowen.digital
Michael Pumo www.michaelpumo.com
Developing Your Portfolio
At no point should we be looking to code at this stage. We want to sit down and design the layout of our elements so that we’re able to really plan how each element is going to behave on screen with other elements around it. To do this, we want to start by looking at whatever UI/UX Development Tool we’re going to use. I’m not going to specifically tell you which on to use, but there are loads to choose from:
Now most of those products are paid, however, many do have some sort of free trial period or free option that has some limited features. So choose one and have a bit of a play around. We’re looking for you to now develop a wireframe diagram for your personal portfolio. Not entirely sure about wireframing, watch this quick tutorial below:
