Skip to content

Simple Landing Page

Easy~25 min

What you'll build

A `landing.html` file linked to a `landing.css` file. The page has a centered hero block with a big heading, a one-line subtitle, a styled button, and a footer with a copyright line.

Goals

  • Link an external CSS file to an HTML document
  • Use CSS to center content and set font sizes
  • Style a button-like anchor with padding, color, and border-radius
  • Add a footer that sits at the bottom of the content

Prerequisites

  • HTML structure (head, body, headings, paragraphs)
  • Familiarity with CSS selectors and a few properties (color, font-size, padding)

Steps

  2. 1

    Write the HTML structure

    Create landing.html with a hero section containing an h1, a p subtitle, and an a button. Add a footer below. Link the stylesheet in the head.

    Code
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Simple Landing</title>
    <link rel="stylesheet" href="landing.css">
  </head>
  <body>
    <section class="hero">
      <h1>Build something small today</h1>
      <p>A 10-minute landing page for your first idea.</p>
      <a href="#" class="btn">Get started</a>
    </section>
    <footer>© 2026 My First Page</footer>
  </body>
</html>

    Expected result

    The page shows the heading, subtitle, link, and footer with default browser styling.

  4. 2

    Reset and center the hero

    Create landing.css. Reset body margin, set a font family, and use flexbox on body to center the hero section both horizontally and vertically. Flexbox is the simplest way to center in CSS.

    Code
    body {
  margin: 0;
  font-family: system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

    Expected result

    The hero block is now centered in the viewport with a light gray background.

  6. 3

    Style the hero text

    Add a .hero rule that centers text and adds spacing. Then style the h1 and subtitle with a clear size hierarchy — the heading should be visibly larger than the subtitle.

    Code
    .hero { text-align: center; }
.hero h1 { font-size: 2.5rem; color: #0f172a; }
.hero p { font-size: 1.125rem; color: #475569; }

    Expected result

    The heading is large and dark, the subtitle is smaller and gray, both centered.

  8. 4

    Make the button look clickable

    Style .btn as a button: padding, a solid background, white text, no underline, and rounded corners. Add a hover state that darkens the background so it feels interactive.

    Code
    .btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  border-radius: 0.5rem;
}
.btn:hover { background: #1d4ed8; }

    Expected result

    The link now looks like a blue button and darkens on hover.

  10. 5

    Style the footer

    Add a footer rule with small text, muted color, and top margin so it sits below the hero without overlapping. A footer should always feel distinct from the main content.

    Code
    footer {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: #94a3b8;
}

    Expected result

    A small, gray copyright line appears below the hero block.

Try it yourself

What you learned

You linked CSS to HTML, used flexbox to center content, built a visual hierarchy with font sizes and colors, and turned a plain link into a button — the core ingredients of every landing page.

Related Resources

Related Lessons

  • CSS

    Flexbox centering used in the hero section.

  • CSS

    Class selectors like .hero and .btn used here.

Related Practice

Related Tools

  • Color Tool

    Pick and convert the hex colors used in your button and text.

Related Cheatsheets

Related Reference

Related Errors

Related Glossary

  • CSS

    Cascading Style Sheets.

  • Selector

    CSS selector patterns.

  • HTML

    HyperText Markup Language.

Related Glossary

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

  • CSS

    Cascading Style Sheets.

  • Selector

    CSS selector patterns.

  • HTML

    HyperText Markup Language.

Related Errors

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

← Back to topic