10 Multimedia · 2026
Week 8 · Lesson 15

Hero, Navigation, About Me

Week 8 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-3IND5-5IND5-6

Learning intentions

  • I can build a portfolio hero section with headline and image.
  • I can build sticky navigation that works on mobile.
  • I can write a compelling About Me section.

Success criteria

  • My portfolio home page has a hero with my name, headline, and CTA.
  • My nav is sticky (stays visible when scrolling) or collapses on mobile.
  • My about section is 2-3 paragraphs that tell readers who I am.

Do Now · 5 min

First impressions are made in 2 seconds. Open 3 portfolios from Awwwards. What did you see in the first 2 seconds on each? What made you want to scroll?

I Do · ~10 min Teacher demonstration

Teacher builds a hero section with proper structure:

<header class="site-header">
  <a href="#" class="site-brand">Yunshu Gao</a>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<section class="hero">
  <h1>Hi, I'm Yunshu.</h1>
  <p class="tagline">Year 10 student and aspiring UX designer, Sydney.</p>
  <a href="#projects" class="btn">See my work</a>
</section>
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 100;
}

.hero {
  padding: 6rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #1f3a68, #2e5b9e);
  color: white;
}

.hero h1 { font-size: clamp(2rem, 5vw, 4rem); }

We Do · ~15 min Guided build

Write together a good About Me section. Not a CV. Not boring.

Good about-me structure:
  1. One-line who/what: "I'm a Year 10 student at Arthur Phillip HS interested in game design."
  2. What you care about: "I love puzzle games that teach you something."
  3. What you've done or are doing: "I've built 2 games in Unity and I'm learning web design this term."
  4. What's next: "Planning to continue with Design and Technology in Year 11."

You Do · ~35 min Independent practice

Build your portfolio home page hero + nav + about section:

  1. Create index.html for your portfolio
  2. Build sticky header with your name + nav
  3. Build hero section with h1, tagline, and CTA button
  4. Below hero, add an "About" section with 2-3 paragraphs and a profile photo
  5. Apply your palette from L12 and fonts from L11
  6. Test on phone in DevTools — is nav usable?

Differentiation

Support

Provided HTML + CSS hero template. Student swaps in own name, tagline, and photo.

Core

Build from scratch using L7-L14 skills.

Extension

Add a JavaScript-free mobile hamburger menu using the :target pseudo-class. Research on MDN.

Exit Ticket · 5 min

Exit ticket

Share a screenshot of your hero section on Classroom.

Write your one-line tagline here:

____________________________________________________

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.