Session 16 — Process and design: building a page from scratch

You will assemble everything from Sessions 1–15 into a working page, and learn the five-pass process for building any page: sketch (wireframe regions), structure (semantic HTML), base CSS (mobile-first), layout (responsive upgrade), and polish/check. The deliverable is the complete Harbor Café home page, and the skill is being able to read any site as a builder does.

Plan: ideas → worked page → bridge → short drills → reveal.

Time: about 60–70 minutes if you run all five passes yourself before reading the reveal.

Session 16 — Process and design: building a page from scratch

The one-paragraph story

Every skill in this course was one element, one rule, one layout at a time. This session assembles them into a working page — and, more importantly, teaches the process for doing it from scratch: sketch the page's regions first, mark it up semantically, write the CSS mobile-first, and check the result. The deliverable is the complete Harbor Café home page — structure, content, and styling — built in five passes that mirror how real pages get made.

---

The five-pass process

Pass 1 — Sketch. Draw the page as boxes on paper (a wireframe): header with logo and nav at the top, a hero statement, a main column with today's specials, a sidebar with hours, a footer. No colours, no fonts — just regions and their hierarchy. This is the cheapest way to decide what the page is before deciding how it looks.

Pass 2 — Structure. Convert the sketch into semantic HTML (Session 8): header, nav, main, section, aside, footer. Fill in the content with the elements from Sessions 2–7 — headings, paragraphs, lists, an image, a table if data exists. Do not style yet; the goal is a clean, meaningful document.

Pass 3 — Base CSS. Mobile-first (Session 15): reset fonts/colours on body, one-column grid, images capped at 100%. The page should already read well stacked.

Pass 4 — Layout. Add the responsive upgrade: the two-column grid at the breakpoint, the flex nav, any spacing the design needs. Style lists, tables, and forms (Session 12). This is where the wireframe becomes real.

Pass 5 — Polish and check. Colours, whitespace, focus states, and the final read-through: does the page communicate, and does it hold together at phone and desktop widths?

---

The process in action

Sketch (Pass 1) — the home page wireframe:

+--------------------------------------------------+
| [logo]  Home  Menu  Contact         (header)     |
+--------------------------------------------------+
|  Welcome to the Harbor Café           (hero)     |
|  Fresh coffee on the waterfront.                 |
+----------------------------+---------------------+
| Today's specials            |  Opening hours     |
|  • Salmon chowder           |  Daily 7:00–15:00  |
|  • Beet tart                |  (aside)           |
+----------------------------+---------------------+
| © 2026 Harbor Café                    (footer)  |
+--------------------------------------------------+

Structure (Pass 2):

<body>
  <header>
    <img src="images/logo.png" alt="Harbor Café">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="pages/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Welcome to the Harbor Café</h1>
    <p>Fresh coffee on the waterfront, roasted weekly on the pier.</p>

    <section id="specials">
      <h2>Today's specials</h2>
      <ul>
        <li>Salmon chowder</li>
        <li>Beet tart</li>
        <li>Cardamom twist</li>
      </ul>
    </section>
  </main>

  <aside>
    <h2>Opening hours</h2>
    <p>Daily, 7:00–15:00.</p>
  </aside>

  <footer>
    <p>© 2026 Harbor Café. Est. 2016.</p>
  </footer>
</body>

Every region from the sketch has a named element. The nav is the Session 4/13/14 list-of-links; the specials are a ul; the aside holds the hours.

Base CSS (Pass 3):

* { box-sizing: border-box; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333333;
  background-color: #faf7f2;
  line-height: 1.5;
  margin: 0;
}

.page { display: grid; grid-template-columns: 1fr; gap: 24px; }
img { max-width: 100%; height: auto; }

Layout (Pass 4):

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #ffffff;
}

nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  color: #1f3a5f;
  font-weight: bold;
}

@media (min-width: 768px) {
  .page { grid-template-columns: 2fr 1fr; }
}

The header becomes a flex row (logo left, nav right — space-between pushes them apart); the nav is a flex row of links; the page grid upgrades to two columns at 768 px.

Polish (Pass 5) — the completed stylesheet:

main, aside { padding: 24px; background-color: #ffffff; }
h1, h2 { font-family: Georgia, serif; color: #1f3a5f; }
footer { padding: 16px; text-align: center; color: #666666; }

---

Design choices worth making deliberately

Three simple decisions carry most of a page's feel:

• A palette of three — one dark ink (#333333), one accent (#1f3a5f), one background (#faf7f2). Write them once, reuse everywhere.
• One serif / one sans — headings in Georgia, body in Helvetica (Session 10). The pairing costs nothing and reads professionally.
• Whitespace before decoration — padding and gaps (Session 11/14) do more for readability than extra borders ever do.

---

Reading a page like a builder

Given any site, you can now see how it was made: the wireframe (regions), the semantics (which elements), and the CSS (which rules). That is the payoff of this course — not memorising properties, but being able to read a page and rebuild it. When you meet an unfamiliar layout, ask: what are the regions, what elements sit in them, and what layout engine arranges them?

---

Pitfalls to watch for

• Styling before structuring — a beautiful page with bad markup is fragile; semantics first.
• Skipping the sketch — going straight to code makes region decisions on the fly; the wireframe is cheaper than rework.
• Designing desktop-first — start from the stacked mobile version (Pass 3) and upgrade.
• Forgetting the read-through — a page that validates but reads badly missed its point; check the prose as well as the pixels.

Session 16 — Worked examples

Example A — The completed home page, end to end

The full HTML from Pass 2, now with the stylesheet linked:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harbor Café — Home</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <img src="images/logo.png" alt="Harbor Café">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="pages/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <div class="page">
    <main>
      <h1>Welcome to the Harbor Café</h1>
      <p>Fresh coffee on the waterfront, roasted weekly on the pier.</p>

      <section id="specials">
        <h2>Today's specials</h2>
        <ul>
          <li>Salmon chowder</li>
          <li>Beet tart</li>
          <li>Cardamom twist</li>
        </ul>
      </section>
    </main>

    <aside>
      <h2>Opening hours</h2>
      <p>Daily, 7:00–15:00.</p>
    </aside>
  </div>

  <footer>
    <p>© 2026 Harbor Café. Est. 2016.</p>
  </footer>
</body>
</html>

Note the wrapper: the sketch's main-plus-aside region becomes a div.page that the grid lays out. This is exactly the "div when no semantic element fits" case from Session 8 — the wrapper has no semantic name, so it is a div with a class.

---

Example B — The complete stylesheet

* { box-sizing: border-box; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333333;
  background-color: #faf7f2;
  line-height: 1.5;
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #ffffff;
}

nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  text-decoration: none;
  color: #1f3a5f;
  font-weight: bold;
}

h1, h2 { font-family: Georgia, serif; color: #1f3a5f; }

.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px;
}

main, aside {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
}

img { max-width: 100%; height: auto; }

footer {
  padding: 16px;
  text-align: center;
  color: #666666;
}

@media (min-width: 768px) {
  .page { grid-template-columns: 2fr 1fr; }
}

Walk it by pass:

1. box-sizing reset + body base — fonts, colours, line height (Session 10/11).
2. Header flex row, nav flex row (Session 13/14).
3. Heading serif pairing (Session 10).
4. Page grid: one column base, two columns at 768 px (Session 14/15).
5. White content panels with rounded corners and max-width images (Session 11/5).

---

Example C — Reading a page like a builder

Given a page, the builder's questions:

1. Regions — where are header, nav, main, aside, footer (or a div wrapper)?
2. Elements — what sits inside each: headings, lists, tables, forms?
3. Layout — flex rows for bars, grid for the page skeleton; at what width do columns collapse?
4. Style system — one palette? one serif/sans pair? consistent spacing?

For the café page: regions from Session 8, content from Sessions 2–7, layout from Sessions 13–15, style from Sessions 10–12. Every page you meet will decompose the same way.

---

Example D — The wireframe's value

The sketch from Pass 1 exists before any CSS decisions. It answers the structural questions — what regions exist, what is beside what — so that when the design changes (the aside becomes a full-width strip, say), only the grid rule changes, not the markup. The wireframe is the cheapest insurance against rework.

---

Example E — Verification checklist

Before calling the page done:

• [ ] Valid: every tag closed, nesting legal, one main.
• [ ] Semantic: regions named, alt on every image, links descriptive.
• [ ] Responsive: shrinks to a phone without horizontal scroll.
• [ ] Accessible: focus states visible, colour contrast readable.
• [ ] Readable: the prose reads well at 16 px with 1.5 line height.

Each check maps to a skill from this course — validity (Sessions 1–2), semantics (3–8), responsive layout (13–15), accessibility (5, 12), typography (10).