Web foundations lab

Layout and responsive

Flex, grid, responsive constraints, media queries, and wrapping.

Track progress 0/120 lessons 0/18 missions 12 courses
0%
Continue View profile
01 Layout and responsive Layout and responsive: Flexible rows

Build flexible rows inside the persistent Volunteer check-in: Flexible rows starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
02 Layout and responsive Layout and responsive: Wrapping navigation

Build wrapping navigation inside the persistent Local event guide: Wrapping navigation starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
03 Layout and responsive Layout and responsive: Two-column grid

Build two-column grid inside the persistent Study group board: Two-column grid starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
04 Layout and responsive Layout and responsive: Repeatable card grid

Build repeatable card grid inside the persistent Public resource hub: Repeatable card grid starter project.

Core 10 minutes · flex, grid, gap, minmax, @media, wrap
05 Layout and responsive Layout and responsive: Minmax tracks

Build minmax tracks inside the persistent Creative portfolio: Minmax tracks starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
06 Layout and responsive Layout and responsive: Stable gaps

Build stable gaps inside the persistent Course dashboard: Stable gaps starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
07 Layout and responsive Layout and responsive: Intrinsic sizing

Build intrinsic sizing inside the persistent Service status page: Intrinsic sizing starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
08 Layout and responsive Layout and responsive: Content-width constraints

Build content-width constraints inside the persistent Project launch page: Content-width constraints starter project.

Core Checkpoint 10 minutes · flex, grid, gap, minmax, @media, wrap
09 Layout and responsive Layout and responsive: Responsive images

Build responsive images inside the persistent Accessible recipe: Responsive images starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
10 Layout and responsive Layout and responsive: Mobile media query

Build mobile media query inside the persistent Reading list: Mobile media query starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
11 Layout and responsive Layout and responsive: Desktop media query

Build desktop media query inside the persistent Support center: Desktop media query starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
12 Layout and responsive Layout and responsive: Source order

Build source order inside the persistent Team directory: Source order starter project.

Core 10 minutes · flex, grid, gap, minmax, @media, wrap
13 Layout and responsive Layout and responsive: Overflow prevention

Build overflow prevention inside the persistent Field notes: Overflow prevention starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
14 Layout and responsive Layout and responsive: Responsive layout checkpoint

Build responsive layout checkpoint inside the persistent Civic calendar: Responsive layout checkpoint starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
Snippet coverage

Patterns you will practice here.

@media

Adapt layout at smaller viewports.