Hero Sections

What This Teaches

A hero section is the first major section of a page. It should quickly communicate what the page is about, why it matters, and what the visitor can do next.

This lesson teaches how to plan and build a responsive hero section with clear content, a meaningful visual, and a strong call to action.

You will focus on structure, hierarchy, responsive layout, accessibility, and performance.

Above the Fold, Without Cramming

The fold is the part of a page visible before scrolling. It matters because it shapes the first impression, but it is not a fixed pixel line.

The first viewport should establish purpose and direction. It is okay if the next section is partially visible, and it is usually better than cramming everything into one screen.

Mobile screens, browser chrome, zoom settings, and device sizes all change where the fold appears.

Hero Section Anatomy

Designing the First Viewport

• Make the headline specific. Avoid vague lines like "Welcome to my website."
• Keep supporting copy short enough to scan.
• Make the primary CTA visually obvious.
• Leave enough space around text so the hero does not feel cramped.
• Let the next section peek into view when possible so the page invites scrolling.

CTA Guidance

A CTA, or call to action, should say what happens next. For navigation actions, use an a element instead of a button.

Mobile-First Hero HTML

Start with semantic HTML. Keep important text as real text, not baked into an image.

<section class="hero">
  <div class="hero__content">
    <p class="hero__eyebrow">Portfolio</p>
    <h1>Designing useful websites for local creative businesses</h1>
    <p>
      I build responsive sites that pair clear content with thoughtful visual design.
    </p>
    <a class="button" href="#projects">View Projects</a>
  </div>

  <img
    class="hero__image"
    src="studio-work.jpg"
    alt="Laptop showing a portfolio website layout on a desk"
  >
</section>

Mobile-First Hero CSS

The base styles work for small screens first. The larger-screen media query adds the two-column layout.

.hero {
  display: grid;
  gap: 2rem;
  padding-block: 4rem;
  padding-inline: 1rem;
}

.hero__content {
  max-width: 42rem;
}

.hero__image {
  border-radius: 8px;
  height: auto;
  width: 100%;
}

@media (min-width: 768px) {
  .hero {
    align-items: center;
    grid-template-columns: 1fr 1fr;
    padding-block: 6rem;
  }
}

Hero Layout Patterns

Responsive Typography

Hero headlines can be larger than body text, but they still need controlled line length and readable wrapping.

.hero h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  max-width: 12ch;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 4rem;
  }
}

Hero Images and Backgrounds

Choose media based on meaning. If the image communicates important content, use an img element with useful alt text.

If the image is purely decorative, a CSS background-image can be appropriate.

• Do not put important words inside an image.
• Do not rely on a background image if the user needs to understand the image content.
• Check text contrast when text sits over an image.
• Avoid distorted images by using width: 100%, height: auto, or object-fit: cover when cropping is intentional.

Accessibility Checklist

• Use one clear h1 for the page topic.
• Use descriptive CTA text, not "Click here."
• Use a real link for navigation CTAs and a real button for actions that happen on the page.
• Write meaningful alt text for meaningful images.
• Keep text contrast readable over images and color backgrounds.
• Do not rely only on motion, video, or color to communicate meaning.
• Provide captions or transcripts when video content is meaningful.

Performance Checklist

• Compress hero images before adding them to the site.
• Use image dimensions close to the size needed in the layout.
• Consider modern formats like WebP.
• Avoid enormous images that slow down the first page load.
• Do not lazy-load the primary above-the-fold hero image if it is important to the first render.
• Avoid autoplaying heavy video unless it is essential and optimized.

Study Real Hero Sections

When studying real examples, do not just copy the look. Ask what the hero is doing.

• What is the page about?
• What is the main visual signal?
• What is the primary CTA?
• What changes between mobile and desktop?
• Is the text readable over the image or background?
• Does the first viewport invite scrolling?

Common Mistakes

Code Challenge: Build Your Own Responsive Hero Section

Create a hero section for a fictional website or your own portfolio. Include a headline, supporting text, a primary CTA, and a meaningful visual.

Build mobile-first, then add a larger-screen layout with @media (min-width: ...).