NS
Guest Mode:

BCA Student Stories & UpdatesLive

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

Flexbox Architecture 1: Flex Container & Justify-Content

CSS Flexbox revolutionized web design by providing a predictable, 1-dimensional layout system that automatically distributes space and aligns items along an axis.

Interactive Learning Roadmap

Day 14 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Understand the 1-dimensional Flexible Box (Flexbox) layout model.
✔Differentiate between the Main Axis and Cross Axis.
✔Use `display: flex` to align elements horizontally with zero float hacks.
✔Master `justify-content` alignment modes: center, space-between, space-around, space-evenly.
Day 14 MasterclassCSS Layouts

Flexbox Architecture 1: Flex Container & Justify-Content — Comprehensive Practical Guide

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

Real-World Purpose Aur Zaroorat

CSS Flexbox revolutionized web design by providing a predictable, 1-dimensional layout system that automatically distributes space and aligns items along an axis.

display: flex: Applied to the parent container, transforming all direct children into flex items.
flex-direction: Sets the main axis (row is horizontal left-to-right, column is vertical top-to-bottom).
justify-content: Distributes items along the MAIN axis.
justify-content: space-between pushes first item to start, last item to end, and spaces the rest evenly.
gap: Replaces old margin hacks by setting clean gutters between flex children.
Dimaag Mein Bithane Ka Model

"Imagine books on a shelf: Flexbox lets you push them to the left, center them, or spread them out with equal breathing room automatically."

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

👨‍🏫3. Teacher Demonstration Code

Logo on the left, navigation links on the right, perfectly spaced.

Modern Header Bar with space-betweenhtml
<style>
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #000000;
    color: #ffffff;
  }
  .nav-links {
    display: flex;
    gap: 16px;
  }
</style>
<header class="navbar">
  <div class="logo"><strong>NextSem</strong></div>
  <nav class="nav-links">
    <span>Lessons</span>
    <span>Practicals</span>
    <span>Profile</span>
  </nav>
</header>

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
1Create Project Folder & Open in VS Code

Open ⊞ Windows Terminal or Command Prompt on your PC and execute:

Windows 11 Terminal / PowerShell
1$
mkdir bca-day-14
Create a new project folder (bca-day-14)
2$
cd bca-day-14
Change working directory to bca-day-14
3$
code .
Launch this folder immediately in Visual Studio Code
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)

💡 Tip: The command code . immediately opens the new project folder inside Visual Studio Code.

2Create index.html & Paste Starter Template

In VS Code Explorer (Ctrl + Shift + E), click New File, name it index.html, and paste this base template:

index.htmlhtml
<style>
  .app-header {
    /* Apply display: flex and justify-content: space-between */
    background: #2563eb;
    color: white;
    padding: 14px 20px;
  }
  .header-actions {
    /* Apply display: flex and gap: 16px */
  }
</style>
<div class="app-header">
  <div class="brand">NextSem BCA</div>
  <div class="header-actions">
    <button>Home</button>
    <button>Profile</button>
  </div>
</div>
3Implement Practical Tasks in VS Code (Checklist)
0 / 2 Checked
Task 1

Activate Flexbox on Header

Add `display: flex;` and `justify-content: space-between;` to .app-header.

Syntax / Hint: Write display: flex; justify-content: space-between; in .app-header.
Task 2

Add Flex Gap to Actions

Add `display: flex;` and `gap: 16px;` to .header-actions.

Syntax / Hint: Write display: flex; gap: 16px; inside .header-actions.
4Test & Preview Locally on Your PC
  • Right-click index.html in VS Code and select "Open with Live Server".
  • Alternatively, open File Explorer, navigate to bca-day-14, and double-click index.html to view in Google Chrome or Edge.
  • Verify all elements and styles look correct in the browser before pushing!
Code Complete in VS Code? Next Step:After implementing and verifying your code in VS Code, proceed to Step 3 (Bug Hunt) and Step 4 (Viva Check) before executing git push in Step 5!
Interactive Bug Detective

Spot the Bug: justify-content Applied to Children Instead of Container

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

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
<div class="header">
2
<div class="logo" style="justify-content: space-between;">Logo</div>
3
<div class="nav">Links</div>
4
</div>
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

justify-content is a FLEX CONTAINER property. It must be applied to the parent element (.header), not to an individual child item.

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

📝Independent Practice: Assignment

📄 flex-navbar.html

Homework Task: Social Media Share Toolbar

  • •Create folder `day-14` with `index.html`.
  • •Create a toolbar containing 4 buttons (WhatsApp, LinkedIn, GitHub, Copy Link).
  • •Use `display: flex; justify-content: center; gap: 12px;` to center all buttons perfectly.
  • •Add hover background color changes to each button.
Submission Evaluation Criteria: Inspect in Chrome DevTools to ensure gap spacing is active and zero margin hacks are used.
Exact Assignment Solution Code: flex-navbar.html

Open Visual Studio Code on your PC (code .), create flex-navbar.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 14 - Flexbox Navigation Bar</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #0b1120;
      color: #f8fafc;
    }
    
    /* 1. Flexbox Navigation Header */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 32px;
      background: #1e293b;
      border-bottom: 1px solid #334155;
    }
    
    .logo {
      font-size: 18px;
      font-weight: 800;
      color: #38bdf8;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    /* 2. Flex Navigation Links */
    .nav-links {
      display: flex;
      list-style: none;
      gap: 24px;
    }
    
    .nav-links a {
      color: #cbd5e1;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      transition: color 0.2s ease;
    }
    .nav-links a:hover { color: #38bdf8; }
    
    .btn-cta {
      padding: 8px 18px;
      background: #2563eb;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: bold;
      transition: background 0.2s ease;
    }
    .btn-cta:hover { background: #1d4ed8; }

    .hero {
      max-width: 800px;
      margin: 60px auto;
      text-align: center;
      padding: 0 16px;
    }
    .hero h1 { font-size: 32px; color: white; margin-bottom: 12px; }
    .hero p { color: #94a3b8; font-size: 16px; }
  </style>
</head>
<body>
  <nav class="navbar">
    <a href="#" class="logo">🚀 BCA DevPortal</a>
    <ul class="nav-links">
      <li><a href="#curriculum">Curriculum</a></li>
      <li><a href="#practicals">Practicals</a></li>
      <li><a href="#viva">Viva Bank</a></li>
      <li><a href="#github">GitHub</a></li>
    </ul>
    <a href="#login" class="btn-cta">Student Login</a>
  </nav>

  <div class="hero">
    <h1>Modern CSS Flexbox Navigation</h1>
    <p>Using display: flex with justify-content: space-between to evenly distribute brand logo, nav links, and CTA button.</p>
  </div>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What is the default direction of the main axis in a CSS Flexbox container?

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

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-14
Create a new project folder (day-14)
2$
cd day-14
Change working directory to day-14
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 14: Flexbox main axis alignment, space-between navbars and gap property"
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 14 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-14/ or bca-day-14/
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 14
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 14
4$
mkdir day-14
Create a new project folder (day-14)
5$
cd day-14
Change working directory to day-14
6$
# 3. Create your code file: index.html
7$
# (Write your Day 14 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 14: Flexbox Architecture 1: Flex Container & Justify-Content"
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-14/ 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/✨ CREATE THIS FOLDER FOR TODAY (Day 14)
└──index.htmlMust contain: display: flex, flex-direction, justify-content, gap
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 14 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 13: CSS Positioning: Static, Relative, Absolute & Fixed first.

Complete Day 13 First
Day 13: CSS Positioning: Static, Relative, Absolute & Fixed
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal