PNL Learn

CSS Layout and Responsive Design

Flexbox, Grid and responsive layouts that work on every screen.

Lay out real pages the way professional front end teams do. You will predict how block and inline boxes flow, float an image beside text and contain it, position badges, sticky headers and overlays and control their stacking, build navigation bars, card rows and centered panels with flexbox, and define whole page layouts with grid tracks, fr units, minmax(), auto-fit and named areas. Then you will make every layout responsive: mobile first media queries at breakpoints the content chooses, fluid type with clamp(), container queries, zoom that is never disabled and pages that reflow to 320 pixels without sideways scrolling. Every exercise is graded on the real geometry a browser lays out, at phone, tablet and desktop widths. The course ends with a product landing page, a full page layout, an auto-fitting photo gallery and a navigation bar that collapses into a column.

IntermediateHTML and CSS7 lessons71 exercisesAbout 5.5 h
Create a free account

What you will learn

  • Normal flow and display
  • Floats
  • Positioning and z-index
  • Flexbox
  • CSS Grid
  • Media and container queries
  • Fluid type
  • Reflow and zoom

Lessons

  1. 1

    Normal Flow, Display and Floats

    How block and inline boxes flow, what display really sets, floating an image beside text, and containing and clearing floats.

    10 exercises

  2. 2

    Positioning and Stacking

    Relative, absolute, fixed and sticky positioning, the containing block and inset, z-index and stacking contexts, and sticky headers that never hide what you land on.

    11 exercises

  3. 3

    Flexbox

    Main and cross axes, justify and align, gap and wrapping, flex-grow, flex-shrink and flex-basis, what flex: 1 really means, the min-width trap, order versus source order, and centering.

    11 exercises

  4. 4

    Grid

    Tracks with fr, repeat() and minmax(), auto-fit versus auto-fill, the implicit grid, and placing items by line numbers and by named areas.

    10 exercises

  5. 5

    Responsive Design

    Mobile first media queries at content breakpoints, fluid type with clamp(), container queries, zoom that is never disabled, and reflow to 320 pixels.

    11 exercises

  6. 6

    Debugging CSS and Choosing a Layout

    DevTools' box model pane, flex and grid overlays and device mode, reading the CSS validator, diagnosing layout bugs, choosing flexbox or grid, and where frameworks and preprocessors fit.

    12 exercises

  7. 7

    Putting It Together

    Four layouts from a brief: a navigation bar that collapses into a column, an auto-fitting photo gallery, a header, sidebar, main and footer page, and a responsive product landing page.

    6 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

  • Code exercise: 19
  • Fix the bug: 18
  • Type the answer: 9
  • Multiple choice: 6
  • Predict the output: 5
  • Fill in the blank: 5
  • Match the pairs: 4
  • Spot the bug: 2
  • Reorder lines: 2
  • Select all that apply: 1

Aligned to

CS2023ACM / IEEE-CS / AAAISource
  • Specialized Platform Development
    • SPD-WebWeb Platforms
MDN Curriculum (core)MozillaSource
  • CSS fundamentals
    • 3.10Debugging CSS
  • CSS layout
    • 5.1Introduction to CSS layout
    • 5.2Floats
    • 5.3Positioning
    • 5.4Modern layout
    • 5.5Responsive design
WCAG 2.2 Level A and AAW3CSource
  • Perceivable
    • 1.3.2Meaningful Sequence
    • 1.3.4Orientation
    • 1.4.4Resize Text
    • 1.4.10Reflow
  • Operable
    • 2.4.11Focus Not Obscured (Minimum)

Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, Mozilla and W3C. Exam names are trademarks of their owners.