Lesson 18: Building Content Pages

Reusing Shared Components

Every page on your site shares two things: the navigation bar and the footer. In a production site, you'd use a template engine or a framework to avoid duplicating this code. But for a static HTML site, the correct approach is straightforward: copy the nav and footer from your homepage into each new page.

The Multi-Page Workflow

graph LR A["index.html
(Homepage)"] -->|"Copy nav + footer"| B["about.html"] A -->|"Copy nav + footer"| C["recipe.html"] A -->|"Copy nav + footer"| D["contact.html"] style A fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style B fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b style C fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b style D fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b

For each new page:

Copy the entire index.html file
Rename it (about.html, recipe.html, contact.html)
Keep the <head>, nav, footer, and <script> tags
Replace the <title> and the content between the nav and footer
Move the active class to the correct nav link

💡 The Duplication Trade-off

Yes, copying the nav into four files means updating four files if you add a new page. This is the trade-off of static HTML. For a small 4–6 page site, it's perfectly manageable. When it becomes painful, that's your signal to learn a tool like a static site generator (e.g., Eleventy) or a framework (e.g., React). But don't reach for those tools until plain HTML becomes limiting — you'll understand the tools better when you know what problem they solve.

About Page — HTML

The About page introduces you to visitors. It typically includes a photo, a short bio, your story, and some personal details. The layout pattern is a profile section (image beside text) followed by prose sections.

Create about.html (or replace the boilerplate). Use the same <head>, nav, and footer from your homepage, but change the <title> and the content:

<!-- about.html — content between nav and footer -->

<main>
    <section class="page-header">
        <div class="container">
            <h1>About Me</h1>
            <p class="page-subtitle">The person behind the recipes.</p>
        </div>
    </section>

    <section class="profile">
        <div class="container">
            <div class="profile-content">
                <div class="profile-image">
                    <img src="images/about-photo.jpg"
                         alt="A smiling person in a kitchen holding a wooden spoon"
                         width="400" height="400">
                </div>
                <div class="profile-text">
                    <h2>Hi, I'm Alex!</h2>
                    <p>I'm a home cook who believes that great food doesn't
                       need to be complicated. What started as a quarantine
                       hobby turned into a genuine passion — and this site
                       is where I share what I've learned along the way.</p>
                    <p>My cooking philosophy is simple: use fresh ingredients,
                       don't skip the garlic, and always taste as you go.
                       Every recipe on this site has been tested at least
                       three times in my own kitchen before making it here.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="about-story">
        <div class="container">
            <h2>My Cooking Journey</h2>
            <p>I grew up watching my grandmother cook — no recipes,
               no measuring cups, just instinct and decades of practice.
               I always admired that but never thought I could learn it
               myself. Then the world changed, I had time, and I started
               with scrambled eggs. Really bad scrambled eggs.</p>
            <p>Three years and a lot of burnt garlic later, I can
               confidently say I make a mean pasta, a respectable curry,
               and the best banana bread my friends have ever tasted
               (their words, not mine). This site is my way of documenting
               what I've learned and sharing it with anyone who wants
               to start their own kitchen journey.</p>
        </div>
    </section>

    <section class="about-interests">
        <div class="container">
            <h2>When I'm Not Cooking</h2>
            <div class="interests-grid">
                <div class="interest-item">
                    <span class="interest-icon">📚</span>
                    <h3>Reading</h3>
                    <p>Mostly cookbooks, but also sci-fi and history.</p>
                </div>
                <div class="interest-item">
                    <span class="interest-icon">🌱</span>
                    <h3>Gardening</h3>
                    <p>Growing herbs on my balcony — basil, mint, rosemary.</p>
                </div>
                <div class="interest-item">
                    <span class="interest-icon">🎵</span>
                    <h3>Music</h3>
                    <p>Cooking with a good playlist is non-negotiable.</p>
                </div>
                <div class="interest-item">
                    <span class="interest-icon">✈️</span>
                    <h3>Travel</h3>
                    <p>Finding new flavors in every city I visit.</p>
                </div>
            </div>
        </div>
    </section>
</main>

Structure Breakdown

Page header — a simple banner with the page title and subtitle. This replaces the hero section from the homepage.
Profile section — image and text side by side, using the same Flexbox pattern as the featured recipe in Lesson 17.
Story section — plain prose paragraphs. Not everything needs a fancy layout — sometimes text is just text.
Interests grid — small cards showing hobbies. Reuses the card grid pattern from the homepage feature cards.

About Page — CSS

Add these styles to your css/style.css. Notice how many existing classes we reuse — the style guide pays off:

/* ===========================
   Page Header (shared across content pages)
   =========================== */
.page-header {
    background-color: var(--color-bg-alt);
    padding: var(--space-2xl) 0;
    text-align: center;
}

.page-subtitle {
    color: var(--color-text-light);
    font-size: 1.125rem;
    margin-top: var(--space-sm);
}

/* ===========================
   Profile Section (About Page)
   =========================== */
.profile {
    padding: var(--space-2xl) 0;
}

.profile-content {
    display: flex;
    gap: var(--space-2xl);
    align-items: center;
    flex-wrap: wrap;
}

.profile-image {
    flex: 0 1 300px;
}

.profile-image img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.profile-text {
    flex: 1 1 400px;
}

.profile-text h2 {
    margin-bottom: var(--space-md);
}

.profile-text p {
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

/* ===========================
   Story Section
   =========================== */
.about-story {
    background-color: var(--color-bg-alt);
    padding: var(--space-2xl) 0;
}

.about-story h2 {
    margin-bottom: var(--space-lg);
}

.about-story p {
    line-height: 1.7;
    margin-bottom: var(--space-md);
    max-width: 720px;
}

/* ===========================
   Interests Grid
   =========================== */
.about-interests {
    padding: var(--space-2xl) 0;
}

.about-interests h2 {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.interests-grid {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.interest-item {
    flex: 1 1 200px;
    max-width: 250px;
    text-align: center;
    padding: var(--space-lg);
}

.interest-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-sm);
}

.interest-item h3 {
    margin-bottom: var(--space-xs);
    font-size: 1.1rem;
}

.interest-item p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    line-height: 1.5;
}

Key Decisions

border-radius: 50% on the profile image creates a circle crop — a common design pattern for profile photos. The aspect-ratio: 1 / 1 ensures the image stays square regardless of the source image's dimensions.
flex: 0 1 300px on the image means: don't grow (keep it at 300px max), but shrink if needed, starting at 300px. The text side gets flex: 1 1 400px — it takes up the remaining space.
max-width: 720px on story paragraphs keeps lines at a comfortable reading length (roughly 65–80 characters per line).

💡 Optimal Line Length for Reading

Research on typography suggests that 45–75 characters per line is the most comfortable reading width. At a 16px base font, that's roughly 600–750px. This is why we constrain paragraph widths — full-width text on a wide monitor is exhausting to read.

Recipe Page — HTML

The recipe page has two jobs: show a grid of recipe cards (so visitors can browse) and present a detailed recipe with ingredients, instructions, and tips. We'll build both on the same page.

<!-- recipe.html — content between nav and footer -->

<main>
    <section class="page-header">
        <div class="container">
            <h1>Recipes</h1>
            <p class="page-subtitle">Tried-and-true dishes from my kitchen to yours.</p>
        </div>
    </section>

    <!-- Recipe Card Grid -->
    <section class="recipe-grid-section">
        <div class="container">
            <div class="recipe-card-grid">

                <article class="recipe-card">
                    <img src="images/recipe-pasta.jpg"
                         alt="Creamy garlic pasta in a bowl"
                         width="400" height="300">
                    <div class="recipe-card-body">
                        <h2>Creamy Garlic Pasta</h2>
                        <p class="recipe-meta">⏱ 25 min · 🍽 Serves 4 · Easy</p>
                        <p>One-pan pasta that's creamy without the cream.</p>
                        <a href="#recipe-detail" class="btn btn-outline">View Recipe</a>
                    </div>
                </article>

                <article class="recipe-card">
                    <img src="images/recipe-salad.jpg"
                         alt="Fresh Mediterranean salad with feta and olives"
                         width="400" height="300">
                    <div class="recipe-card-body">
                        <h2>Mediterranean Salad</h2>
                        <p class="recipe-meta">⏱ 15 min · 🍽 Serves 2 · Easy</p>
                        <p>Bright, crunchy, and ready in fifteen minutes.</p>
                        <a href="#" class="btn btn-outline">View Recipe</a>
                    </div>
                </article>

                <article class="recipe-card">
                    <img src="images/recipe-soup.jpg"
                         alt="A bowl of tomato basil soup with crusty bread"
                         width="400" height="300">
                    <div class="recipe-card-body">
                        <h2>Tomato Basil Soup</h2>
                        <p class="recipe-meta">⏱ 40 min · 🍽 Serves 6 · Medium</p>
                        <p>Comfort in a bowl — perfect for rainy days.</p>
                        <a href="#" class="btn btn-outline">View Recipe</a>
                    </div>
                </article>

            </div>
        </div>
    </section>

    <!-- Detailed Recipe -->
    <section id="recipe-detail" class="recipe-detail">
        <div class="container">
            <article>
                <h2>Creamy Garlic Pasta</h2>
                <p class="recipe-meta">⏱ 25 min · 🍽 Serves 4 · Easy · Vegetarian</p>

                <div class="recipe-layout">
                    <div class="recipe-image">
                        <img src="images/recipe-pasta.jpg"
                             alt="Creamy garlic pasta close-up"
                             width="600" height="400">
                    </div>

                    <div class="recipe-info">
                        <div class="ingredients">
                            <h3>Ingredients</h3>
                            <ul>
                                <li>350g spaghetti or linguine</li>
                                <li>4 cloves garlic, minced</li>
                                <li>2 tbsp olive oil</li>
                                <li>2 tbsp butter</li>
                                <li>1 cup reserved pasta water</li>
                                <li>¾ cup grated Parmesan cheese</li>
                                <li>Salt and black pepper to taste</li>
                                <li>Fresh parsley for garnish</li>
                            </ul>
                        </div>

                        <div class="instructions">
                            <h3>Instructions</h3>
                            <ol>
                                <li>Bring a large pot of salted water to a boil. Cook pasta
                                   according to package directions until al dente. <strong>Reserve
                                   1 cup of pasta water</strong> before draining.</li>
                                <li>While pasta cooks, heat olive oil and butter in a large
                                   skillet over medium heat. Add minced garlic and cook for
                                   60–90 seconds until fragrant — don't let it brown.</li>
                                <li>Add drained pasta to the skillet. Toss to coat in the
                                   garlic butter.</li>
                                <li>Remove from heat. Add Parmesan and ½ cup of the reserved
                                   pasta water. Toss vigorously — the starch in the water
                                   creates the creamy sauce.</li>
                                <li>Add more pasta water a splash at a time until the sauce
                                   is silky. Season with salt and pepper.</li>
                                <li>Serve immediately, topped with extra Parmesan and fresh
                                   parsley.</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="recipe-tips">
                    <h3>💡 Tips & Notes</h3>
                    <ul>
                        <li><strong>Don't skip the pasta water.</strong> The starch is
                           what makes the sauce creamy without cream. Reserve it
                           before draining!</li>
                        <li><strong>Low heat for the garlic.</strong> Burnt garlic is
                           bitter. If it starts turning dark, remove the pan from
                           heat and add the pasta immediately.</li>
                        <li><strong>Toss off the heat.</strong> Adding Parmesan over
                           high heat makes it clump. Remove from the burner first,
                           then toss.</li>
                    </ul>
                </div>
            </article>
        </div>
    </section>
</main>

Two Layout Patterns in One Page

This page demonstrates two distinct patterns:

graph TD subgraph "Pattern 1: Recipe Card Grid" A["recipe-card-grid
(Flexbox row, wraps)"] A1["Card 1
img + body"] A2["Card 2
img + body"] A3["Card 3
img + body"] A --- A1 A --- A2 A --- A3 end subgraph "Pattern 2: Detailed Recipe" B["recipe-layout
(Flexbox row, wraps)"] B1["recipe-image
(left)"] B2["recipe-info
(right: ingredients + instructions)"] B --- B1 B --- B2 end style A fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style B fill:#fef3c7,stroke:#f59e0b,stroke-width:2px,color:#1e293b style A1 fill:#f0fdf4,stroke:#22c55e,stroke-width:1px,color:#1e293b style A2 fill:#f0fdf4,stroke:#22c55e,stroke-width:1px,color:#1e293b style A3 fill:#f0fdf4,stroke:#22c55e,stroke-width:1px,color:#1e293b style B1 fill:#fdf2f8,stroke:#ec4899,stroke-width:1px,color:#1e293b style B2 fill:#fdf2f8,stroke:#ec4899,stroke-width:1px,color:#1e293b

Recipe card grid — similar to the homepage feature cards, but with images on top. Each card is an <article> because it's a self-contained, linkable piece of content.
Detailed recipe — image on the left, ingredients and instructions on the right. On mobile, everything stacks.

Recipe Page — CSS

/* ===========================
   Recipe Card Grid
   =========================== */
.recipe-grid-section {
    padding: var(--space-2xl) 0;
}

.recipe-card-grid {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
    justify-content: center;
}

.recipe-card {
    flex: 1 1 300px;
    max-width: 380px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-base),
                transform var(--transition-base);
}

.recipe-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.recipe-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.recipe-card-body {
    padding: var(--space-lg);
}

.recipe-card-body h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-xs);
}

.recipe-meta {
    color: var(--color-text-light);
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
}

.recipe-card-body p {
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

/* ===========================
   Detailed Recipe
   =========================== */
.recipe-detail {
    background-color: var(--color-bg-alt);
    padding: var(--space-2xl) 0;
}

.recipe-detail h2 {
    margin-bottom: var(--space-xs);
}

.recipe-layout {
    display: flex;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
    flex-wrap: wrap;
}

.recipe-image {
    flex: 1 1 300px;
}

.recipe-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    object-fit: cover;
}

.recipe-info {
    flex: 1 1 400px;
}

.ingredients {
    margin-bottom: var(--space-xl);
}

.ingredients h3,
.instructions h3 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.ingredients ul {
    list-style: none;
    padding: 0;
}

.ingredients li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}

.ingredients li:last-child {
    border-bottom: none;
}

.instructions ol {
    padding-left: var(--space-lg);
}

.instructions li {
    padding: var(--space-sm) 0;
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

/* Recipe Tips */
.recipe-tips {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-accent);
}

.recipe-tips h3 {
    margin-bottom: var(--space-md);
}

.recipe-tips li {
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

Notable Techniques

overflow: hidden on recipe cards clips the image to the card's rounded corners. Without it, the image corners poke out beyond the border-radius.
object-fit: cover with a fixed height: 200px on card images ensures all cards have identical image heights, even if the source images have different aspect ratios. The image is cropped to fill the space.
Border-left accent on the tips box (border-left: 4px solid var(--color-accent)) is a simple way to make a callout stand out without being as heavy as a full border or background change.

💡 `object-fit` Cheat Sheet

cover — fills the entire area, cropping if needed (best for cards and backgrounds)
contain — fits the entire image inside the area, may leave empty space
fill — stretches to fill (distorts the image — usually not what you want)
none — keeps original size, may overflow

Contact Page — HTML

The contact page gives visitors a way to reach you. A well-built contact form demonstrates form skills from Lesson 8 and introduces new CSS patterns for styling inputs and handling validation states.

<!-- contact.html — content between nav and footer -->

<main>
    <section class="page-header">
        <div class="container">
            <h1>Get in Touch</h1>
            <p class="page-subtitle">Questions, suggestions, or just want to say hello? I'd love to hear from you.</p>
        </div>
    </section>

    <section class="contact-section">
        <div class="container">
            <div class="contact-layout">

                <!-- Contact Form -->
                <form class="contact-form" action="#" method="POST">
                    <div class="form-group">
                        <label for="name">Name <span class="required">*</span></label>
                        <input type="text" id="name" name="name"
                               placeholder="Your name" required>
                    </div>

                    <div class="form-group">
                        <label for="email">Email <span class="required">*</span></label>
                        <input type="email" id="email" name="email"
                               placeholder="your@email.com" required>
                    </div>

                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <select id="subject" name="subject">
                            <option value="">Choose a topic...</option>
                            <option value="recipe">Recipe Question</option>
                            <option value="suggestion">Recipe Suggestion</option>
                            <option value="feedback">Site Feedback</option>
                            <option value="other">Other</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="message">Message <span class="required">*</span></label>
                        <textarea id="message" name="message" rows="6"
                                  placeholder="What's on your mind?" required></textarea>
                    </div>

                    <button type="submit" class="btn btn-primary">Send Message</button>
                </form>

                <!-- Contact Info Sidebar -->
                <aside class="contact-info">
                    <h2>Other Ways to Connect</h2>
                    <div class="info-card">
                        <h3>📧 Email</h3>
                        <p><a href="mailto:hello@tastybites.com">hello@tastybites.com</a></p>
                    </div>
                    <div class="info-card">
                        <h3>📱 Social Media</h3>
                        <ul class="social-links">
                            <li><a href="#">Instagram</a></li>
                            <li><a href="#">Pinterest</a></li>
                            <li><a href="#">YouTube</a></li>
                        </ul>
                    </div>
                    <div class="info-card">
                        <h3>⏰ Response Time</h3>
                        <p>I try to respond within 24–48 hours. If it's urgent, email is fastest.</p>
                    </div>
                </aside>

            </div>
        </div>
    </section>
</main>

Form Accessibility Checklist

Every form element in this example follows accessibility best practices:

Every input has a <label> — connected with matching for/id attributes. Clicking the label focuses the input.
Required fields are marked — the red asterisk and the required attribute. Visual + programmatic = accessible.
type="email" — triggers email validation and shows the correct keyboard on mobile.
Placeholder text — provides example input. But notice it's in addition to the label, not a replacement for it. Placeholders disappear when you type, so they're not a substitute for labels.

💡 Where Does the Form Data Go?

The action="#" means the form doesn't actually submit anywhere yet. For a static HTML site, you need a form backend service to receive submissions. Popular free options include:

Formspree (formspree.io) — free tier, no backend code needed
Netlify Forms — built in if you deploy on Netlify (which we will in Lesson 21)
Web3Forms (web3forms.com) — free, just add an access key

We'll connect the form to Netlify Forms in Lesson 21.

Contact Page — CSS

/* ===========================
   Contact Section
   =========================== */
.contact-section {
    padding: var(--space-2xl) 0;
}

.contact-layout {
    display: flex;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

/* ===========================
   Contact Form
   =========================== */
.contact-form {
    flex: 2 1 400px;
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.required {
    color: var(--color-error);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Validation states (CSS-only with :invalid and :valid) */
.form-group input:not(:placeholder-shown):invalid {
    border-color: var(--color-error);
}

.form-group input:not(:placeholder-shown):valid {
    border-color: var(--color-success);
}

/* ===========================
   Contact Info Sidebar
   =========================== */
.contact-info {
    flex: 1 1 250px;
}

.contact-info h2 {
    margin-bottom: var(--space-lg);
    font-size: 1.25rem;
}

.info-card {
    padding: var(--space-lg);
    background-color: var(--color-bg-alt);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
}

.info-card h3 {
    margin-bottom: var(--space-sm);
    font-size: 1rem;
}

.info-card p,
.info-card a {
    color: var(--color-text-light);
    line-height: 1.5;
}

.info-card a:hover {
    color: var(--color-primary);
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-links li {
    margin-bottom: var(--space-xs);
}

.social-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.social-links a:hover {
    text-decoration: underline;
}

The Focus Ring Technique

When a user clicks or tabs into an input field, the browser shows a focus indicator. The default one is often ugly or hard to see. Our approach:

Remove the default outline with outline: none
Replace it with a border-color change and a soft box-shadow glow

/* The glow effect */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);

The box-shadow with zero offset and blur but a spread of 3px creates a ring around the input. Using rgba() with 15% opacity makes it subtle — a soft blue halo that says "you're here" without shouting.

CSS-Only Validation Feedback

The selector input:not(:placeholder-shown):invalid targets inputs that are both invalid and have user-typed content. This prevents red borders on empty required fields before the user has done anything — a much better experience than showing errors immediately.

graph LR A["Field is empty
(placeholder shown)"] -->|"No border change"| B["Default gray border"] A -->|"User types"| C["Placeholder hidden"] C -->|":invalid"| D["Red border
(error)"] C -->|":valid"| E["Green border
(success)"] style A fill:#f1f5f9,stroke:#64748b,stroke-width:1px,color:#1e293b style B fill:#f1f5f9,stroke:#64748b,stroke-width:1px,color:#1e293b style D fill:#fef2f2,stroke:#ef4444,stroke-width:2px,color:#1e293b style E fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b

Highlighting the Active Page

Each page should show visitors where they are by highlighting the current page in the nav. In Lesson 17, the homepage nav had class="nav-link active" on the Home link. On each new page, move that active class to the correct link.

<!-- index.html -->
<li><a href="index.html" class="nav-link active">Home</a></li>
<li><a href="about.html" class="nav-link">About</a></li>

<!-- about.html -->
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="about.html" class="nav-link active">About</a></li>

<!-- recipe.html -->
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="recipe.html" class="nav-link active">Recipes</a></li>

<!-- contact.html -->
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="contact.html" class="nav-link active">Contact</a></li>

The CSS from Lesson 17 already handles the styling:

.nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
}

This is a small detail that makes a big difference in usability. Without it, visitors have to read the page title or URL to know where they are.

💡 Accessibility Bonus: `aria-current`

For even better accessibility, add aria-current="page" to the active link. Screen readers will announce "Home, current page" instead of just "Home":

<a href="index.html" class="nav-link active"
   aria-current="page">Home</a>

Hands-on Exercise

🏋️ Exercise: Build All Three Content Pages

Objective: Create complete About, Recipe, and Contact pages that share nav/footer with the homepage.

Requirements Checklist

All three pages have the same nav and footer as the homepage
The active class is on the correct nav link for each page
Each <title> is unique (e.g., "About - Tasty Bites")
About page — profile image + text, story section, interests grid
Recipe page — recipe card grid + one detailed recipe
Contact page — styled form with labels, required fields, and focus states
All pages responsive — test at 1200px, 768px, and 375px
All links work — click every nav link on every page to verify navigation

Stretch Goals (Optional)

Add a timeline to the About page (vertical line with milestones)
Add a recipe filter bar above the cards (just the UI — buttons for categories)
Add character count text below the message textarea (CSS-only using counter(), or simple JS)
Add a "Back to top" link at the bottom of each page

💡 Hint — Back to Top Link

<!-- At the top of your page (inside <body>) -->
<div id="top"></div>

<!-- Before the footer -->
<div class="back-to-top">
    <a href="#top">↑ Back to Top</a>
</div>

.back-to-top {
    text-align: center;
    padding: var(--space-xl) 0;
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

✅ Full Solution: Complete about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - Tasty Bites</title>
    <link rel="stylesheet" href="css/style.css">
    <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">
</head>
<body>

    <header class="site-header">
        <nav class="navbar">
            <div class="nav-container">
                <a href="index.html" class="nav-logo">🍴 Tasty Bites</a>
                <button class="nav-toggle" aria-label="Toggle navigation"
                        aria-expanded="false">☰</button>
                <ul class="nav-menu">
                    <li><a href="index.html" class="nav-link">Home</a></li>
                    <li><a href="about.html" class="nav-link active" aria-current="page">About</a></li>
                    <li><a href="recipe.html" class="nav-link">Recipes</a></li>
                    <li><a href="contact.html" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <main>
        <section class="page-header">
            <div class="container">
                <h1>About Me</h1>
                <p class="page-subtitle">The person behind the recipes.</p>
            </div>
        </section>

        <section class="profile">
            <div class="container">
                <div class="profile-content">
                    <div class="profile-image">
                        <img src="images/about-photo.jpg"
                             alt="A smiling person in a kitchen"
                             width="400" height="400">
                    </div>
                    <div class="profile-text">
                        <h2>Hi, I'm Alex!</h2>
                        <p>I'm a home cook who believes that great food doesn't
                           need to be complicated. What started as a quarantine
                           hobby turned into a genuine passion — and this site
                           is where I share what I've learned along the way.</p>
                        <p>My cooking philosophy is simple: use fresh ingredients,
                           don't skip the garlic, and always taste as you go.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="about-story">
            <div class="container">
                <h2>My Cooking Journey</h2>
                <p>I grew up watching my grandmother cook — no recipes,
                   no measuring cups, just instinct and decades of practice.
                   Three years and a lot of burnt garlic later, I can
                   confidently say I make a mean pasta and the best banana
                   bread my friends have ever tasted.</p>
            </div>
        </section>

        <section class="about-interests">
            <div class="container">
                <h2>When I'm Not Cooking</h2>
                <div class="interests-grid">
                    <div class="interest-item">
                        <span class="interest-icon">📚</span>
                        <h3>Reading</h3>
                        <p>Mostly cookbooks, but also sci-fi and history.</p>
                    </div>
                    <div class="interest-item">
                        <span class="interest-icon">🌱</span>
                        <h3>Gardening</h3>
                        <p>Growing herbs on my balcony.</p>
                    </div>
                    <div class="interest-item">
                        <span class="interest-icon">🎵</span>
                        <h3>Music</h3>
                        <p>Cooking with a good playlist is non-negotiable.</p>
                    </div>
                    <div class="interest-item">
                        <span class="interest-icon">✈️</span>
                        <h3>Travel</h3>
                        <p>Finding new flavors in every city.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-info">
                    <p class="footer-logo">🍴 Tasty Bites</p>
                    <p>Simple recipes, made with love.</p>
                </div>
                <nav class="footer-nav" aria-label="Footer navigation">
                    <h4>Pages</h4>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="recipe.html">Recipes</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Tasty Bites. All rights reserved.</p>
            </div>
        </div>
    </footer>

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

🎯 Quick Quiz

Question 1: Why do we copy-paste the nav and footer into every page instead of using a template?

Question 2: What does object-fit: cover do on recipe card images?

Question 3: Why does input:not(:placeholder-shown):invalid work better than just input:invalid?

Question 4: What's the optimal line length for comfortable reading?

Question 5: Why do we use <article> for recipe cards?

Summary

🎉 Key Takeaways

Reuse nav and footer by copying from the homepage — update the active class and <title> for each page
The page header pattern (.page-header) replaces the hero section on content pages — simpler, consistent
Profile layouts use Flexbox with border-radius: 50% for circular images and aspect-ratio: 1 / 1 to keep them square
Recipe cards use overflow: hidden to clip images to rounded corners and object-fit: cover for consistent image heights
Styled forms need explicit labels (not just placeholders), focus rings (box-shadow glow), and smart validation (:not(:placeholder-shown):invalid)
Every input needs a label connected with matching for/id attributes
Use aria-current="page" on the active nav link for screen reader accessibility
Constrain reading width to 45–75 characters per line for comfortable reading
Form submissions on static sites need a backend service — Formspree, Netlify Forms, or Web3Forms

📁 Your Project After This Lesson

my-website/
├── css/
│   └── style.css      ← + page-header, profile, recipe, contact, form styles
├── images/
│   ├── about-photo.jpg
│   ├── recipe-pasta.jpg
│   ├── recipe-salad.jpg
│   └── recipe-soup.jpg
├── js/
│   └── script.js      ← mobile menu toggle (works on all pages)
├── index.html         ← ✅ Homepage
├── about.html         ← ✅ About page (NEW)
├── recipe.html        ← ✅ Recipe page (NEW)
└── contact.html       ← ✅ Contact page (NEW)

All four pages share:
✅ Same navigation bar (with correct active link)
✅ Same footer
✅ Same stylesheet
✅ Same mobile menu script
✅ Responsive at all widths

🚀 What's Next?

Your site is functional — four complete, responsive pages with working navigation. But there's a difference between functional and polished. In the next lesson — Lesson 19: Adding Polish — you'll add the finishing touches: smooth transitions, scroll animations, a dark mode toggle, custom scrollbar styling, loading states, and all the small details that make a site feel professional.

📄 Lesson 18: Building Content Pages

🎯 Learning Objectives

📑 In This Lesson

Reusing Shared Components

The Multi-Page Workflow

💡 The Duplication Trade-off

About Page — HTML

Structure Breakdown

About Page — CSS

Key Decisions

💡 Optimal Line Length for Reading

Recipe Page — HTML

Two Layout Patterns in One Page

Recipe Page — CSS

Notable Techniques

💡 `object-fit` Cheat Sheet

Contact Page — HTML

Form Accessibility Checklist

💡 Where Does the Form Data Go?

Contact Page — CSS

The Focus Ring Technique

CSS-Only Validation Feedback

Highlighting the Active Page

💡 Accessibility Bonus: `aria-current`

Hands-on Exercise

🏋️ Exercise: Build All Three Content Pages

Requirements Checklist

Stretch Goals (Optional)

🎯 Quick Quiz

Summary

🎉 Key Takeaways

📁 Your Project After This Lesson

🚀 What's Next?

📑 In This Lesson

Reusing Shared Components

The Multi-Page Workflow

💡 The Duplication Trade-off

About Page — HTML

Structure Breakdown

About Page — CSS

Key Decisions

💡 Optimal Line Length for Reading

Recipe Page — HTML

Two Layout Patterns in One Page

Recipe Page — CSS

Notable Techniques

💡 object-fit Cheat Sheet

Contact Page — HTML

Form Accessibility Checklist

💡 Where Does the Form Data Go?

Contact Page — CSS

The Focus Ring Technique

CSS-Only Validation Feedback

Highlighting the Active Page

💡 Accessibility Bonus: aria-current

Hands-on Exercise

🏋️ Exercise: Build All Three Content Pages

Requirements Checklist

Stretch Goals (Optional)

🎯 Quick Quiz

Summary

🎉 Key Takeaways

📁 Your Project After This Lesson

🚀 What's Next?

💡 `object-fit` Cheat Sheet

💡 Accessibility Bonus: `aria-current`