17: Putting It All Together

What you are building

One page. Pick one:

Portfolio with about, work, and contact sections
Blog post with article, header, and footer (clone this course's layout)
Landing page that clones one section of a real landing like Linear, Stripe, or Figma

Must use: semantic HTML (03), flex or grid (09 or 10), responsive layout (12), typography (13), color and variables (14), form pseudo-classes (15), and one transform or transition (16). Check the checklist below.

File organization

my-site/
  index.html
  shared.css        # or style.css: variables, layout, components
  images/
    me.jpg
  README.md         # optional: what you built + link

Naming with BEM-lite

<!-- block__element--modifier, just enough structure -->
<section class="card card--featured">
  <h2 class="card__title">Hello</h2>
  <p class="card__body">...</p>
</section>

/* shared.css. organize top to bottom */
:root { --bg:#fff; --fg:#111; --accent:#0b57d0; --radius:12px; } /* 1. vars */
* { box-sizing: border-box; }                                      /* 2. reset */
body { max-width: 720px; margin: 0 auto; }                        /* 3. base */
.card { border: 1px solid #ddd; border-radius: var(--radius); }  /* 4. components */
@media (max-width: 600px) { ... }                                 /* 5. responsive */

Starter template to clone

Mira

Portfolio · 2026

Design & code that ships

I build small, fast sites, no frameworks, just HTML/CSS. Here's what I made recently.

Project A
Landing page with flex and grid

Project B
Form with validation

Project C
Responsive article

Get in touch

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mira's Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>... nav ...</header>
  <main>
    <section>... hero ...</section>
    <section>... work grid ...</section>
    <section>... contact form ...</section>
  </main>
  <footer>...</footer>
</body>
</html>

Checklist before ship

Check	How	Pass?
Valid HTML	Paste into validator.w3.org	0 errors
Responsive	DevTools device toolbar (320px, 768px, 1024px)	No horizontal scroll
Lighthouse	DevTools Lighthouse panel: Generate report	90+ on Performance and A11y
Keyboard a11y	Tab through. All interactive elements reachable, focus visible	Yes
Contrast	DevTools color picker shows contrast ratio	4.5:1 min
Links/images	All `href`/`src` relative, `alt` present	Yes
Shareable	Open in private window does it still work?	Yes

Deploy: drag, drop, done

Host	How	URL
GitHub Pages	Repo: Settings, Pages, Deploy from `main`	`you.github.io/my-site`
Netlify	Drag folder to `app.netlify.com/drop`	`random-name.netlify.app`
Cloudflare Pages	Drag folder	`*.pages.dev`

No build step. Just HTML and CSS files. Any static host works.

# quick local test before deploy
python -m http.server 8000
# then open http://localhost:8000

What comes next: JS teaser

You have hit the ceiling of what HTML and CSS can do. Next:

JS 0: What JS does versus :hover and :checked hacks. Progressive enhancement.
JS 1: DOM and events: querySelector, addEventListener, theme toggle.
JS 2: Make this capstone interactive with a hamburger menu, form validation, and modal open and close.

For now, try :has() and :checked with label to fake toggles without JS. Then you will want JS.

Exercise: Ship one page (30 to 60 min)

Build the portfolio, blog, or landing. Use every phase at least once.
Run the checklist above and fix what fails.
Deploy to GitHub Pages or Netlify drag and drop.
Send the link to someone. Ask: "What confused you?" Fix that and ship again.

Done? You can build a real webpage without crying. Everything after this is iteration.

Prev16: Transitions & Animations HomeCourse map