Complete Web Designing Course for Beginners

Lesson 5.6 – Building Mobile Friendly Pages

🌐 Creating Complete Webpages That Work Perfectly on Mobile, Tablet, Laptop, and Desktop Devices

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Build Mobile-Friendly Webpages

✅ Apply Mobile First Design

✅ Use Media Queries

✅ Use Responsive Images

✅ Create Responsive Navigation

✅ Build Professional Responsive Layouts

✅ Create Real-World Webpages

📖 Introduction

So far we have learned:

✅ Responsive Design

✅ Mobile First Design

✅ Media Queries

✅ Responsive Images

✅ Responsive Navigation Bar

Now it is time to combine everything and build a complete:

📱 Mobile Friendly Webpage

🤔 What is a Mobile Friendly Page?

A Mobile Friendly Page is a webpage that:

✅ Fits all screen sizes

✅ Has readable text

✅ Has responsive images

✅ Has touch-friendly buttons

✅ Has proper navigation

✅ Does not require horizontal scrolling

🌟 Characteristics of Mobile Friendly Websites

A good mobile-friendly website should have:

1️⃣ Responsive Layout

Automatically adjusts to screen size.

2️⃣ Responsive Images

Images resize automatically.

3️⃣ Easy Navigation

Menus should be easy to use.

4️⃣ Readable Text

Text should not be too small.

5️⃣ Touch-Friendly Buttons

Buttons should be easy to tap.

🎯 Example Layout

Desktop View

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

LOGO

HOME ABOUT CONTACT

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

WELCOME SECTION

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

SERVICES

CARD 1 CARD 2 CARD 3

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

FOOTER

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

Mobile View

LOGO

HOME

ABOUT

CONTACT

WELCOME SECTION

CARD 1

CARD 2

CARD 3

FOOTER

🌟 Step 1 – Create Project Structure

Create files:

index.html

style.css

🎯 Step 2 – Create Basic HTML

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

<title>Mobile Friendly Website</title>

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

</head>

<body>

</body>

</html>

🤔 What is Viewport Meta Tag?

Very important for responsive websites.

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

Without it:

❌ Mobile responsiveness may not work properly.

With it:

✅ Website adjusts correctly on mobile devices.

🎯 Step 3 – Create Navigation

Inside body:

<nav>

<h2>NextGen Dev Hub</h2>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

🎯 Step 4 – Create Hero Section

<section class="hero">

<h1>

Learn Web Designing

</h1>

<p>

Create modern responsive websites.

</p>

<button>

Join Now

</button>

</section>

🎯 Step 5 – Create Services Section

<section class="services">

<div class="card">

<h3>HTML</h3>

<p>Website Structure</p>

</div>

<div class="card">

<h3>CSS</h3>

<p>Website Styling</p>

</div>

<div class="card">

<h3>JavaScript</h3>

<p>Website Interaction</p>

</div>

</section>

🎯 Step 6 – Create Footer

<footer>

© 2026 NextGen Dev Hub

</footer>

🌟 Complete HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

<title>Mobile Friendly Website</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="#">Courses</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<section class="hero">

<h1>

Learn Web Designing

</h1>

<p>

Create modern responsive websites.

</p>

<button>

Join Now

</button>

</section>

<section class="services">

<div class="card">

<h3>HTML</h3>

<p>Website Structure</p>

</div>

<div class="card">

<h3>CSS</h3>

<p>Website Styling</p>

</div>

<div class="card">

<h3>JavaScript</h3>

<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:#f5f5f5;

}

🎨 Step 8 – Style Navigation

nav{

display:flex;

justify-content:space-between;

align-items:center;

background:#0d6efd;

padding:15px 20px;

}

nav h2{

color:white;

}

nav ul{

display:flex;

gap:20px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:bold;

}

🎨 Step 9 – Style Hero Section

.hero{

text-align:center;

padding:80px 20px;

background:white;

}

.hero h1{

font-size:40px;

color:#0d6efd;

}

.hero button{

padding:12px 25px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

font-size:18px;

cursor:pointer;

}

🎨 Step 10 – Style Services Section

.services{

display:grid;

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

gap:20px;

padding:40px;

}

.card{

background:white;

padding:20px;

text-align:center;

border-radius:10px;

box-shadow:0 0 10px lightgray;

}

🎨 Step 11 – Style Footer

footer{

background:#0d6efd;

color:white;

text-align:center;

padding:20px;

}

🎯 Step 12 – Add Media Query

This is the most important step.

@media (max-width:768px)
{

nav{

flex-direction:column;

}

nav ul{

flex-direction:column;

padding:0;

}

.hero h1{

font-size:28px;

}

.services{

grid-template-columns:1fr;

}

}

🤔 What Happens Here?

Desktop:

HTML CSS JavaScript

Three cards in one row.

Mobile:

HTML

CSS

JavaScript

Cards move into one column.

🌟 Complete CSS

body{

margin:0;

font-family:Arial;

background:#f5f5f5;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

background:#0d6efd;

padding:15px 20px;

}

nav h2{

color:white;

}

nav ul{

display:flex;

gap:20px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:bold;

}

.hero{

text-align:center;

padding:80px 20px;

background:white;

}

.hero h1{

font-size:40px;

color:#0d6efd;

}

.hero button{

padding:12px 25px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

font-size:18px;

}

.services{

display:grid;

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

gap:20px;

padding:40px;

}

.card{

background:white;

padding:20px;

border-radius:10px;

text-align:center;

box-shadow:0 0 10px lightgray;

}

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:28px;

}

.services{

grid-template-columns:1fr;

}

}

🎯 Expected Output

Desktop

✅ Horizontal Menu

✅ Large Heading

✅ Three Service Cards

Mobile

✅ Vertical Menu

✅ Smaller Heading

✅ Single Column Cards

✅ Easy Navigation

🏫 Real World Applications

Mobile-Friendly Pages are used in:

✅ College Websites

✅ Business Websites

✅ Portfolio Websites

✅ E-Commerce Websites

✅ LMS Platforms

✅ News Websites

⚠️ Common Beginner Mistakes

Mistake 1

Missing Viewport Tag

Wrong:

No viewport meta tag

Mistake 2

Using Fixed Width

Wrong:

width:1200px;

Use:

width:100%;

Mistake 3

No Media Query

Website may break on mobile.

Mistake 4

Very Small Buttons

Wrong:

padding:3px;

Better:

padding:12px 25px;

🌟 Best Practices

✅ Always use viewport meta tag.

✅ Use responsive layouts.

✅ Use Flexbox and Grid.

✅ Use Media Queries.

✅ Test on mobile phones.

✅ Keep navigation simple.

🏆 Mini Project – Responsive Student Information Page

Create a webpage containing:

Header

Student Name

About Section

Branch

College

Skills

Contact Button

Apply:

✅ Responsive Navigation

✅ Responsive Layout

✅ Media Queries

✅ Mobile-Friendly Design

📝 Practical Activity

Create a:

Polytechnic College Homepage

Include:

Navigation Bar
Hero Section
Courses Section
Contact Section
Footer

Make it fully responsive.

📋 Assignment

Assignment 5.6

What is a Mobile Friendly Page?
Why is the viewport tag important?
What is the role of Media Queries?
Why should layouts be responsive?
Create a responsive webpage.
Create a responsive services section.
Explain the importance of mobile-friendly websites.

🧠 Quiz

Q1. Which HTML tag is important for responsive websites?

A. title

B. meta viewport

C. link

D. img

✅ Answer: B

Q2. Which CSS feature helps adapt layouts to screen size?

A. Border

B. Animation

C. Media Query

D. Font

✅ Answer: C

Q3. Which layout method is commonly used for responsive pages?

A. Flexbox

B. Grid

C. Both

D. Table

✅ Answer: C

Q4. Which device benefits most from mobile-friendly pages?

A. Smartphone

B. Tablet

C. Laptop

D. All Devices

✅ Answer: D

Q5. Responsive websites improve?

A. User Experience

B. Accessibility

C. Professional Appearance

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ Mobile-Friendly Pages work properly on all screen sizes.

✅ Viewport meta tag is essential for responsiveness.

✅ Flexbox, Grid, and Media Queries help create responsive layouts.

✅ Mobile-friendly websites provide a better user experience.

✅ Every modern website should be responsive and mobile-friendly.