How to Build a Landing Page with HTML & CSS
Learn how to build a clean, modern landing page from scratch using only HTML and CSS. This guide covers essential structure, styling, and best practices.
Table of content
Introduction
If you’re just getting started in web development or want to create a high-converting landing page for your project, knowing how to build one with pure HTML and CSS is a must. In this guide, I’ll walk you through each step so you can launch a beautiful landing page, optimized for both performance and user experience, without relying on frameworks or builders.
Why Build with Pure HTML & CSS?
- Performance: No heavy dependencies mean your landing page loads faster.
- Complete control: You can style every pixel to fit your brand.
- Learning opportunity: Mastering HTML and CSS strengthens your foundation as a web developer.
Step 1: Setup Your Project Structure
Create a project folder with two files:
/landing-page ├─ index.html └─ styles.css
Step 2: Scaffold the 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="styles.css">
</head>
<body>
<header>
<nav>
<h1>BrandName</h1>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h2>Welcome to Your Next Project!</h2>
<p>Build something amazing with us. Start now.</p>
<a href="#" class="cta">Get Started</a>
</section>
<section id="features">
<h3>Features</h3>
<ul>
<li>Simple and clean design</li>
<li>Mobile responsive</li>
<li>Fully customizable</li>
</ul>
</section>
<section id="about">
<h3>About Us</h3>
<p>We are passionate developers building modern solutions.</p>
</section>
<footer id="contact">
<p>Contact us: info@brandname.com</p>
</footer>
</body>
</html>
Step 3: Styling with CSS
Create styles.css to style your page:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
line-height: 1.6;
color: #222;
background: #f8f9fa;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 2rem;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
margin: 0;
}
nav a {
color: #222;
text-decoration: none;
font-weight: 500;
}
.hero {
background: linear-gradient(120deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
padding: 5rem 2rem;
text-align: center;
}
.hero .cta {
display: inline-block;
margin-top: 2rem;
background: #fff;
color: #2575fc;
padding: 1rem 2rem;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s;
}
.hero .cta:hover {
background: #e0e8ff;
}
section {
max-width: 700px;
margin: 3rem auto;
padding: 2rem;
background: #fff;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
footer {
text-align: center;
padding: 1.5rem 0;
margin-top: 2rem;
background: #f1f3f6;
color: #333;
}
@media (max-width: 600px) {
nav, .hero, section {
padding: 1rem;
}
nav ul {
gap: 0.8rem;
}
}Step 4: Optimize for Responsiveness
- Use flexible units (
rem,%). - Add media queries for mobile screens.
- Edit typography for smaller devices.
Step 5: Best Practices
- Keep code clean: Use comments and indentation.
- Optimize images: Use web-optimized formats and
alttags. - Test on multiple devices: Use Chrome DevTools device mode.
- Keep CTAs visible: Clear and concise buttons work best.
Wrapping Up
Building a landing page with just HTML and CSS gives you full control and helps you deeply understand core web development. As your skills grow, you can enhance your page with animations, JavaScript interactivity, or even backend functionality—but a solid, fast, mobile-ready foundation always starts here!