Foundation project

Project: your first responsive portfolio

Lesson 12 of 20 · 20 min · Module 4: A complete little website

Build a compact portfolio page that gives your work structure, readable spacing, and room to adapt.

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Combine semantic content and CSS layout
Build a responsive component
Check content, navigation, and sizing independently

The idea

Use semantic page regions and a responsive project grid. The content should remain the same at every size; the layout changes to fit the available width.

<main>
  <h1>Alex Morgan</h1>
  <section id="projects" class="projects">...</section>
</main>

01Work in layers

First create meaningful content and a working fragment link. Then style the cards. Finally add responsive layout rules. Each layer can be checked without guessing whether another layer is correct.

02Review it as a visitor

Try a narrow viewport. Read every project heading. Follow the navigation link. A page is a complete experience only when its structure and behavior support its content.

Your project brief

Create main with an h1 saying Alex Morgan, a nav link My projects to #projects, and section#projects.projects containing exactly two articles, each with an h2. Make .projects a grid: one column below 600px and two equal columns from 600px upward, with a 16px gap. Give every article padding: 20px.

What the checks look for

Page introduces Alex
Navigation connects to projects
Two project cards have headings
There are exactly two project articles
Project grid fits a small screen
Project grid expands on a wide screen
Grid spacing is 16px
Every project card has padding

Try it in the editor →

Take this with you

Build content first, style it deliberately, and verify the whole experience.