Have you ever visited a single-page website with a clean and minimal design? If yes, that is the landing page. You don’t need to be a web development guru to create this.
In this tutorial, I’ll guide you on how to create a simple landing page using only HTML and CSS—this will be perfect for portfolios, small businesses, or just for learning.
Creating a simple Landing Page with HTML CSS
Tools you need to build this:
- Code editor (VS Code, Notepad, Sublime Text)
- Browser(Safari, Chrome)
- Knowledge of HTML and CSS
That’s it, you don’t need any other Programming languages or Frameworks
Let’s dive into the actual project!
Also read:
Preview of a simple landing page
1. Setting Up Project Structure
Folder setup:
- Create a folder name, it’s up to your choice. I name it
landing page - Inside that folder, create two files
index.html file for HTML structurestyles.cssfor our CSS code
It’s time to connect our CSS file to HTML Document – let’s write code in the HTML document
2. Setting up HTML code
You can easily copy and paste this code into your code editor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="wrapper">
<!-- Hero section -->
<section class="section-1">
<div class="heading">
<h2>
Hey, <span>This is Imraan</span> <br />
Full Stack developer
</h2>
</div>
</section>
<!-- skills section -->
<section class="section-2">
<div class="heading2">
<h3>Im Master at</h3>
</div>
<div class="skills">
<div class="card">
<div class="webdev-image">
<img src="web dev.jpg" alt="" />
</div>
<div class="webdev content">
<h3>web develpment</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi,
earum! Officia, quaerat ex aliquam animi provident corrupti
dolore nobis. Iure, sed nulla nam voluptate officiis molestias
voluptas numquam nobis voluptates.
</p>
</div>
</div>
<div class="card">
<div class="appdev-image">
<img src="app dev.avif" alt="" />
</div>
<div class="appdev content">
<h3>App develpment</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi,
earum! Officia, quaerat ex aliquam animi provident corrupti
dolore nobis. Iure, sed nulla nam voluptate officiis molestias
voluptas numquam nobis voluptates.
</p>
</div>
</div>
<div class="card">
<div class="uiux-image">
<img src="ui ux.jpg" alt="" />
</div>
<div class="uiux content">
<h3>UI and UX</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi,
earum! Officia, quaerat ex aliquam animi provident corrupti
dolore nobis. Iure, sed nulla nam voluptate officiis molestias
voluptas numquam nobis voluptates.
</p>
</div>
</div>
</div>
</section>
<!-- info section -->
<section class="section-3">
<div class="contact-us">
<h3>Contact Me</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio odit
qui, in eaque officiis quidem est vel libero. Velit cum nulla
provident eveniet officiis? Officia assumenda quo ducimus accusamus
voluptate.
</p>
<br />
<span>codewithimaan@gmail.com</span>
</div>
<div class="about-us">
<h3>About Me</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio odit
qui, in eaque officiis quidem est vel libero. Velit cum nulla
provident eveniet officiis? Officia assumenda quo ducimus accusamus
voluptate.
</p>
<br />
<span>Home:- 1-5-9 Somewhere in India</span>
</div>
</section>
<!-- footer section -->
<section class="footer">
<p>codewithimraan | All rights reserved</p>
</section>
</div>
</body>
</html>
What is inside this HTML code:
HTML is the skeleton for this landing page, It creates everything!
Think of it as arranging furniture in an empty room.
I’ve wrapped all content in a wrapper And in that, I’ve added 4 sections like a header section, skill sections, info section and footer section – h tag p tag for texts like headings, paragraphs.
HTML doesn’t control how things look, but it does the groundwork. It’s simple, clean, and beginner-friendly.
3. Style it with CSS
Here is the main part of this landing page. CSS is what makes your landing page beautiful.
@import url("https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: "Bona Nova SC", serif;
}
.wrapper {
width: 100vw;
height: 100vh;
overflow-x: hidden;
}
/* section 1 */
.section-1 {
background: url(background.avif);
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.section-1 .heading {
padding-top: 2rem;
text-align: center;
}
.section-1 .heading h2 {
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
border: 1px solid rgba(245, 245, 245, 0.301);
background: rgba(35, 101, 122, 0.2);
margin: 0px 20px;
color: #f5f5f5;
font-size: 5rem;
}
.section-1 .heading span {
font-size: 3rem;
color: white;
font-family: cursive;
}
/* section2 */
.section-2 {
text-align: center;
background-color: white;
}
.section-2 .heading2 {
font-size: 4rem;
color: white;
background: linear-gradient(45deg, rgb(35, 101, 122), rgb(65, 51, 94));
}
/* section 2 skills */
.skills {
max-width: 1080px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 50px 30px;
}
.section-2 .skills img {
width: 250px;
object-fit: cover;
transition: border-radius 600ms;
}
.card {
width: 300px;
height: 400px;
padding: 40px 30px;
background-color: white;
text-align: center;
border: 2px solid lightgray;
border-radius: 20px;
cursor: pointer;
transition: transform 500ms;
}
.card:hover {
transform: scale(1.03);
box-shadow: 0px 0px 3px 2px gray;
border-radius: 20px;
}
.card:hover img {
border-radius: 20px;
}
.content {
font-style: italic;
font-weight: lighter;
line-height: 1.1;
padding: 5px 0;
}
/* section 3 */
.section-3 {
background: white;
width: 100%;
display: flex;
padding-top: 50px;
}
.contact-us {
background: beige;
padding: 20px 30px;
border: 2px solid black;
}
.contact-us h3 {
font-size: 2rem;
padding: 20px 0px;
text-decoration: 5px underline black;
}
.about-us {
background: lightseagreen;
color: white;
padding: 20px 30px;
border: 2px solid black;
}
.about-us h3 {
font-size: 2rem;
padding: 20px 0px;
text-decoration: 5px underline black;
}
/* footer */
.footer {
background-color: black;
color: white;
font-size: 20px;
text-align: center;
padding: 20px;
}
/* media query */
@media (max-width: 786px) {
.section-1 .heading {
padding: 80px 0px;
text-align: center;
}
.section-1 .heading h2 {
font-size: 3rem;
line-height: 1.4em;
}
.section-2 .heading2 {
font-size: 3rem;
text-align: center;
}
.skills {
flex-direction: column;
gap: 2em;
align-items: center;
}
.section-3 {
flex-direction: column;
}
}CSS adds colors, layout, spacing, and style to the raw HTML structure. In this project, I used CSS to add a gradient background, white text, spacing between elements, and rounded buttons
Flexbox helps align the navbar and center content vertically. We also added hover effects to make the button interactive. Fonts, padding, and even the vibe of the site— all thanks to CSS.
Final Thoughts on creating a landing page
Creating a landing page with HTML and CSS is not only a great way to sharpen your web dev skills—it’s also incredibly fun. You can personalize it, show off your creativity, and even turn it into a mini portfolio or product showcase.
So go ahead—code your first landing page, tweak it, break it, fix it, and most importantly, learn from it.
Happy Coding Buddies!
I’m a Full-Stack web developer (Freelancer). I’ve a great knowledge of anything related to HTML, CSS, JS, React, Node.js, MongoDB
