NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 18CSS Layouts2 Hours Practical
Push to GitHub to Complete

Responsive Design & Media Queries: Mobile-First Strategy

Over 60% of web traffic originates from mobile devices. Responsive Web Design ensures websites adapt fluidly across phones, tablets, and wide desktop monitors using CSS Media Queries.

Interactive Learning Roadmap

Day 18 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Understand Responsive Web Design (RWD) principles and fluid layouts.
✔Configure the critical viewport meta tag in the HTML head.
✔Write mobile-first CSS media queries using `@media (min-width: 768px)`.
✔Transform single-column mobile layouts into multi-column desktop layouts seamlessly.
Day 18 MasterclassCSS Layouts

Responsive Design & Media Queries: Mobile-First Strategy — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

Over 60% of web traffic originates from mobile devices. Responsive Web Design ensures websites adapt fluidly across phones, tablets, and wide desktop monitors using CSS Media Queries.

Mobile-First Strategy: Write default CSS for small screens first, then use min-width media queries to enhance layouts as screen width grows.
@media (min-width: 768px) targets tablets and desktops.
@media (min-width: 1024px) targets large desktop monitors.
Always ensure <meta name="viewport" content="width=device-width, initial-scale=1.0"> is in the HTML <head>.
Dimaag Mein Bithane Ka Model

"Water adapts to the shape of whatever cup, bottle, or bowl it is poured into. Responsive design makes your web page flow naturally into any screen size."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

1 column on mobile phones, transforms to 2 columns on tablets and desktops.

Mobile-First Dual Column Transformationhtml
<style>
  /* Default: Mobile phone (1 column) */
  .content-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  /* Desktop breakpoint (2 columns) */
  @media (min-width: 768px) {
    .content-layout {
      flex-direction: row;
    }
  }
</style>
<div class="content-layout">
  <main style="flex: 2; background: #ffffff; padding: 20px;">Main Article</main>
  <aside style="flex: 1; background: #f1f5f9; padding: 20px;">Sidebar</aside>
</div>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

1 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 18 Practical Task Test Studio

Test Score:0 / 1 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Write min-width: 768px Media Query

Add `@media (min-width: 768px) { .responsive-cards { grid-template-columns: repeat(3, 1fr); } }`.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh478 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Missing Viewport Meta Tag Breaking Mobile Scaling

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>Responsive Site</title>
5
<!-- Missing viewport meta tag! -->
6
</head>
7
<body>
8
<h1>Why is my site zoomed out like desktop on mobile?</h1>
9
</body>
10
</html>
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Without the viewport meta tag, mobile browsers assume the page is designed for a 980px desktop and shrink the entire page down to a tiny, unreadable zoom.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 responsive-course.html

Homework Task: Responsive BCA Course Landing Page

  • •Create folder `day-18` with `index.html`.
  • •Build a header, hero section, and 3-card feature showcase.
  • •On mobile (< 640px): 1 column layout with stacked navigation.
  • •On tablet (>= 640px): 2 column card grid.
  • •On desktop (>= 1024px): 3 column card grid with horizontal header navigation.
Submission Evaluation Criteria: Test using Chrome DevTools device mode toggling between iPhone, iPad, and Desktop.
Exact Assignment Solution Code: responsive-course.html

Open Visual Studio Code on your PC (code .), create responsive-course.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 18 - Mobile-First Responsive Course Page</title>
  <style>
    /* 1. Mobile-First Base Styles (< 640px) */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0b1120;
      color: white;
      padding: 16px;
      line-height: 1.6;
    }
    .header {
      text-align: center;
      padding: 24px 0;
      border-bottom: 1px solid #1e293b;
    }
    .header h1 { font-size: 22px; color: #38bdf8; }
    .header p { font-size: 13px; color: #94a3b8; }

    .card-grid {
      display: grid;
      grid-template-columns: 1fr; /* 1 column on mobile */
      gap: 16px;
      margin-top: 24px;
    }
    .course-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 20px;
    }
    .course-card h3 { font-size: 16px; color: white; margin-bottom: 6px; }
    .course-card p { font-size: 13px; color: #cbd5e1; }

    /* 2. Tablet Viewport (>= 640px): 2 Columns */
    @media (min-width: 640px) {
      body { padding: 32px; }
      .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
      .header h1 { font-size: 26px; }
    }

    /* 3. Desktop Viewport (>= 1024px): 3 Columns */
    @media (min-width: 1024px) {
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        max-width: 1040px;
        margin: 0 auto;
      }
      .card-grid {
        max-width: 1040px;
        margin: 32px auto 0;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .header h1 { font-size: 30px; }
    }
  </style>
</head>
<body>
  <header class="header">
    <div>
      <h1>BCA Semester 1 Course Modules</h1>
      <p>Responsive Media Query Strategy (Mobile -> Tablet -> Desktop)</p>
    </div>
  </header>

  <main class="card-grid">
    <div class="course-card">
      <h3>BCS-011: Computer Basics</h3>
      <p>Foundations of computer hardware, operating systems, and memory hierarchy.</p>
    </div>
    <div class="course-card">
      <h3>BCSL-013: PC Software Lab</h3>
      <p>Hands-on practical development with HTML5, CSS3, JavaScript, and Linux CLI.</p>
    </div>
    <div class="course-card">
      <h3>BCS-012: Mathematics</h3>
      <p>Discrete mathematics, linear programming, matrices, and computational calculus.</p>
    </div>
  </main>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Why is the mobile-first CSS architecture preferred over desktop-first?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-18
Create a new project folder (day-18)
2$
cd day-18
Change working directory to day-18
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 18: Mobile-first responsive design, media query breakpoints and fluid grids"
Commit staged changes with a descriptive message
5$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 18 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-18/ or bca-day-18/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 18
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 18
4$
mkdir day-18
Create a new project folder (day-18)
5$
cd day-18
Change working directory to day-18
6$
# 3. Create your code file: index.html
7$
# (Write your Day 18 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 18: Responsive Design & Media Queries: Mobile-First Strategy"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-18/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/✨ CREATE THIS FOLDER FOR TODAY (Day 18)
└──index.htmlMust contain: <meta name="viewport">, @media (min-width: 768px), @media (min-width: 1024px)
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 18 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 17: CSS Grid System 2: Spanning & Newspaper Magazine Layout first.

Complete Day 17 First
Day 17: CSS Grid System 2: Spanning & Newspaper Magazine Layout
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal