Path

1. Basic Layout Concepts

   • Display Properties
     • block
     • inline
     • inline-block
     • none

2. Box Model

   • Content
   • Padding
   • Border
   • Margin
   • Box-sizing

3. Positioning Systems

   • static
   • relative
   • absolute
   • fixed
   • sticky

4. Flexbox Layout

   • flex-direction
   • justify-content
   • align-items
   • flex-wrap
   • flex-grow/shrink/basis
   • gap

5. Grid System

   • grid-template-columns/rows
   • grid-gap
   • grid-area
   • grid-auto-flow
   • fr units

6. Common Layout Patterns

   • Horizontal centering
   • Vertical centering
   • Equal height columns
   • Multi-column layouts
   • Holy Grail Layout
   • Double Wing Layout

7. Responsive Web Design (RWD)

   • Media Queries
   • Viewport
   • rem/em units
   • Breakpoints
   • Responsive images

8. Advanced Layout Techniques

   • CSS Transform
   • CSS Animation
   • Clip-path
   • Shape-outside
   • Multi-column Layout

9. Practical Projects

   • Landing Page
   • Dashboard
   • Blog Layout
   • Product Grid
   • Portfolio Gallery
   • Form Layout

10. Modern Layout Features

    • CSS Container Queries
    • CSS Subgrid
    • CSS Masonry
    • CSS Logical Properties
    • CSS Layers