Complete Web Designing Course for Beginners

Lesson 5.7 – Mini Project: Responsive Business Website

🚀 Building a Complete Professional Business Website Using HTML & CSS

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Build a Complete Responsive Website

✅ Create Professional Navigation Bars

✅ Create Hero Sections

✅ Create Service Sections

✅ Create About Sections

✅ Create Contact Sections

✅ Use Flexbox, Grid, and Media Queries

✅ Build Real Business Websites

📖 Introduction

Congratulations! 🎉

You have completed:

✅ Responsive Design

✅ Mobile First Design

✅ Media Queries

✅ Responsive Images

✅ Responsive Navigation Bar

✅ Mobile Friendly Pages

Now it is time to build a complete:

🏢 Responsive Business Website

🌟 Project Overview

We will create a business website for:

NextGen Dev Hub

The website will contain:

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

LOGO + MENU

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

HERO SECTION

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

ABOUT US

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

SERVICES

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

CONTACT

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

FOOTER

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

🎯 Final Website Features

✅ Responsive Navigation

✅ Professional Hero Section

✅ About Company Section

✅ Services Section

✅ Contact Information

✅ Responsive Layout

✅ Mobile Friendly Design

🗂️ Project Files

Create:

index.html

style.css

🎯 Step 1 – HTML Structure

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>NextGen Dev Hub</title>

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

</head>

<body>

</body>

</html>

🎯 Step 2 – Create Navigation Bar

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

🎯 Step 3 – Create Hero Section

<section class="hero">

<h1>

Grow Your Business With Us

</h1>

<p>

Professional Web Design & Development Services

</p>

<button>

Get Started

</button>

</section>

🎯 Step 4 – Create About Section

<section class="about">

<h2>About Us</h2>

<p>

NextGen Dev Hub provides Web Development,
Programming, Robotics, IoT and Technical Training
for students and professionals.

</p>

</section>

🎯 Step 5 – Create Services Section

<section class="services">

<div class="card">

<h3>Web Design</h3>

<p>

Modern Website Design

</p>

</div>

<div class="card">

<h3>Web Development</h3>

<p>

Responsive Websites

</p>

</div>

<div class="card">

<h3>Training</h3>

<p>

Programming & Technical Courses

</p>

</div>

</section>

🎯 Step 6 – Create Contact Section

<section class="contact">

<h2>Contact Us</h2>

<p>Email: info@nextgendevhub.com</p>

<p>Phone: +91 9876543210</p>

</section>

🎯 Step 7 – Create Footer

<footer>

© 2026 NextGen Dev Hub

</footer>

🌟 Complete HTML Code

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>NextGen Dev Hub</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>

Grow Your Business With Us

</h1>

<p>

Professional Web Design & Development Services

</p>

<button>

Get Started

</button>

</section>

<section class="about">

<h2>About Us</h2>

<p>

NextGen Dev Hub provides Web Development,
Programming, Robotics, IoT and Technical Training.

</p>

</section>

<section class="services">

<div class="card">

<h3>Web Design</h3>

<p>Modern Website Design</p>

</div>

<div class="card">

<h3>Web Development</h3>

<p>Responsive Websites</p>

</div>

<div class="card">

<h3>Training</h3>

<p>Programming Courses</p>

</div>

</section>

<section class="contact">

<h2>Contact Us</h2>

<p>Email: info@nextgendevhub.com</p>

<p>Phone: +91 9876543210</p>

</section>

<footer>

© 2026 NextGen Dev Hub

</footer>

</body>

</html>

🎨 Step 8 – Style Body

body{

margin:0;

font-family:Arial, sans-serif;

background:#f5f5f5;

}

🎨 Step 9 – Style Navigation

nav h2{

color:white;

}

nav ul{

display:flex;

gap:20px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:bold;

}

nav a:hover{

color:yellow;

}

🎨 Step 10 – Style Hero Section

.hero{

text-align:center;

padding:100px 20px;

background:white;

}

.hero h1{

font-size:50px;

color:#0d6efd;

}

.hero p{

font-size:20px;

}

.hero button{

background:#0d6efd;

color:white;

padding:15px 30px;

border:none;

border-radius:8px;

font-size:18px;

cursor:pointer;

}

.hero button:hover{

background:#084298;

}

🎨 Step 11 – Style About Section

.about{

padding:50px 20px;

text-align:center;

background:#ffffff;

}

🎨 Step 12 – Style Services Section

.services{

display:grid;

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

gap:20px;

padding:50px;

}

.card{

background:white;

padding:25px;

border-radius:10px;

box-shadow:0 0 10px lightgray;

text-align:center;

}

🎨 Step 13 – Style Contact Section

.contact{

padding:50px 20px;

text-align:center;

background:#ffffff;

}

🎨 Step 14 – Style Footer

footer{

background:#0d6efd;

color:white;

text-align:center;

padding:20px;

}

🎯 Step 15 – Make Website Responsive

@media (max-width:768px)
{

nav{

flex-direction:column;

}

nav ul{

flex-direction:column;

padding:0;

}

.hero h1{

font-size:30px;

}

.services{

grid-template-columns:1fr;

padding:20px;

}

}

🌟 Complete CSS Code

body{

margin:0;

font-family:Arial, sans-serif;

background:#f5f5f5;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

background:#0d6efd;

padding:15px 30px;

}

nav h2{

color:white;

}

nav ul{

display:flex;

gap:20px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:bold;

}

nav a:hover{

color:yellow;

}

.hero{

text-align:center;

padding:100px 20px;

background:white;

}

.hero h1{

font-size:50px;

color:#0d6efd;

}

.hero p{

font-size:20px;

}

.hero button{

background:#0d6efd;

color:white;

padding:15px 30px;

border:none;

border-radius:8px;

font-size:18px;

cursor:pointer;

}

.about{

padding:50px 20px;

text-align:center;

background:white;

}

.services{

display:grid;

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

gap:20px;

padding:50px;

}

.card{

background:white;

padding:25px;

border-radius:10px;

box-shadow:0 0 10px lightgray;

text-align:center;

}

.contact{

padding:50px 20px;

text-align:center;

background:white;

}

footer{

background:#0d6efd;

color:white;

text-align:center;

padding:20px;

}

@media (max-width:768px)
{

nav{

flex-direction:column;

}

nav ul{

flex-direction:column;

padding:0;

}

.hero h1{

font-size:30px;

}

.services{

grid-template-columns:1fr;

padding:20px;

}

}

🎯 Expected Output

Desktop View

LOGO

HOME ABOUT SERVICES CONTACT

Grow Your Business With Us

[ Get Started ]

Web Design | Web Development | Training

Mobile View

LOGO

HOME

ABOUT

SERVICES

CONTACT

Grow Your Business With Us

[ Get Started ]

Web Design

Web Development

Training

🏆 Final Mini Project Challenge

Modify this project and create:

Polytechnic College Business Website

Add:

✅ College Logo

✅ About College

✅ Courses Offered

✅ Faculty Section

✅ Contact Form

✅ College Gallery

📝 Practical Activity

Create a complete website for:

Coaching Institute
Polytechnic College
Computer Training Center
Robotics & IoT Academy

using all concepts learned in Module 5.

📋 Assignment

Assignment 5.7

What is a Responsive Business Website?
Why is Mobile First Design important?
Why are Media Queries used?
Why should Service Cards be responsive?
Create a responsive business website.
Add an About Section and Contact Section.
Modify the project for your college.

🧠 Quiz

Q1. Which layout is used for service cards?

A. Table

B. Grid

C. Float

D. Inline

✅ Answer: B

Q2. Which CSS feature helps make websites responsive?

A. Media Queries

B. Border

C. Color

D. Animation

✅ Answer: A

Q3. Which section introduces the company?

A. Footer

B. Contact

C. About

D. Navigation

✅ Answer: C

Q4. Which layout is commonly used for navigation?

A. Grid

B. Flexbox

C. Table

D. Inline

✅ Answer: B

Q5. A responsive business website should work on?

A. Mobile

B. Tablet

C. Desktop

D. All of These

✅ Answer: D

📌 Module 5 Summary

You have successfully learned:

✅ Lesson 5.1 – What is Responsive Design?

✅ Lesson 5.2 – Mobile First Design

✅ Lesson 5.3 – Media Queries

✅ Lesson 5.4 – Responsive Images

✅ Lesson 5.5 – Responsive Navigation Bar

✅ Lesson 5.6 – Building Mobile Friendly Pages

✅ Lesson 5.7 – Mini Project: Responsive Business Website