Guided project

Build a Portfolio Site with HTML & CSS

A personal portfolio site, from an empty file to a responsive, accessible page.

Build a one-page portfolio from scratch: a real document, a header with navigation, a hero, project cards, an About section and a contact form, then style it with Flexbox and Grid, make it work on phones and from the keyboard.

Milestones
4
Steps
13
Free steps
6

Free: milestones 1 to 2 (6 steps). Milestones 3 to 4 with DevArcade Pro.

See pricing
Sam Rivera Projects About Contact Hi, I'm Sam. I build friendly websites. Work with me Projects Trail Notes Trail Notes Pocket Budget Pocket Budget Recipe Box Recipe Box © 2026 Sam Rivera
The finished app. You build every part of it.

What you'll build

A one-page portfolio site with a hero, project cards, an About section and a contact form, responsive and keyboard friendly.

Skills you'll practise

  • A complete HTML document and landmarks
  • Navigation and in-page links
  • Images with useful alt text
  • Forms with labels and built-in validation
  • Custom properties for colours
  • Flexbox for rows, CSS Grid for cards
  • Media queries for phones
  • Skip links and visible focus

Milestones and steps

4 milestones and 13 steps. Every step starts from your code of the step before, adds one feature, and is tested in your browser.

  1. Milestone 1:The page structure

    A complete document, a header with navigation and the hero.

    Free
    1. The page skeletonA real HTML document: doctype, language, the head, and a body with header, main and footer.
    2. Header and navigationA home link and a list of in-page links inside a labelled nav.
    3. The heroThe first thing people read: one h1, a short pitch and a call to action.

  2. Milestone 2:The content

    Project cards, an About section and a contact form with built-in validation.

    Free
    1. Project cardsA section of three cards, each with a picture, a heading and a sentence.
    2. About meA short bio with a portrait and a list of skills.
    3. A contact formLabelled fields, the right input types, and validation the browser does for you.

  3. Milestone 3:Style it

    Custom properties, a Flexbox header, a hero that stands out and a CSS Grid of projects.

    Pro
    1. Base stylesA style element, custom properties for the colours, and a readable body.
    2. Lay out the headerFlexbox puts the name and the links on one row, pushed to either end.
    3. Style the heroSpace, a big heading and a link styled as a pill-shaped button.
    4. A grid of projectsCSS Grid puts the cards in three equal columns with even gaps.

  4. Milestone 4:Responsive and ship

    A media query for phones, keyboard access and the final polish.

    Pro
    1. Fit every screenA media query stacks the grid and the header on narrow screens.
    2. Keyboard friendlyA skip link and a clear focus outline for people who navigate with the keyboard.
    3. Final polishA round portrait, skills as tags, safe images and a quiet footer. Ship it.

Start building for free

Milestones 1 and 2 are free. DevArcade Pro opens every milestone of every project and every unit of every course, monthly or yearly.

All projects