Personal Portfolio Page

1.5 hBeginnerHTMLCSSResponsive designCSS Grid

Outcome

A one-page portfolio you can actually publish: a bold hero, a short story about you, a grid of project cards that reflows from one to three columns, and working contact links.

Learning objectives

Structure a real page with semantic HTML: header, nav, main, section, article, footer
Link sections together with in-page anchors (href="#projects")
Style a hero, cards and buttons with spacing, colour and rounded corners
Make a grid responsive with the viewport meta tag and @media queries

Prerequisites

You know what HTML tags are and how a browser renders a page — see What Actually Happens When You Open a Website?
Basic CSS: selectors, colours, padding and margin (the HTML & CSS track covers these)

Expected behaviour

The top of the page shows a hero with your name, a one-line tagline, a small navigation bar and a call-to-action button.
Clicking a nav link scrolls to the matching section (About, Projects, Contact).
At least three project cards sit in a grid: one column on a phone, more columns on wider screens.
The contact section has a working mailto: link and at least one other profile link.

A portfolio is the first thing many employers and clients look at. It doesn't need to be fancy — it needs to be clear, fast and readable on a phone. In this project you'll build one from an empty page, milestone by milestone.

Text

header.hero    → nav + name + tagline + button
main
  #about       → who you are
  #projects    → .grid of .project-card
  #contact     → email + profile links
footer

The page outline you'll build. Each milestone adds one layer.

Use your own name and real (or planned) projects. Placeholder text is fine while you work — but swap it out before you share the page.

CSS Grid columns

1

2

3

4

5

6

0 columns → 1 grid lines

/* CSS */

.grid {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 12px;

}

fr = one share of the leftover space. px = a fixed size.

grid-template-columns

gap12px.item-1 { grid-column: span 2 }

The track sizes above the grid are measured live from your browser. Simplified: only columns are shown; rows are created automatically.

Milestone 5 uses CSS Grid to place the project cards. Play with the columns here first.

Milestones

Replace the first comment in <body> with a <header class="hero">. Inside it add:

• a <nav> with three links: #about, #projects and #contact • an <h1> with your name • a <p> with a one-line tagline about what you do • a call-to-action link with class="button" (for example href="#projects")

Checks

There is a header.hero
The hero has an <h1> with your name
The hero has a tagline paragraph
The nav has 3 in-page links
There is a call-to-action .button link

Completion checklist

Tick these when they're true for your project. The project completes when every milestone passes and every item is ticked.

My real name, tagline and projects replace all placeholder textEvery link works: nav jumps to sections, email opens a new message, profile links go to the right placeI tested the page at phone width (cards stack, nothing scrolls sideways) and at desktop width (cards side by side)Text has strong contrast against its background and the spacing feels consistentI can tab through every link with the keyboard and see where the focus is

Preview

Console output from your code appears here.