Tutorial: Build a Responsive Landing Page from Scratch with HTML & CSS
Ever wanted to create your own website? Join me in this beginner-friendly journey as we build a landing page from scratch! We'll tackle common challenges, discover coding tricks, and unlock your potential as a web developer. Let's code together!
In this tutorial you will learn how to create a landing page using HTML, CSS and some JavaScript. Our page will have a header with a responsive menu, a hero section with a background image, a services section-grid with 3 cards, an about us section and a footer.
The landing page we are creating will look like the one below:
Prerequisites
- Basic knowledge of HTML and CSS.
- A text editor of your choice.
Steps
1. Create a new HTML file and name it index.html.
2. Add the basic HTML structure to the file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing Page</title>
</head>
<body>
</body>
</html>
3. Add the CSS stylesheet and your preferred font to the file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
</head>
<body>
</body>
</html>
4. Create the header with a responsive menu.
<header>
<nav>
<div class="logo">
<a href="#">Logo</a>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
</header>
5. Add the CSS for the body and header.
body {
margin: 0;
font-family: Inter, sans-serif;
}
header {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.logo a {
font-size: 24px;
font-weight: bold;
color: #333;
text-decoration: none;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.menu li a {
font-size: 16px;
font-weight: bold;
color: #333;
text-decoration: none;
margin-left: 20px;
}
.burger {
display: none;
cursor: pointer;
}
.line {
width: 25px;
height: 3px;
background-color: #333;
margin: 5px;
}
@media (max-width: 768px) {
.menu {
display: none;
}
.burger {
display: block;
}
}
6. Create the hero section with a background image.
<section class="hero">
<div class="hero-content">
<h1>Hero Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>Learn More</button>
</div>
</section>
7. Add the CSS for the hero section.
.hero {
background-image: url('path/to/your/image.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.hero-content {
text-align: center;
color: #fff;
}
.hero-content h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero-content p {
font-size: 24px;
margin-bottom: 40px;
}
.hero-content button {
background-color: #fff;
color: #333;
border: none;
padding: 10px 20px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
8. Create the services section-grid with 3 cards.
<section class="services">
<h2>Our Services</h2>
<div class="services-grid">
<div class="card">
<img src="path/to/your/image2.jpg" alt="Service 1">
<h3>Service 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card">
<img src="path/to/your/image3.jpg" alt="Service 2">
<h3>Service 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card">
<img src="path/to/your/image4.jpg" alt="Service 3">
<h3>Service 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</section>
9. Add the CSS for your services to the style.css file
.services {
padding: 50px;
text-align: center;
}
.services h2 {
font-size: 36px;
margin-bottom: 20px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
margin-top: 50px;
}
.card {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}
.card img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.card h3 {
font-size: 24px;
margin-bottom: 10px;
}
.card p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
10. Create another for the About Us section or a section of your choice.
<section class="about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu bibendum bibendum, sapien magna faucibus nunc, vel lacinia velit nisi vel dolor. Sed euismod, urna eu bibendum bibendum, sapien magna faucibus nunc, vel lacinia velit nisi vel dolor.</p>
</section>
11. Add the CSS for the about section.
.about {
background-color: #f5f5f5;
padding: 50px;
text-align: center;
}
.about h2 {
font-size: 36px;
margin-bottom: 20px;
}
.about p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 40px;
}
12. Create the footer.
<footer>
<p>© 2023 Landing Page</p>
</footer>
13. Add the CSS for the footer.
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
14. Save the files and open the HTML file in your browser.
That's it! You now have a landing page with a header with a responsive menu, a hero section with a background image, a services section-grid with 3 cards, another section of your choice, and a footer. You can customize the design by changing the colors, fonts, and images to suit your needs.