General Assembly logo

Lab 7: Designing for Every Device

Introduction

In this lab, you will design and build a responsive landing page that adapts smoothly across desktop, tablet, and mobile devices. You’ll use semantic HTML, modern CSS layout techniques (Flexbox and CSS Grid), and media queries to create a fluid, visually balanced layout.

Once your base layout is working, you'll use AI as a design collaborator - providing it with your code and prompting it to suggest improvements for spacing, typography, visual hierarchy, responsiveness, and overall layout fluidity.

Learning Objectives

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

  • Build a responsive landing page layout using semantic HTML
  • Apply Flexbox and CSS Grid for layout structure
  • Use media queries to adapt layout between desktop, tablet, and mobile
  • Understand the concept of breakpoints and fluid scaling
  • Use AI to refine spacing, typography, and visual balance
  • Evaluate and apply AI-generated improvements safely and effectively
  • Iterate quickly on UI design using a feedback loop

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

  • Basic understanding of HTML and CSS
  • Familiarity with Flexbox or CSS Grid (at least one)
  • A code editor (VS Code recommended)
  • A browser with dev tools (Chrome, Firefox, or Safari)

Setup Instructions

  1. Create a new folder:

    mkdir lab7_responsive_landing
cd lab7_responsive_landing

  2. Create the starter files:

    • index.html
    • styles.css

  3. Open the folder in VS Code:

    code .

  4. Open index.html in a browser and keep DevTools open.

Lab Structure

This lab contains the following files:

  • README.md — Lab instructions (this document)
  • index.html — Main HTML structure (you will write)
  • styles.css — Base and responsive styling (you will write)

Exercise Overview

You will build a responsive landing page composed of:

  • A header with navigation
  • A hero section with a headline, subheadline, and call-to-action
  • A features section with 3 cards
  • A simple footer

You will:

  1. Build the base layout (desktop-first or mobile-first—your choice)
  2. Add media queries to adapt the layout at 768px and 480px
  3. Test your design using browser DevTools device emulation
  4. Provide your code to an AI tool and ask for improvement suggestions
  5. Apply at least 3 AI-generated layout refinements

How to Work Through the Lab

  1. Review the design goal - A clean, responsive landing page with readable spacing and good visual balance.

  2. Implement the base structure - Build all HTML and desktop layout first.

  3. Add responsiveness - Use media queries for tablet and mobile.

  4. Test breakpoints - Use DevTools “Responsive Design Mode.”

  5. Use AI to refine your layout - Share your code and ask:

    • “How can I improve visual balance?”
    • “What spacing or typography improvements would you recommend?”
    • “Which parts of my CSS can be simplified?”

  6. Apply refinements - Integrate at least 3 suggestions.

  7. Complete reflection questions - Build design awareness.

  8. Check your work - Compare responsiveness across devices.

Step-by-Step Exercises

Exercise 1 - Build the Base HTML

Create the primary page sections:

  • <header>
  • <nav>
  • <main>
  • <section class="hero">
  • <section class="features">
  • <footer>

Include:

  • A headline and supporting text
  • A button CTA
  • Three feature cards (title, icon/emoji, paragraph)

Tasks:

  • Add semantic tags
  • Add alt text for images (if using any)
  • Use meaningful class names

Exercise 2 — Desktop Layout Using Flexbox or Grid (10 minutes)

Open styles.css and:

  1. Set up root typography and spacing
  2. Style the header with horizontal nav
  3. Create a two-column hero layout
  4. Create a 3-column feature grid

Tasks:

  • Use display: flex or display: grid
  • Add spacing using gap, padding, and margin
  • Set a max-width (e.g., 1200px) and center the content

Exercise 3 - Mobile & Tablet Breakpoints

Add media queries:

@media (max-width: 768px) { /* Tablet styles */ }
@media (max-width: 480px) { /* Mobile styles */ }

Adjust:

  • Navigation → stacked or hamburger placeholder
  • Hero section → single column
  • Features → one or two columns
  • Typography scaling → use clamp() or smaller font-size

Tasks:

  • Test at multiple widths
  • Ensure no horizontal scrolling
  • Improve tap targets on mobile

Exercise 4 - Test in Device Emulation

In DevTools:

  • Switch between iPhone, iPad, and desktop
  • Check that all interactive elements are comfortably sized
  • Validate readability and spacing

Exercise 5 - AI-Assisted Layout Refinement

Copy and paste your full index.html and styles.css into the AI tool.

Ask:

  • “How can I improve the visual balance and spacing of this layout?”
  • “Suggest improvements to make this landing page feel more modern and fluid.”
  • “Where can CSS be simplified or made more responsive?”

Pick 3–5 suggestions and apply them.

Common improvements include:

  • Adjust line heights and font scaling
  • Improve spacing rhythm using consistent scale
  • Reduce unnecessary fixed widths
  • Use fluid units: rem, %, minmax(), clamp()
  • Improve color contrast or hover states

Reflection Questions

Answer these at the bottom of your README or in comments:

  1. What was the biggest change you needed to make for mobile friendliness?
  2. Which AI suggestion improved your layout the most?
  3. What would be the next level of responsiveness (dark mode, prefers-reduced-motion, etc.)?

Tips for Success

  • Start mobile-first if you're comfortable—it simplifies media queries.
  • Use gap generously; whitespace improves perceived quality.
  • Avoid pixel perfection—responsiveness is about flexibility.
  • Trust DevTools more than your eyes at one screen size.
  • AI suggestions are starting points—evaluate before applying.

Common Issues and Troubleshooting

Issue: Layout breaks at intermediate widths Solution: Use fluid units like max-width, auto, %, minmax().

Issue: Images overflow on mobile Solution: Add:

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

Issue: Sections look cramped on small screens Solution: Increase vertical padding at mobile breakpoints.

Issue: Navigation wraps strangely Solution: Switch to column layout earlier (e.g., at 900px).

Expected Results

By the end of the lab, your landing page should:

  • Look clean and balanced on a 1440px desktop display
  • Adapt to a 768px tablet with simplified layout
  • Stack content effectively on a 375px phone
  • Have fluid spacing and typography
  • Reflect improvements proposed by AI refinement

Lab Workflow Summary

  1. Build semantic HTML structure
  2. Style desktop layout using Flexbox/Grid
  3. Add responsive breakpoints
  4. Test layout in different device sizes
  5. Use AI to refine layout
  6. Apply improvements
  7. Complete reflection questions