Beginner Projects

Beginner Web Development Project: Build a Simple Responsive Landing Page

Build Your First Portfolio (HTML & CSS)

By Guru99
5 Min Read

Introduction

If you’re just starting with web development, building a real project is the fastest way to learn. In this beginner-friendly tutorial, you’ll create a simple, modern, responsive landing page using only HTML and CSS. No JavaScript. No frameworks.

Contents

By the end of this post, you’ll understand page structure, layout, responsiveness, and basic UI styling — skills you’ll reuse in every future project.

What You’ll Build

A clean landing page with:

  • Header with logo and navigation
  • Hero section with headline and call-to-action
  • Features section (3 cards)
  • Footer
  • Fully responsive for mobile, tablet, and desktop

Skill level: Beginner

Tools You Need

  • Any code editor (VS Code recommended)
  • A modern browser (Chrome, Firefox)
  • Basic HTML & CSS knowledge

Project Folder Structure

landing-page/
│── index.html
│── style.css
│── images/
│   └── hero.png

Step 1: Create the HTML Structure

Create a file named index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Landing Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<header class="header">
  <div class="container">
    <h1 class="logo">EncodeByte</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Features</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</header>

<section class="hero">
  <div class="container hero-content">
    <div class="hero-text">
      <h2>Build Better Websites</h2>
      <p>Learn practical web development with simple tutorials and real projects.</p>
      <a href="#" class="btn">Get Started</a>
    </div>
    <div class="hero-image">
      <img src="images/hero.png" alt="Landing page illustration">
    </div>
  </div>
</section>

<section class="features">
  <div class="container">
    <div class="feature-card">
      <h3>Beginner Friendly</h3>
      <p>Easy-to-follow tutorials designed for beginners.</p>
    </div>
    <div class="feature-card">
      <h3>Real Projects</h3>
      <p>Build real-world layouts you can reuse.</p>
    </div>
    <div class="feature-card">
      <h3>Clean Code</h3>
      <p>Understand proper structure and styling.</p>
    </div>
  </div>
</section>

<footer class="footer">
  <p>© 2026 EncodeByte. All rights reserved.</p>
</footer>

</body>
</html>

Step 2: Style the Page with CSS

Create style.css and add this code:

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

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

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.logo {
  font-size: 22px;
  font-weight: bold;
}

nav a {
  margin-left: 15px;
  text-decoration: none;
  color: #334155;
  font-size: 14px;
}

.hero {
  background: #f1f5f9;
  padding: 60px 0;
}

.hero-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero-text h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.hero-text p {
  margin-bottom: 20px;
  color: #475569;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  background: #2563eb;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}

.hero-image img {
  max-width: 100%;
}

.features {
  padding: 60px 0;
}

.features .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  padding: 25px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.feature-card h3 {
  margin-bottom: 8px;
}

.footer {
  text-align: center;
  padding: 20px;
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
}

@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .features .container {
    grid-template-columns: 1fr;
  }
}

Step 3: Add the Image

Place a clean illustration inside the images folder and name it hero.png.

Image ideas:

  • Laptop with code on screen
  • Website wireframe illustration
  • Developer working illustration

Keep it minimal and professional.

Final Result

You now have a fully responsive landing page that:

  • Works on all screen sizes
  • Uses clean HTML & CSS
  • Can be expanded into a real website

Common Beginner Mistakes

  • Forgetting viewport meta tag
  • Not using box-sizing
  • Overusing fixed widths
  • Ignoring mobile layout

What to Build Next

  • Add a contact form
  • Create a pricing section
  • Convert this into a WordPress theme

👉 Next Project: Build a JavaScript To-Do List App (Beginner Friendly)

Final Tip

Don’t rush. Modify the layout, change colors, break things, and fix them. That’s how real learning happens.

Happy coding 🚀

Share This Article