iDevMeet

Web Development · module 4 of 13

Flexbox, Grid & Positioning

Organize interfaces with Flexbox, Grid, named areas, positioning, stacking contexts, and sensible alignment.

Course map
flex-direction: rowmain axis → justify-contentcross axis ↕ align-itemsflex-direction: columnmain axis is vertical nowThe axes swap with the direction — which is why the same justify-content spreads items sideways inone layout and downwards in the other. Learn where the axis points, not the property names.
Flexbox, Grid & Positioning — the idea in one picture

What this module covers

5 steps · Web Development

  1. Step 1. Lesson: Flexbox, Grid & Positioning

    Organize interfaces with Flexbox, Grid, named areas, positioning, stacking contexts, and sensible alignment. Learning objectives - Recognize when flexbox, grid & positioning is the right tool. - Explain the role of display, grid, gap. - Build a small working example before combining it with a larger interface. - Identify one accessibility, maintainability, or error-handling improvement. Read the example, predict what it will do, then complete the small change described in the check question.

    Organize interfaces with Flexbox, Grid, named areas, positioning, stacking contexts, and sensible alignment. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Use the example to demonstrate flexbox, grid & positioning.

  2. Step 2. Quiz: Flexbox, Grid & Positioning

    Check your understanding of Flexbox, Grid & Positioning.

    CSS Grid controls two-dimensional rows and columns directly. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Complete the knowledge check.

  3. Step 3. Exercise: Flexbox, Grid & Positioning

    Create a two-column dashboard that becomes one column on narrow screens.

    This exercise turns the Flexbox, Grid & Positioning lesson into a working code change. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the solution use display and grid and gap?

  4. Step 4. Review lab: Explain & improve Flexbox, Grid & Positioning

    Rebuild the exercise without copying the solution. Then improve it in two ways: make the code easier to understand and add one useful edge case, responsive behavior, accessibility improvement, or error state. Finally, write a short explanation of how display, grid, gap work together.

    Rebuilding from memory and improving an edge case turns recognition into durable skill. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the improved version still use display, grid, gap clearly?

  5. Step 5. Mini project: Flexbox, Grid & Positioning

    Build a responsive application shell with header, sidebar, content grid, sticky utility panel, and layered notification badge.

    The mini project combines the module lesson, quiz, and exercise into one portfolio-ready result. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the project apply the module's flexbox, grid & positioning skills?

Loading code lab...