CSS turns structured markup into a usable interface. Start with predictable layout rules before adding advanced effects and animations.
What you will learn
CHAPTER 01
The CSS box model
Element width includes content, padding and borders depending on box-sizing. A global border-box rule simplifies sizing across layouts.
*,*::before,*::after { box-sizing: border-box; }
.card { padding: 1rem; border: 1px solid #ddd; }CHAPTER 02
Flexible rows and columns
Flexbox is ideal for one-dimensional alignment, while grid makes two-dimensional layouts straightforward. Use gap instead of repeated child margins.
.nav { display:flex; align-items:center; gap:1rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }CHAPTER 03
Responsive design
Start with layouts that can shrink naturally. Add breakpoints when a layout genuinely needs adjustment, not just because a device has a familiar width.
@media (max-width: 720px) {
.split-layout { grid-template-columns: 1fr; }
}Practice the concepts
Use a related utility to experiment, check examples, and build a small project.
Open HTML live preview ↗