General Assembly logo

Lab 6: Building a Multi-Section Layout

Introduction

In previous labs, you explored basic page structure using semantic HTML and simple, single-column layouts. In this lab, you’ll build on that with a multi-section homepage layout using Flexbox and CSS Grid. You’ll design a flexible header, a hero section, a three-column content area, and a responsive footer.

A key part of this lab is learning how to use AI-driven visual debugging: you’ll use an AI assistant to help you inspect spacing, alignment, and responsiveness issues, then refine your layout accordingly. This mirrors modern professional workflows where developers collaborate with AI tools to accelerate layout iteration.

Learning Objectives

By the end of this lab, you will be able to:

  • Build a multi-section homepage layout using semantic HTML
  • Use Flexbox to align header/navigation content horizontally
  • Use CSS Grid to create structured, responsive content sections
  • Apply responsive breakpoints using media queries
  • Use AI to visualize layout issues, inspect spacing/alignment problems, and iteratively refine your layout
  • Troubleshoot common layout pitfalls (overflow, inconsistent spacing, grid misalignment)

Getting Started

Prerequisites

Before beginning the lab, make sure you have:

  • Basic understanding of HTML elements and semantic structure
  • Introductory experience with Flexbox (justify-content, align-items, flex-direction)
  • Introductory knowledge of CSS Grid (grid-template-columns, gap)
  • A code editor (VS Code recommended)
  • A live preview environment (VS Code Live Server, or your browser's file:// viewer)

Files Provided in This Lab

You will work with:

  • index.html — starter HTML page
  • styles.css — stylesheet with initial structure
  • assets/ — optional placeholder images

Exercise Overview

You will construct a homepage layout consisting of:

  1. Header (Flexbox)
  2. Hero Section (Flexbox or Grid)
  3. Three-Column Content Grid
  4. Footer (Flexbox)
  5. Responsive Improvements
  6. AI-Assisted Debugging

Your main goal is to produce a clean, modular layout that adapts gracefully to different screen sizes.

How to Work Through the Lab

  1. Follow exercises in order - each step builds on the previous.
  2. Preview frequently - open the page in your browser to see changes.
  3. Use AI to debug - when asked, paste your HTML/CSS into an AI model and request visual/spacing feedback.
  4. Refine - adjust based on feedback until the layout is clean and aligned.

Lab Exercises

Exercise 1: Create the Basic Page Structure (5 min)

Open index.html and complete the semantic structure.

Goal

Create container sections for the layout:

  • Header with logo + navigation
  • Hero section with heading + description
  • 3-column features section
  • Footer

Add the following skeleton:

<header>
  <div class="logo">MySite</div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="hero">
  <h1>Welcome to MySite</h1>
  <p>Your modern web layout begins here.</p>
</section>

<section class="features">
  <div class="feature-card">Feature One</div>
  <div class="feature-card">Feature Two</div>
  <div class="feature-card">Feature Three</div>
</section>

<footer>© 2025 MySite</footer>

No styling yet — this is only structure.

Exercise 2 - Build the Header Using Flexbox

Open styles.css. Add Flexbox layout to the header.

  • Set display: flex
  • Align logo left and nav right
  • Space elements evenly
  • Remove default list styling

Example guidance:

header {
  display: flex; /* TODO */
  justify-content: space-between; /* TODO */
  align-items: center; /* TODO */
  padding: 1rem 2rem;
}

nav ul {
  display: flex; /* TODO */
  gap: 1rem;     /* TODO */
  list-style: none; /* TODO */
}

nav a {
  text-decoration: none;
  font-weight: 500;
}

Preview in your browser. You should see a horizontal header.

Exercise 3 - Create a Hero Section Layout

You can use either Flexbox or Grid.

Goal

Center the hero content vertically and horizontally with generous spacing.

.hero {
  display: flex; /* TODO */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

Add a background color or light gradient (optional).

Exercise 4 - Build a Three-Column Content Grid

Use CSS Grid to create a 3-column layout on desktop, collapsing to 1 column on mobile.

.features {
  display: grid; /* TODO */
  grid-template-columns: repeat(3, 1fr); /* TODO */
  gap: 1.5rem; /* TODO */
  padding: 2rem;
}

.feature-card {
  background: #f3f3f3;
  padding: 2rem;
  border-radius: 8px;
}

Add a responsive breakpoint

@media (max-width: 700px) {
  .features {
    grid-template-columns: 1fr; /* TODO */
  }
}

Preview on desktop + mobile sized browser.

Exercise 5 - Footer Alignment with Flexbox

footer {
  display: flex; /* TODO */
  justify-content: center; /* TODO */
  padding: 1rem;
  background: #eee;
}

Exercise 6 - AI-Assisted Layout Debugging

This step is essential.

Instructions

  1. Copy your full index.html + styles.css.

  2. Paste them into an AI assistant (e.g., ChatGPT).

  3. Ask: “Please visually analyze this layout. Identify spacing, alignment, or responsiveness issues, and describe how to fix them.”

  4. Based on the AI’s feedback:

    • Adjust margins/padding
    • Tweak Flexbox alignment
    • Tune Grid gaps
    • Adjust breakpoints

  5. Preview again to confirm improvements.

Reflection Questions

Answer briefly in your notes:

  1. What spacing or alignment issues did the AI identify?
  2. Which parts of the layout were easiest to fix?
  3. How did Grid and Flexbox complement each other in this layout?
  4. What additional responsive improvements would you try next?

Tips for Success

  • Use the browser dev tools to inspect sizing and alignment.
  • Add borders temporarily (border: 1px solid red;) when debugging layout issues.
  • Flexbox is best for one-dimensional alignment; Grid is best for two-dimensional structure.
  • AI is especially good at spotting subtle inconsistencies in spacing or responsiveness.

What to Expect

By the end of this lab:

  • Your header should align horizontally with evenly spaced nav items.
  • Your hero section should be centered and visually balanced.
  • Your features section should be a responsive 3-column Grid.
  • Your layout should collapse gracefully on mobile.
  • AI-assisted debugging should improve polish and consistency.