Learn how the browser arranges elements. Master block, inline, flexbox, and CSS grid to build real page layouts.
Understand how the browser lays out elements by default — top to bottom, left to right.
Learn the two fundamental display types — block elements stack, inline elements flow.
The best of both worlds — elements that flow inline but respect width and height.
Two ways to hide elements — display: none removes them, visibility: hidden makes them invisible.
Master one-dimensional layout — align, distribute, and reorder elements with flexbox.
Build two-dimensional layouts with rows and columns using CSS Grid.
Combine everything you've learned to build a complete dashboard with header, sidebar, cards, and hidden panels.
See block and inline elements in action — add backgrounds, toggle display values, and inspect with DevTools.
Build a navigation bar with inline-block pills — styled, spaced, and polished.
Toggle element visibility with CSS classes — compare display: none and visibility: hidden.
Build a professional navigation bar from scratch using flexbox — logo, links, and spacing.
Build a horizontal card layout with flexbox — wrapping, spacing, and responsive sizing.
Create a responsive photo gallery with CSS Grid — columns, gaps, and auto-fit for any screen size.
