Module 10: Final Projects · Lesson 4 of 4
How to Build a One-Page Portfolio Website in HTML
All lessons in Module 10
- Personal Profile Page
- Full Recipe Page
- Contact Page with Form
- One-Page Portfolio
Goal: Build a one-page portfolio with a menu that jumps to each section.
Learn
A one-page portfolio puts everything on one long scrolling page, and a menu at the top jumps to each part. You already know both pieces it needs:
- Each section gets an
id:<section id="projects">. - Each menu link points at that id with a hash:
<a href="#projects">.
The id and the href have to match exactly, letter for letter, and the id itself has no hash. The ids work like room numbers, and the links are the lift buttons. The lesson on link targets and anchors covers the basics.
Every project is a self-contained piece of work, so it fits an <article> with its own <h3>. The outline comes out tidy: h1 for your name, h2 for each section, h3 for each project. Check it in the Outline tab, and click your menu links in the preview to test them.
The short version
href="#projects"jumps to the element withid="projects", and the match is case-sensitive.- An id has to be unique on the page and can't contain spaces. Join words with hyphens, as in
id="my-projects". - A URL ending in
#projectsopens the page already scrolled to that section, so you can share any section. - Use h1 for your name, h2 for each section and h3 for each project article, and the outline stays tidy.
Example
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
</nav>
<section id="about">
<h2>About</h2>
<p>...</p>
</section>
<section id="projects">
<h2>Projects</h2>
<article>
<h3>Weather Poster</h3>
</article>
</section>Your task
Now build your own one-page portfolio. It needs:
- A non-empty
<title>, a viewport tag and some CSS (<style>orstyle.css). - A
<header>with your name in an<h1>and a<nav>with links to#about,#projectsand#contact. - Three
<section>s with the idsabout,projectsandcontact, each starting with an<h2>. - In the projects section, at least 2
<article>s, each with an<h3>, and at least one image with alt text (trymountains.svgorcat.svg). - A
mailto:link in the contact section. - A
<footer>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<a href="#my projects">Projects</a>
<section id="my projects">Right
<a href="#my-projects">Projects</a>
<section id="my-projects">Spaces are not allowed in an id, so the link has no valid target, and hyphens fix it.
Wrong
<a href="#Projects">Projects</a>
<section id="projects">Right
<a href="#projects">Projects</a>
<section id="projects">Ids are case-sensitive, so #Projects never matches id="projects" and the link leads nowhere.
Go deeper
Anchor links come with a few real-world wrinkles. Add a sticky header later and it can cover the heading you just jumped to. One CSS line on the sections fixes that: section { scroll-margin-top: 80px; } stops the scroll 80px below the top edge (the W3C CSS Scroll Snap (opens in a new tab) spec defines the property). In modern browsers, following an in-page link also moves the keyboard starting point. The next Tab press carries on from the section, and the user doesn't land back in the menu.
A one-page site has one title and one description, so search engines treat it as a single page about you (the HTML SEO guide explains how they read it). For a personal portfolio that is fine. If you want a project found on its own, give it a separate page with its own title, description and a longer case study, and link to it from the article.
Portfolios carry a lot of images. Add loading="lazy" to images further down, and the browser downloads them only as visitors scroll close (see the HTML standard on lazy loading (opens in a new tab)). Keep the width and height attributes so nothing jumps as they appear. Export each image at the size it is shown. A 6000-pixel camera file has no place here.
Put your strongest project first. Plenty of visitors look at one or two before they decide whether to keep scrolling. Before you share the page, check it at phone width in a live HTML preview with custom viewport sizes (opens in a new tab).
Frequently asked questions
How do I link to a section on the same page in HTML?
Give the target element an id, such as <section id="contact">, and point a link at it with a hash: <a href="#contact">Contact</a>. A click on the link scrolls to that element. From another page, add the hash to the address: index.html#contact. The id has to exist exactly once and match the link letter for letter.
How do I make smooth scrolling in HTML?
With one CSS rule: html { scroll-behavior: smooth; }. Anchor links then glide to their section. Some people get dizzy from motion (WCAG covers this in Animation from Interactions (opens in a new tab)), so wrap the rule in a media query that respects their system setting: @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }. No JavaScript is needed.
What should I include in a portfolio website?
Three things: a plain statement of who you are and what you do, a handful of your best projects, and an easy way to reach you. For each project, show an image and a few sentences on the goal, your role, the tools and the result. Pick carefully. Three to six strong projects, each well explained, leave a better impression than twenty thumbnails.
