AFA Web Dev 101

Modules

Tools & Resources

Courses

HTML Guide – Week 10 – Tool 4

HTML & CSS Guided Workshop

This page is your live instructor guide. Students should follow each step in their editor and browser.

1. Setup & File Structure

Create a folder named my-site/.
Inside it, create index.html and styles.css.
Open index.html in your editor and browser.

2. HTML Boilerplate

Type this into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Site</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- content goes here -->
</body>
</html>

Explain as you type: <!DOCTYPE>, <html lang>, <head> vs <body>.

3. Building the Layout

We’ll scaffold four sections: Header, Hero, Features, Footer.

A. Header

<header>
  <h1>My Awesome Site</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

B. Hero Section

<section class="hero">
  <h2>Welcome to the journey</h2>
  <p>Start here, learn web fundamentals.</p>
  <button>Get Started</button>
</section>

C. Features Grid

<section class="features">
  <div class="feature">
    <h3>Speed</h3>
    <p>Blazing fast performance.</p>
  </div>
  <div class="feature">
    <h3>Flexibility</h3>
    <p>Works on all devices.</p>
  </div>
  <div class="feature">
    <h3>Style</h3>
    <p>Fully customizable.</p>
  </div>
</section>

D. Footer

<footer>
  <p>© 2025 My Awesome Site</p>
</footer>

4. CSS Styling

In styles.css, add these blocks:

A. Global Reset & Base

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
}

B. Header Styles

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #f4f4f4;
}

nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: #333;
}

C. Hero Styles

.hero {
  text-align: center;
  padding: 4rem 2rem;
  background: #e2e8f0;
}

.hero h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.hero button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}

D. Features Grid

.features {
  display: flex;
  justify-content: space-around;
  padding: 2rem;
}

.feature {
  flex: 1;
  margin: 0 1rem;
  text-align: center;
}

E. Footer Styling

footer {
  text-align: center;
  padding: 1rem;
  background: #f4f4f4;
  font-size: 0.9rem;
}

5. Live Testing & Tinkering

Change colors, fonts, padding.
Add a new nav link or feature card.
Tweak button text or hero copy.

6. “What’s Missing?” Teaser

Notice the “Get Started” button is static. Next time, we’ll use JavaScript to:

Listen for button clicks.
Update the UI dynamically.
Fetch and display live data.

Get ready to bring this page to life!

American Film Academy

Equipping filmmakers of tomorrow, today