Complete Web Designing Course for Beginners

Lesson 4.9 – Mini Project: Landing Page Layout

🚀 Building a Professional Business Landing Page Using HTML & CSS

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Create a Complete Landing Page

✅ Use Flexbox Layout

✅ Use CSS Grid Layout

✅ Create Navigation Menus

✅ Create Hero Sections

✅ Design Professional Webpages

✅ Combine All CSS Concepts Learned So Far

✅ Build Real-World Website Layouts

📖 Introduction

Congratulations! 🎉

You have completed:

✅ CSS Box Model

✅ Margin & Padding

✅ Width & Height

✅ Display Properties

✅ Positioning

✅ Flexbox Basics

✅ Flexbox Advanced Layout

✅ CSS Grid

Now it’s time to create a complete project.

🌟 What is a Landing Page?

A Landing Page is the first page visitors see when they open a website.

Examples:

✅ Business Websites

✅ Startup Websites

✅ Course Websites

✅ Product Websites

✅ Portfolio Websites

🎯 Landing Page Structure

Our Landing Page will contain:

---------------------------------

LOGO

HOME | ABOUT | SERVICES | CONTACT

---------------------------------

Hero Section

Welcome Message

Button

---------------------------------

Services Section

Service 1
Service 2
Service 3

---------------------------------

Footer

---------------------------------

🏗️ Project Planning

We will create:

Section 1

Navigation Bar

Section 2

Hero Section

Section 3

Services Section

Section 4

Footer

💻 Step 1 – Create Project Files

Create:

index.html

style.css

🎯 Step 2 – HTML Structure

<!DOCTYPE html>

<html>

<head>

<title>Landing Page</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

</body>

</html>

🎯 Step 3 – Create Navigation Bar

Inside body:

<nav>

<h2>NextGen Dev Hub</h2>

<ul>

<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>

</nav>

Output

NextGen Dev Hub

Home About Services Contact

🎯 Step 4 – Create Hero Section

Below navigation:

<section class="hero">

<h1>

Learn Web Designing

</h1>

<p>

Build Professional Websites with HTML, CSS and JavaScript

</p>

<button>

Join Now

</button>

</section>

🎯 Step 5 – Create Services Section

<section class="services">

<div class="card">

<h2>HTML</h2>

<p>Website Structure</p>

</div>

<div class="card">

<h2>CSS</h2>

<p>Website Design</p>

</div>

<div class="card">

<h2>JavaScript</h2>

<p>Website Interaction</p>

</div>

</section>

🎯 Step 6 – Create Footer

<footer>

© 2026 NextGen Dev Hub

</footer>

🌟 Complete HTML Code

index.html

<!DOCTYPE html>

<html>

<head>

<title>Landing Page Project</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<nav>

<h2>NextGen Dev Hub</h2>

<ul>

<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>

</nav>

<section class="hero">

<h1>

Learn Web Designing

</h1>

<p>

Build Professional Websites with HTML, CSS and JavaScript

</p>

<button>

Join Now

</button>

</section>

<section class="services">

<div class="card">

<h2>HTML</h2>

<p>Website Structure</p>

</div>

<div class="card">

<h2>CSS</h2>

<p>Website Design</p>

</div>

<div class="card">

<h2>JavaScript</h2>

<p>Website Interaction</p>

</div>

</section>

<footer>

© 2026 NextGen Dev Hub

</footer>

</body>

</html>

🎨 Step 7 – Style Body

body{

margin:0;

font-family:Arial;

background-color:#f5f5f5;

}

🎨 Step 8 – Style Navigation

nav{

display:flex;

justify-content:space-between;

align-items:center;

background-color:#0d6efd;

padding:15px 40px;

}

Style Navigation Heading

nav h2{

color:white;

}

Style Menu

nav ul{

display:flex;

list-style:none;

gap:20px;

}

Style Links

nav a{

text-decoration:none;

color:white;

font-weight:bold;

}

Hover Effect

nav a:hover{

color:yellow;

}

🎨 Step 9 – Style Hero Section

.hero{

text-align:center;

padding:100px 20px;

background-color:white;

}

Hero Heading

.hero h1{

font-size:45px;

color:#0d6efd;

}

Hero Paragraph

.hero p{

font-size:20px;

}

Hero Button

.hero button{

background-color:#0d6efd;

color:white;

padding:12px 25px;

border:none;

border-radius:10px;

font-size:18px;

cursor:pointer;

}

Button Hover

.hero button:hover{

background-color:#084298;

}

🎨 Step 10 – Style Services Section

.services{

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:20px;

padding:50px;

}

Style Cards

.card{

background-color:white;

padding:30px;

border-radius:15px;

box-shadow:5px 5px 15px lightgray;

text-align:center;

}

🎨 Step 11 – Style Footer

footer{

background-color:#0d6efd;

color:white;

text-align:center;

padding:20px;

}

🌟 Complete CSS Code

style.css

body{

margin:0;

font-family:Arial;

background-color:#f5f5f5;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

background-color:#0d6efd;

padding:15px 40px;

}

nav h2{

color:white;

}

nav ul{

display:flex;

list-style:none;

gap:20px;

}

nav a{

text-decoration:none;

color:white;

font-weight:bold;

}

nav a:hover{

color:yellow;

}

.hero{

text-align:center;

padding:100px 20px;

background-color:white;

}

.hero h1{

font-size:45px;

color:#0d6efd;

}

.hero p{

font-size:20px;

}

.hero button{

background-color:#0d6efd;

color:white;

padding:12px 25px;

border:none;

border-radius:10px;

font-size:18px;

cursor:pointer;

}

.hero button:hover{

background-color:#084298;

}

.services{

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:20px;

padding:50px;

}

.card{

background-color:white;

padding:30px;

border-radius:15px;

box-shadow:5px 5px 15px lightgray;

text-align:center;

}

footer{

background-color:#0d6efd;

color:white;

text-align:center;

padding:20px;

}

🎯 Expected Output

Website contains:

✅ Navigation Bar

✅ Hero Section

✅ Join Now Button

✅ Three Service Cards

✅ Footer

✅ Modern Professional Design

🏫 Real World Features Used

Navigation

display:flex;

Hero Section

text-align:center;

Services

display:grid;

Cards

box-shadow
border-radius

Button

hover effects

🌟 Enhancement Ideas

Students can add:

✅ Background Images

✅ Icons

✅ Contact Form

✅ About Section

✅ Testimonials

✅ Gallery

⚠️ Common Beginner Mistakes

Mistake 1

Not Linking CSS File

Wrong:

No stylesheet link

Mistake 2

Forgetting Flexbox

Navigation may break.

Mistake 3

No Grid Layout

Service cards appear vertically.

🏆 Final Project Challenge

Modify this project and create:

College Landing Page

Include:

✅ College Name

✅ About College

✅ Courses

✅ Faculty

✅ Contact Details

📝 Practical Activity

Create your own:

Polytechnic College Website Homepage

using everything learned in Module 4.

📋 Assignment

Assignment 4.9

What is a Landing Page?
Why is Flexbox used in Navigation?
Why is Grid used in Services Section?
Which property creates card shadows?
Which property creates rounded corners?
Create a landing page for a college.
Add your own services section.

🧠 Quiz

Q1. Which layout is used for Navigation?

A. Grid

B. Flexbox

C. Table

D. Position

✅ Answer: B

Q2. Which layout is used for Service Cards?

A. Grid

B. Float

C. Position

D. Table

✅ Answer: A

Q3. Which property creates shadows?

A. shadow

B. border-shadow

C. box-shadow

D. text-shadow

✅ Answer: C

Q4. Which property creates rounded corners?

A. round

B. border-radius

C. radius

D. curve

✅ Answer: B

Q5. Which property creates spacing between grid columns?

A. margin

B. border

C. gap

D. width

✅ Answer: C

📌 Module 4 Summary – CSS Layout & Design

You have successfully learned:

✅ Lesson 4.1 – CSS Box Model

✅ Lesson 4.2 – Margin & Padding

✅ Lesson 4.3 – Width & Height

✅ Lesson 4.4 – Display Properties

✅ Lesson 4.5 – Positioning Elements

✅ Lesson 4.6 – Flexbox Basics

✅ Lesson 4.7 – Flexbox Advanced Layout

✅ Lesson 4.8 – CSS Grid Introduction

✅ Lesson 4.9 – Mini Project: Landing Page Layout