NS
Guest Mode:

BCA Student Stories & UpdatesLive

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

Flexbox Architecture 2: Align-Items, Flex-Wrap & Responsive Cards

While justify-content aligns items horizontally, `align-items` aligns them vertically along the cross axis, and `flex-wrap` allows items to drop down to new lines when container space runs out.

Interactive Learning Roadmap

Day 15 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Master cross-axis vertical alignment with `align-items: center | stretch | flex-start`.
✔Use `flex-wrap: wrap` so multi-card layouts wrap gracefully without horizontal squishing.
✔Understand flex item sizing with `flex: 1` and `flex-basis`.
✔Build a multi-card responsive grid using pure Flexbox.
Day 15 MasterclassCSS Layouts

Flexbox Architecture 2: Align-Items, Flex-Wrap & Responsive Cards — Comprehensive Practical Guide

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

Real-World Purpose Aur Zaroorat

While justify-content aligns items horizontally, `align-items` aligns them vertically along the cross axis, and `flex-wrap` allows items to drop down to new lines when container space runs out.

align-items: Controls item alignment across the CROSS axis (perpendicular to main axis).
align-items: center centers elements vertically inside the container.
flex-wrap: nowrap is default (forces all items onto a single cramped line).
flex-wrap: wrap lets items wrap into multiple rows naturally.
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% (absorbs equal leftover space).
Dimaag Mein Bithane Ka Model

"Imagine words wrapping in a paragraph when you hit the right margin of a page. flex-wrap: wrap does that for cards!"

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

👨‍🏫3. Teacher Demonstration Code

Cards expand equally with flex: 1 and wrap onto new lines on smaller screens.

Responsive Flex Card Grid with Wrappinghtml
<style>
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
  }
  .card {
    flex: 1 1 250px; /* grow, shrink, min-width 250px */
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }
</style>
<div class="card-grid">
  <div class="card"><h3>Feature 1</h3><p>Fast coding compiler.</p></div>
  <div class="card"><h3>Feature 2</h3><p>Live GitHub grading.</p></div>
  <div class="card"><h3>Feature 3</h3><p>Oral viva simulator.</p></div>
</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.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 15 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Configure Flexbox with Wrap

Add `display: flex;` and `flex-wrap: wrap;` to .showcase-container.

⏳ WAITING
Task 2Add Alignment and Gap

Add `align-items: center;` and `gap: 16px;` to .showcase-container.

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

Spot the Bug: Cards Squished to Unreadable Thin Strips

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

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
.gallery {
2
display: flex;
3
gap: 20px;
4
/* Missing flex-wrap forces 10 wide cards into a single tiny line! */
5
}
6
.gallery-item {
7
width: 300px;
8
}
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

By default, flex-wrap is nowrap. Flexbox shrinks all children to prevent breaking into new lines, squishing cards into unreadable thin slivers.

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

📝Independent Practice: Assignment

📄 pricing-cards.html

Homework Task: BCA 6-Semester Roadmap Cards

  • •Create folder `day-15` with `index.html`.
  • •Build a container with 6 cards representing Semesters 1 through 6.
  • •Use `display: flex; flex-wrap: wrap; gap: 16px;` with cards sized at `flex: 1 1 280px;`.
  • •Inspect how resizing the browser window causes 3 columns -> 2 columns -> 1 column smoothly.
Submission Evaluation Criteria: Verify using responsive inspect mode that cards never overflow horizontally on mobile.
Exact Assignment Solution Code: pricing-cards.html

Open Visual Studio Code on your PC (code .), create pricing-cards.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 15 - Flexbox Responsive Pricing Cards</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0b1120;
      color: white;
      padding: 40px 16px;
    }
    .container {
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
    }
    h1 { font-size: 26px; color: #38bdf8; margin-bottom: 8px; }
    .subtitle { color: #94a3b8; font-size: 14px; margin-bottom: 36px; }

    /* Flexbox Container with flex-wrap and align-items: stretch */
    .card-deck {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      align-items: stretch;
    }

    .card {
      flex: 1 1 280px;
      max-width: 320px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 16px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
      transition: transform 0.25s ease, border-color 0.25s ease;
    }
    .card:hover {
      transform: translateY(-6px);
      border-color: #38bdf8;
    }
    .card.featured {
      border: 2px solid #2563eb;
      background: #172554;
    }

    .badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: bold;
      background: #2563eb;
      color: white;
      margin-bottom: 12px;
    }
    .tier-name { font-size: 20px; font-weight: bold; margin-bottom: 6px; }
    .price { font-size: 28px; font-weight: 800; color: #38bdf8; margin-bottom: 16px; }
    .price span { font-size: 13px; color: #94a3b8; font-weight: normal; }

    .features { list-style: none; margin-bottom: 24px; flex-grow: 1; }
    .features li { font-size: 13px; color: #cbd5e1; margin-bottom: 8px; }
    .features li::before { content: "✓ "; color: #10b981; font-weight: bold; }

    .btn-enroll {
      width: 100%;
      padding: 12px;
      background: #2563eb;
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      display: block;
    }
    .btn-enroll:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="container">
    <h1>BCA Specialization Learning Tracks</h1>
    <p class="subtitle">Equally sized cards using Flexbox flex-grow, flex-wrap, and stretch alignment.</p>

    <div class="card-deck">
      <div class="card">
        <div>
          <span class="badge">Track 1</span>
          <div class="tier-name">Web Development</div>
          <div class="price">Free <span>/ Semester 1</span></div>
          <ul class="features">
            <li>Semantic HTML5 & Modern CSS</li>
            <li>CSS Grid & Flexbox Layouts</li>
            <li>GitHub Pages Deployment</li>
          </ul>
        </div>
        <a href="#enroll" class="btn-enroll">Start Practice</a>
      </div>

      <div class="card featured">
        <div>
          <span class="badge">Track 2 (Most Popular)</span>
          <div class="tier-name">Full-Stack Engineer</div>
          <div class="price">Free <span>/ 360 Days</span></div>
          <ul class="features">
            <li>JavaScript ES6+ & DOM Projects</li>
            <li>React & Next.js Framework</li>
            <li>Node.js & MongoDB Backend</li>
            <li>Technical Viva Voce Mastery</li>
          </ul>
        </div>
        <a href="#enroll" class="btn-enroll">Enroll Full Track</a>
      </div>

      <div class="card">
        <div>
          <span class="badge">Track 3</span>
          <div class="tier-name">Systems & C++</div>
          <div class="price">Free <span>/ Semester 2</span></div>
          <ul class="features">
            <li>Pointers & Memory Control</li>
            <li>Data Structures & Algorithms</li>
            <li>Object-Oriented Programming</li>
          </ul>
        </div>
        <a href="#enroll" class="btn-enroll">Start Practice</a>
      </div>
    </div>
  </div>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Which CSS property vertically centers items in a standard horizontal (`flex-direction: row`) flex container?

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

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-15
Create a new project folder (day-15)
2$
cd day-15
Change working directory to day-15
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 15: Flex-wrap responsive cards, align-items cross axis centering"
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 15 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-15/ or bca-day-15/
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 15
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 15
4$
mkdir day-15
Create a new project folder (day-15)
5$
cd day-15
Change working directory to day-15
6$
# 3. Create your code file: index.html
7$
# (Write your Day 15 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 15: Flexbox Architecture 2: Align-Items, Flex-Wrap & Responsive Cards"
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-15/ 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/✨ CREATE THIS FOLDER FOR TODAY (Day 15)
└──index.htmlMust contain: align-items, flex-wrap: wrap, flex-grow, flex-shrink
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 15 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 14: Flexbox Architecture 1: Flex Container & Justify-Content first.

Complete Day 14 First
Day 14: Flexbox Architecture 1: Flex Container & Justify-Content
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal