Build a Responsive Landing Page with HTML and CSS (Beginner Guide)

If you are starting web development, building a landing page is one of the best first projects. In this tutorial you will create a simple, responsive page with a header, hero section, features and footer using only HTML and CSS. No frameworks needed.

What you will build

A one-page site that looks good on both mobile and desktop.

Prerequisites

• A code editor (VS Code is a good choice)
• A browser
• Basic knowledge of HTML tags

Step 1: Create the HTML structure

Create a file called 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 Landing Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="header">
    <h2 class="logo">MyBrand</h2>
    <nav>
      <a href="#features">Features</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <section class="hero">
    <h1>Learn. Build. Launch.</h1>
    <p>A simple landing page built with HTML and CSS.</p>
    <a href="#features" class="btn">Get Started</a>
  </section>

  <section class="features" id="features">
    <div class="card">
      <h3>Fast</h3>
      <p>Lightweight and quick to load.</p>
    </div>
    <div class="card">
      <h3>Responsive</h3>
      <p>Looks great on every screen.</p>
    </div>
    <div class="card">
      <h3>Simple</h3>
      <p>Clean code that is easy to edit.</p>
    </div>
  </section>

  <footer class="footer" id="contact">
    <p>&copy; 2026 MyBrand. All rights reserved.</p>
  </footer>

</body>
</html>
~~~

The `viewport` meta tag is important. Without it, your page will not scale properly on phones.

## Step 2: Add the base CSS

Create `style.css`:

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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222;
}

a {
  text-decoration: none;
}
~~~

The `box-sizing: border-box` rule makes width calculations much easier to manage.

## Step 3: Style the header and hero

~~~css
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background: #111;
  color: #fff;
}

.header nav a {
  color: #fff;
  margin-left: 20px;
}

.hero {
  text-align: center;
  padding: 100px 20px;
  background: #f4f6ff;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  background: #4f46e5;
  color: #fff;
  border-radius: 6px;
}
~~~

`display: flex` with `justify-content: space-between` puts the logo on the left and the links on the right.

## Step 4: Create the feature cards with Flexbox

~~~css
.features {
  display: flex;
  gap: 20px;
  padding: 60px 40px;
}

.card {
  flex: 1;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.footer {
  text-align: center;
  padding: 20px;
  background: #111;
  color: #fff;
}
~~~

`flex: 1` makes all three cards share the space equally.

## Step 5: Make it responsive

Add a media query at the bottom of `style.css`:

~~~css
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 10px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .features {
    flex-direction: column;
    padding: 40px 20px;
  }
}
~~~

On screens 768px wide or smaller, the cards stack vertically and the header centers itself.

## Test it

Open `index.html` in your browser, then resize the window or use DevTools (press `F12`, then the device toolbar icon) to preview mobile sizes.

## Common mistakes to avoid

- Forgetting the viewport meta tag
- Using fixed pixel widths instead of flexible units like `%` or `rem`
- Not testing on a real phone
- Skipping semantic tags like `header`, `section` and `footer`

## Challenge: take it further

- Add a contact form
- Add a sticky navigation bar
- Replace Flexbox with CSS Grid for the cards
- Deploy it free with GitHub Pages

## Wrapping up

You now have a responsive landing page and a solid grasp of Flexbox and media queries. Keep building small projects like this and commit them to GitHub as your portfolio.

*I'm part of the team at [99eedu](https://99eedu.com), an IT training institute in Dum Dum, Kolkata, where students practice HTML, CSS, JavaScript, WordPress and React through hands-on projects. Questions? Drop them in the comments.*