Build a Simple Landing Page with HTML & CSS

Want to showcase your idea or product online? A clean landing page is the best place to start. In this MiniCoursey quick guide, you’ll learn how to build a simple, mobile-friendly landing page using just HTML and CSS — no frameworks, no headaches.

What is a Landing Page?

A landing page is a single web page with one clear goal — often to capture leads, showcase an offer, or share key info. Clean code and a simple structure make it effective and easy to build.

Plan Your Layout

Before you write code, sketch the basic structure:

Header: logo or site name
Hero Section: headline, subheadline, call to action
Features Section: brief points or benefits
Footer: contact or copyright info

Basic HTML Structure

Start with your base HTML skeleton.


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Landing Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>My Product</h1>
    </header>

    <section class="hero">
      <h2>Welcome to My Landing Page</h2>
      <p>Short description here.</p>
      <a href="#" class="btn">Get Started</a>
    </section>

    <section class="features">
      <h3>Features</h3>
      <ul>
        <li>Easy to use</li>
        <li>Responsive design</li>
        <li>Fast loading</li>
      </ul>
    </section>

    <footer>
      <p>© 2025 My Product</p>
    </footer>
  </body>
</html>

Add Basic CSS

Style your page with simple CSS.


body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

header {
  background: #007acc;
  color: #fff;
  padding: 20px 0;
}

.hero {
  padding: 40px 20px;
}

.btn {
  display: inline-block;
  background: #007acc;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

💡 Pro Tip: Use max-width and margin: auto in CSS to keep content centered and readable on all screen sizes.

⚠️ Common Mistake: Don’t forget to link your CSS file in the <head>! If your styles don’t show, check the file path.

FAQ

Q: Can I make this page responsive?
A: Yes! Use media queries in CSS to adjust styles for different screen sizes.

Q: Do I need JavaScript?
A: For a simple static page, no. But for forms or dynamic actions, JS helps.

Where to Learn More

Practice by adding images, custom fonts, or buttons. Explore MDN Web Docs or CodePen to test your code live.

Conclusion

Awesome — you just built a working landing page with pure HTML and CSS! Customize it, share it, and build on it.

✨ Bookmark MiniCoursey for more quick & free mini courses!