NS
Guest Mode:

BCA Student Stories & UpdatesLive

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

Sprint 2 Capstone: Responsive University Campus Portal

Congratulations on reaching Day 20! Today you synthesize everything learned across Sprint 2 (Box Model, Display, Positioning, Flexbox, Grid, Media Queries, and Transitions) to build a complete Responsive University Campus Portal.

Interactive Learning Roadmap

Day 20 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Integrate all concepts from Sprint 2 into a production-grade multi-section portal.
✔Build a Flexbox sticky header with brand logo and responsive navigation.
✔Create a modern Hero banner with call-to-action buttons.
✔Build a 3-column CSS Grid showcasing BCA Academic Departments.
✔Deploy full mobile responsiveness with media queries and hover micro-animations.
Day 20 MasterclassCSS Layouts

Sprint 2 Capstone: Responsive University Campus Portal — Comprehensive Practical Guide

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

Real-World Purpose Aur Zaroorat

Congratulations on reaching Day 20! Today you synthesize everything learned across Sprint 2 (Box Model, Display, Positioning, Flexbox, Grid, Media Queries, and Transitions) to build a complete Responsive University Campus Portal.

Semantic Architecture: Use <header>, <nav>, <main>, <section>, and <footer>.
Global CSS Design System: Define CSS custom variables for primary brand blue (#2563eb), dark background, and clean cards.
Layout Integration: Flexbox for single-direction alignment (Navbar, Buttons) + CSS Grid for 2D multi-card departments.
100% Mobile Responsive: Perfectly readable on 360px mobile screens and wide 1440px desktop displays.
Dimaag Mein Bithane Ka Model

"Think of this as your semester midterm practical exam: taking all the separate tools in your toolbox and crafting a real, functional software product."

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

👨‍🏫3. Teacher Demonstration Code

Complete architecture demonstrating navigation, hero, and grid departments.

Responsive Campus Portal Architecturehtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apex University Portal</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; background: #f8fafc; color: #0f172a; }
    .header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: #000; color: #fff; }
    .hero { text-align: center; padding: 60px 20px; background: #2563eb; color: #fff; }
    .dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; padding: 40px 24px; }
    .dept-card { background: #fff; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; transition: transform 0.2s; }
    .dept-card:hover { transform: translateY(-4px); }
  </style>
</head>
<body>
  <header class="header"><h2>Apex University</h2><div>BCA Portal</div></header>
  <section class="hero"><h1>Excellence in Computer Applications</h1></section>
  <section class="dept-grid">
    <div class="dept-card"><h3>Computer Science</h3><p>Software & Algorithms</p></div>
    <div class="dept-card"><h3>Web Technologies</h3><p>Full-Stack Engineering</p></div>
    <div class="dept-card"><h3>Data Science</h3><p>Analytics & Machine Learning</p></div>
  </section>
</body>
</html>

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.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 20 Practical Task Test Studio

Test Score:2 / 2 Passed
100% Correct • All Practical Tasks Passed!
Advancing to Day 21: JavaScript Introduction: <script> Tag, Variables (let, const) & Data Types in 2s...
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Verify Portal Nav Flexbox

Ensure .portal-nav has `display: flex;` and `justify-content: space-between;`.

✔ PASSED
Task 2Verify Portal Grid System

Ensure .portal-grid has `display: grid;` and `grid-template-columns: repeat(3, 1fr);`.

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

Spot the Bug: Broken Mobile View on Full Capstone Portal

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

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
.portal-grid {
2
display: grid;
3
grid-template-columns: 350px 350px 350px;
4
width: 1050px; /* Hardcoded width breaks completely on smartphones! */
5
}
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Hardcoding widths like 1050px prevents responsive reflow and forces horizontal scrolling. Always use fluid grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) or media queries.

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

📝Independent Practice: Assignment

📄 campus-portal.html

Homework Task: Production Campus Portal GitHub Release

  • •Create folder `day-20` in your repository with `index.html` and `styles.css`.
  • •Build a complete University Campus Portal homepage.
  • •Section 1: Sticky Navigation Bar with Logo and Links.
  • •Section 2: Hero section with CTA button ("Apply for BCA 2026").
  • •Section 3: 4 Academic Department Cards with hover elevation (`translateY(-5px)`).
  • •Section 4: Faculty Spotlight Section with 2-column layout.
  • •Section 5: Professional Footer with Copyright and Quick Links.
  • •Ensure 100% mobile responsiveness from 360px to 1440px.
Submission Evaluation Criteria: Push to GitHub and verify live repository in NextSem BCA Practical Portal.
Exact Assignment Solution Code: campus-portal.html

Open Visual Studio Code on your PC (code .), create campus-portal.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 20 - University Campus Portal Capstone</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #060c18;
      color: white;
      line-height: 1.6;
    }
    /* Sticky Top Header */
    .navbar {
      position: sticky;
      top: 0;
      background: rgba(12, 19, 40, 0.95);
      backdrop-filter: blur(8px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 32px;
      border-bottom: 1px solid #1e293b;
      z-index: 100;
    }
    .navbar h2 { font-size: 18px; color: #38bdf8; }
    .nav-links { display: flex; gap: 20px; list-style: none; }
    .nav-links a { color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 600; }
    .nav-links a:hover { color: #38bdf8; }

    /* Hero Section */
    .hero {
      text-align: center;
      padding: 80px 20px;
      background: radial-gradient(circle at center, rgba(37,99,235,0.15) 0%, transparent 70%);
    }
    .hero h1 { font-size: 36px; color: white; margin-bottom: 12px; }
    .hero p { font-size: 16px; color: #94a3b8; max-width: 600px; margin: 0 auto 24px; }
    .btn-cta {
      padding: 12px 28px;
      background: #2563eb;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      display: inline-block;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .btn-cta:hover { transform: translateY(-2px); background: #1d4ed8; }

    /* Departments Grid */
    .section-title { text-align: center; font-size: 24px; margin: 40px 0 20px; color: #38bdf8; }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      max-width: 1040px;
      margin: 0 auto 60px;
      padding: 0 20px;
    }
    .dept-card {
      background: #0c1328;
      border: 1px solid #1e293b;
      border-radius: 12px;
      padding: 24px;
      transition: transform 0.2s ease;
    }
    .dept-card:hover { transform: translateY(-5px); border-color: #38bdf8; }
    .dept-card h3 { font-size: 18px; margin-bottom: 8px; color: white; }
    .dept-card p { font-size: 13px; color: #94a3b8; }

    /* Footer */
    footer {
      background: #050912;
      border-top: 1px solid #1e293b;
      padding: 30px 20px;
      text-align: center;
      font-size: 13px;
      color: #64748b;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <h2>🎓 IGNOU BCA Academy</h2>
    <ul class="nav-links">
      <li><a href="#departments">Departments</a></li>
      <li><a href="#faculty">Faculty</a></li>
      <li><a href="#admissions">Admissions</a></li>
    </ul>
  </nav>

  <header class="hero">
    <h1>National Campus Portal 2026</h1>
    <p>Empowering Computer Science & Application students with modern industry lab experience.</p>
    <a href="#apply" class="btn-cta">Apply for BCA 2026</a>
  </header>

  <h2 class="section-title" id="departments">Academic Departments</h2>
  <div class="grid">
    <div class="dept-card">
      <h3>Computer Applications (BCA)</h3>
      <p>Full-Stack Web Engineering, Systems Architecture, and Database Systems.</p>
    </div>
    <div class="dept-card">
      <h3>Information Technology</h3>
      <p>Cloud Computing, Linux Administration, and Computer Networking.</p>
    </div>
    <div class="dept-card">
      <h3>Artificial Intelligence</h3>
      <p>Data Science, Computational Statistics, and Machine Learning algorithms.</p>
    </div>
    <div class="dept-card">
      <h3>Cybersecurity</h3>
      <p>Network Defense, Secure Systems Design, and Vulnerability Assessment.</p>
    </div>
  </div>

  <footer>
    <p>© 2026 NextSem IGNOU BCA Study Notes • Authored by Er. Manoj Kumar</p>
  </footer>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What is the primary architectural difference between Flexbox and CSS Grid when building a full website layout?

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

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-20
Create a new project folder (day-20)
2$
cd day-20
Change working directory to day-20
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 20: Sprint 2 Capstone Project - Responsive University Campus Portal"
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 20 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-20/ or bca-day-20/
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 20
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 20
4$
mkdir day-20
Create a new project folder (day-20)
5$
cd day-20
Change working directory to day-20
6$
# 3. Create your code file: index.html
7$
# (Write your Day 20 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 20: Sprint 2 Capstone: Responsive University Campus Portal"
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-20/ 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/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/✨ CREATE THIS FOLDER FOR TODAY (Day 20)
└──index.htmlMust contain: Semantic layout, Flexbox navigation bar, CSS Grid departments, Responsive media queries
└──styles.css
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 20 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 19: CSS Transitions, Transforms & Hover Micro-Interactions first.

Complete Day 19 First
Day 19: CSS Transitions, Transforms & Hover Micro-Interactions
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal