Final Projects and Real-World Applications

Pages:       Home, Product Listing, Product Detail, Cart, Checkout
Key Features:
  - Responsive navbar with cart badge counter
  - Product grid: 1→2→4 columns (mobile→tablet→desktop)
  - Product cards with image, rating, SALE badge, cart button
  - Product detail page: image + info layout (col-12 col-lg-6 each)
  - Cart offcanvas sliding from right
  - Checkout form with floating labels + validation
  - Responsive footer with 4-column link grid

<!-- Product Card Template -->
<div class="col-12 col-sm-6 col-lg-3">
  <div class="card h-100 border-0 shadow-sm product-card">
    <div class="position-relative">
      <img src="product.jpg" class="card-img-top" style="height:220px;object-fit:cover;" />
      <span class="badge bg-danger position-absolute top-0 end-0 m-2">-20%</span>
      <button class="btn btn-light btn-sm position-absolute top-0 start-0 m-2 rounded-circle">
        <i class="bi bi-heart"></i>
      </button>
    </div>
    <div class="card-body">
      <p class="text-muted small mb-1">Electronics</p>
      <h6 class="card-title">MacBook Pro 14"</h6>
      <div class="text-warning small">★★★★★ <span class="text-muted">(128)</span></div>
      <div class="d-flex align-items-center gap-2 mt-2">
        <span class="fw-bold fs-5">$1,599</span>
        <span class="text-muted text-decoration-line-through small">$1,999</span>
      </div>
    </div>
    <div class="card-footer border-0 bg-white pb-3">
      <div class="d-grid"><button class="btn btn-primary btn-sm"><i class="bi bi-cart-plus me-1"></i>Add to Cart</button></div>
    </div>
  </div>
</div>

Sections:    Hero, About, Skills, Projects, Experience, Contact
Key Features:
  - Fixed dark navbar with smooth-scroll links
  - Full-viewport hero with gradient background
  - About: photo + bio in 2-column layout
  - Skills: progress bars with Bootstrap's progress component
  - Projects: card grid with GitHub/Live links
  - Experience: accordion timeline
  - Contact: floating label form with map embed (ratio ratio-16x9)

<!-- Skills Progress Bars -->
<div class="mb-3">
  <div class="d-flex justify-content-between mb-1">
    <span class="fw-medium">HTML & CSS</span><span>95%</span>
  </div>
  <div class="progress" style="height: 8px;">
    <div class="progress-bar bg-primary" style="width: 95%;"></div>
  </div>
</div>
<div class="mb-3">
  <div class="d-flex justify-content-between mb-1">
    <span class="fw-medium">Bootstrap 5</span><span>90%</span>
  </div>
  <div class="progress" style="height: 8px;">
    <div class="progress-bar bg-success" style="width: 90%;"></div>
  </div>
</div>

Sections:    Hero, Menu, Features, About, Reservations, Footer
Key Features:
  - Full-width hero carousel with food photography
  - Menu section: tab-based (Starters, Mains, Desserts) using Bootstrap tabs
  - Feature icons row (3-column)
  - Reservation form in a card (form-floating inputs)
  - Responsive footer with social links

<!-- Bootstrap Tabs for Menu -->
<ul class="nav nav-tabs justify-content-center mb-4" id="menuTab">
  <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#starters">Starters</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mains">Main Course</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#desserts">Desserts</button></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="starters">
    <div class="row g-3">
      <!-- Menu item cards -->
    </div>
  </div>
  <div class="tab-pane fade" id="mains">...</div>
  <div class="tab-pane fade" id="desserts">...</div>
</div>

Pages:       Dashboard, Users, Orders, Analytics, Settings
Key Features:
  - Fixed sidebar with collapsible mobile toggle
  - Sticky topbar with notification bell + user dropdown
  - 4 KPI stat cards with trend indicators
  - Revenue chart area (Chart.js)
  - Recent orders data table with badges and action buttons
  - Quick actions modal
  - Settings page with form sections and switch toggles

Pages:       Blog Home, Article Page, Category, Author Profile
Key Features:
  - Featured article: large card (col-12)
  - Article grid: col-12 col-md-6 col-lg-4
  - Sidebar (col-lg-4) with recent posts, categories, tags
  - Single article: content (col-lg-8) + sticky sidebar (col-lg-4)
  - Author card with avatar and bio
  - Breadcrumb navigation
  - Pagination at bottom of listing
  - Tags as rounded-pill badges

<!-- Blog Card -->
<article class="card h-100 border-0 shadow-sm">
  <img src="blog-img.jpg" class="card-img-top" style="height:200px;object-fit:cover;" />
  <div class="card-body">
    <div class="d-flex gap-2 mb-2">
      <span class="badge rounded-pill bg-primary">Technology</span>
      <span class="badge rounded-pill bg-light text-dark">5 min read</span>
    </div>
    <h5 class="card-title">Article Title Goes Here</h5>
    <p class="card-text text-muted small">Article excerpt shows the first 100–150 characters of content...</p>
  </div>
  <div class="card-footer border-0 bg-white pb-3 d-flex align-items-center gap-2">
    <img src="author.jpg" class="rounded-circle" width="28" />
    <span class="small text-muted">Jane Doe · May 18, 2026</span>
    <a href="#" class="ms-auto btn btn-sm btn-outline-primary">Read →</a>
  </div>
</article>

Sections:    Navbar, Hero, Logos, Features, Demo Video, Pricing, FAQ, CTA, Footer
Key Features:
  - Glassmorphism hero with animated gradient
  - Social proof: logo strip (brand logos) with opacity
  - 3-feature section with icons, illustrations side-by-side
  - Demo: embedded YouTube with ratio ratio-16x9
  - Pricing: 3 cards with toggle (monthly/annual) via Bootstrap switch
  - FAQ: Bootstrap accordion
  - CTA: full-width gradient section with email input group
  - Footer: 4-column links + newsletter

<!-- Pricing Toggle (Monthly/Annual) -->
<div class="d-flex align-items-center justify-content-center gap-3 mb-5">
  <span>Monthly</span>
  <div class="form-check form-switch mb-0">
    <input class="form-check-input" type="checkbox" id="billingToggle" />
    <label class="form-check-label" for="billingToggle"></label>
  </div>
  <span>Annual <span class="badge bg-success rounded-pill">Save 20%</span></span>
</div>

<!-- FAQ Accordion -->
<div class="accordion" id="faqAccordion">
  <div class="accordion-item border-0 mb-2 shadow-sm rounded-3 overflow-hidden">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">
        How does the free trial work?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
      <div class="accordion-body text-muted">
        You get full access for 14 days. No credit card required. Cancel any time.
      </div>
    </div>
  </div>
</div>

Phase 1 — Foundations (Chapters 1–6)
  ✅ Grid system, typography, colors, spacing
  → Build: Simple responsive webpage

Phase 2 — Components (Chapters 7–14)
  ✅ Buttons, forms, tables, cards, navbar, modals, carousel
  → Build: Portfolio Website (Project 2)

Phase 3 — Advanced Layout (Chapters 15–17)
  ✅ Flexbox utilities, icons, responsive design
  → Build: Restaurant Landing Page (Project 3)

Phase 4 — Professional (Chapters 18–20)
  ✅ Admin dashboards, interview prep
  → Build: Admin Dashboard (Project 4) + SaaS Page (Project 6)