🗺️ Lesson 16: Planning Your Site

Why Planning Matters

Imagine building a house by laying bricks first and deciding where the rooms go later. Absurd, right? Yet that's what many beginner developers do — they open an editor, start typing HTML, and figure it out as they go. The result is usually a tangled mess that needs to be rewritten.

Planning before coding gives you:

• Direction — you know what you're building before you start
• Consistency — colors, fonts, and spacing are decided once and applied everywhere
• Speed — no staring at a blank page wondering what to do next
• Quality — problems are easier to spot in a sketch than in code

The plan doesn't need to be fancy. A napkin sketch, a text outline, and a few color choices is enough. What matters is having something before you code.

Define Your Purpose & Audience

Before designing anything, answer three questions:

1. What is the site for? — A personal portfolio? A recipe collection? A small business? A hobby blog?
2. Who is the audience? — Friends and family? Potential employers? Customers? Strangers who love cooking?
3. What should visitors do? — Read your story? Contact you? Browse recipes? View your work?

Write your answers down in one or two sentences each. This becomes your project brief — a north star for every decision you'll make.

This example is what we'll use for the course project. If you have a different idea for your site — a portfolio, a fan page, a small business — adapt the exercises to fit. The skills are the same regardless of the topic.

Creating a Sitemap

A sitemap is a diagram showing every page on your site and how they link to each other. It's the blueprint for your navigation.

For our course project, the sitemap is simple: four pages all linked from the homepage. Every page has the same navigation bar, so visitors can reach any page from any other page.

How to Create a Sitemap

1. List every page your site needs. Start with the obvious ones: Home, About, Contact. Then add content pages.
2. Decide the hierarchy — which pages are top-level (in the main nav) and which are deeper?
3. Draw the connections — how does a visitor get from one page to another?

Keep it small. A four to six page site is perfect for a first project. You can always add pages later.

Page Inventory

For each page, write a one-line description of its purpose:

Sketching Wireframes

A wireframe is a simple sketch showing where elements go on a page — without colors, images, or final content. Think of it as a floor plan for your layout.

Wireframes don't need to be pretty. Boxes and labels on paper or a whiteboard are perfect. The goal is to answer: "Where does everything go?"

What to Include in a Wireframe

• Navigation bar position and contents
• Header/hero area
• Main content sections
• Sidebar (if any)
• Footer
• Key UI elements: buttons, forms, card grids, images

Desktop vs. Mobile Wireframes

Sketch at least two versions: desktop (wide) and mobile (narrow). The mobile wireframe should show how the layout collapses — sidebar stacks below main content, nav becomes a hamburger menu, card grids go to single column.

Content-First Planning

"Content first" means deciding what you'll say before deciding how it looks. Too many beginners design beautiful layouts and then realize they have nothing to put in them — or worse, they stretch thin content across a layout designed for more.

Write a Content Outline

For each page, list the sections and what goes in them. You don't need final text — just a roadmap:

Home Page Content Outline:

1. Hero section — welcome heading, one-sentence tagline, call-to-action button
2. Feature cards — 3 cards linking to About, Recipes, Contact
3. Featured recipe — preview of one recipe with image and link
4. Footer — copyright, links, social icons

About Page Content Outline:

1. Introduction — photo, name, short bio
2. Story — how you got into cooking (or your topic)
3. Interests — hobbies, favorites, fun facts
4. Why this site — what visitors will find here

Recipe Page Content Outline:

1. Recipe title and image
2. Prep info — time, servings, difficulty
3. Ingredients list
4. Step-by-step instructions
5. Tips/notes

Contact Page Content Outline:

1. Introduction — friendly invitation to reach out
2. Contact form — name, email, message, submit button
3. Alternative contact — email address, social media links

Choosing a Color Palette

A consistent color palette makes your site look intentional and professional. You don't need many colors — most well-designed sites use 3 to 5 colors:

1. Primary color — your brand color, used for headers, buttons, links. (e.g., a blue, green, or teal)
2. Accent color — for highlights, hover states, call-to-action buttons. Should contrast with the primary.
3. Background — usually white or very light gray for light mode
4. Text — dark gray or near-black (pure black is actually harder to read than dark gray)
5. Border/muted — light gray for borders, dividers, subtle backgrounds

Color Palette Tools

• Coolors — generates harmonious palettes with one click
• Adobe Color — advanced color wheel with harmony rules
• Happy Hues — shows complete palettes applied to a real page layout
• Realtime Colors — preview your palette on a live website template

Example Palette

:root {
    /* Primary */
    --color-primary: #1e40af;       /* deep blue */
    --color-primary-light: #3b82f6; /* lighter blue for hovers */

    /* Accent */
    --color-accent: #f59e0b;        /* warm amber */

    /* Backgrounds */
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;        /* light gray for alternating sections */

    /* Text */
    --color-text: #1e293b;          /* dark slate */
    --color-text-light: #64748b;    /* muted text for captions, dates */

    /* Borders */
    --color-border: #e2e8f0;

    /* Feedback */
    --color-success: #16a34a;
    --color-error: #dc2626;
}

Choosing Typography

Typography is one of the biggest factors in how "professional" a site looks. The good news: you only need one or two font families.

Font Pairing Strategy

• One font for everything — the simplest approach. Pick a versatile sans-serif like Inter, Open Sans, or system fonts. Use different weights (regular, semibold, bold) to create hierarchy.
• Two fonts — one for headings (can be a serif or decorative sans-serif) and one for body text (a readable sans-serif). Example: Playfair Display for headings + Inter for body.

Loading Web Fonts (Google Fonts)

<!-- In your <head> — loads Inter from Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet">

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, sans-serif;
}

The System Font Stack (Zero Load Time)

If you don't want to load external fonts, the system font stack uses each device's native font — it's free, fast, and looks native:

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Oxygen, Ubuntu, Cantarell,
                 "Helvetica Neue", sans-serif;
}

Type Scale

Define your font sizes as a consistent scale. A common approach is a major third scale (1.25x ratio):

:root {
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
body { font-size: var(--font-size-base); line-height: 1.6; }

Building a Style Guide with Custom Properties

A style guide is a single source of truth for your site's visual decisions. In CSS, custom properties (variables) make this practical — define values once in :root and reference them everywhere.

:root {
    /* ===========================
       Colors
       =========================== */
    --color-primary: #1e40af;
    --color-primary-light: #3b82f6;
    --color-accent: #f59e0b;
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-text: #1e293b;
    --color-text-light: #64748b;
    --color-border: #e2e8f0;
    --color-success: #16a34a;
    --color-error: #dc2626;

    /* ===========================
       Typography
       =========================== */
    --font-family: "Inter", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, sans-serif;
    --font-size-base: 1rem;
    --line-height: 1.6;

    /* ===========================
       Spacing
       =========================== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* ===========================
       Layout
       =========================== */
    --max-width: 1200px;
    --sidebar-width: 250px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;

    /* ===========================
       Transitions
       =========================== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

Now instead of remembering #1e40af, you write var(--color-primary). If you ever want to change the primary color, you change it in one place and it updates everywhere.

Dark Mode with Custom Properties

Custom properties make dark mode straightforward — just redefine the color variables:

/* Dark mode overrides */
[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-text: #e2e8f0;
    --color-text-light: #94a3b8;
    --color-border: #334155;
    --color-primary: #60a5fa;
    --color-primary-light: #93c5fd;
}

Because all your styles reference the variables, switching to dark mode means switching the variable values — the rest of your CSS doesn't change at all.

Project Folder Structure

A clean folder structure keeps your project organized as it grows:

my-website/
├── css/
│   └── style.css          ← all your styles
├── images/
│   ├── hero.jpg           ← hero/banner images
│   ├── about-photo.jpg    ← your photo for the About page
│   └── recipe-pasta.jpg   ← recipe images
├── js/
│   └── script.js          ← mobile menu toggle, interactivity
├── index.html             ← Home page
├── about.html             ← About page
├── recipe.html            ← Recipes page
└── contact.html           ← Contact page

Why This Structure?

• HTML files in the root — so links between pages are simple (href="about.html")
• css/ folder — keeps styles separate from content
• images/ folder — all images in one place with descriptive names
• js/ folder — JavaScript files (even if you only have one)

Hands-on Exercise

/* css/style.css — starter file with style guide */

/* ===========================
   Reset & Base
   =========================== */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* Colors */
    --color-primary: #1e40af;
    --color-primary-light: #3b82f6;
    --color-accent: #f59e0b;
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-text: #1e293b;
    --color-text-light: #64748b;
    --color-border: #e2e8f0;
    --color-success: #16a34a;
    --color-error: #dc2626;

    /* Typography */
    --font-family: "Inter", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, sans-serif;

    /* Spacing */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Layout */
    --max-width: 1000px;
    --border-radius: 8px;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

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

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); }

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--color-primary-light);
}

<!-- index.html — starter boilerplate -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website - Home</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Navigation (same on every page) -->
    <nav></nav>

    <!-- Hero section -->
    <header></header>

    <!-- Main content -->
    <main></main>

    <!-- Footer (same on every page) -->
    <footer></footer>

    <script src="js/script.js"></script>
</body>
</html>

Summary

📁 Your Project So Far

my-website/
├── css/
│   └── style.css      ← style guide with custom properties + resets
├── images/            ← placeholder images ready
├── js/
│   └── script.js      ← empty, ready for interactivity
├── index.html         ← boilerplate ready
├── about.html         ← boilerplate ready
├── recipe.html        ← boilerplate ready
└── contact.html       ← boilerplate ready

Planning artifacts (paper, text file, or digital):
✅ Project brief
✅ Sitemap
✅ Wireframes (desktop + mobile)
✅ Content outlines for each page
✅ Color palette + typography choices

🚀 What's Next?

Plan in hand, it's time to build. In the next lesson — Lesson 17: Building the Homepage — you'll turn your wireframe into real HTML and CSS. You'll build the navigation bar, hero section, feature cards, and footer that will set the pattern for every other page on your site.