Verse Logo
WEB Dev - Verse'26WEB - V'26
HomeSessionsAssignmentsCode ExamplesMembersLeaderboardAboutContact

Team WEB - Verse'26

Transform from absolute beginner to confident, portfolio-ready web developer in 16 weeks. Master modern web technologies through hands-on projects.

Quick Links

  • Sessions
  • Assignments
  • About
  • Contact

Resources

  • MDN Web Docs
  • W3Schools
  • GitHub
  • CodePen
© 2025 Abdelrhman Nasr. All rights reserved.
Back to Sessions
Week 7CSS Mastery
3 hours

CSS Grid - Two-Dimensional Mastery

Build complex, responsive layouts with CSS Grid

Learning Objectives

  • Understand CSS Grid model
  • Create complex 2D layouts
  • Use grid template areas
  • Build responsive grids
  • Combine Grid with Flexbox

Topics Covered

  • 1
    Grid vs Flexbox
  • 2
    Grid Terminology (tracks, cells, areas, lines)
  • 3
    Grid Template Columns and Rows
  • 4
    Fractional Units (fr) and Repeat
  • 5
    Gap Property
  • 6
    Grid Alignment (justify-content, align-content, justify-items, align-items)
  • 7
    Grid Template Areas
  • 8
    Grid Item Spanning (grid-column, grid-row)
  • 9
    Responsive Units (minmax, auto-fit, auto-fill)

Assignment

Dashboard Layout

Build a complete dashboard with sidebar navigation, top header, stats cards (using nested grid), main content area, and footer. Make it responsive using auto-fit. Complete all 28 Grid Garden levels.

Resources

  • • Grid Garden Game
  • • CSS Grid Guide
View All Assignments
Previous SessionNext Session