Codelab: Flexbox Card Row
Build a horizontal card layout with flexbox — wrapping, spacing, and responsive sizing.
Set up your project
Card layouts are one of the most common patterns on the web. Stripe's pricing page, Vercel's feature grid, Medium's article feed — they all use cards arranged in flexible rows. In this codelab, you'll build a card row that wraps responsively, like a real product page. By the end, you'll understand how flexbox turns a stack of elements into a flowing, responsive grid.
Open a terminal by pressing Ctrl + Alt + T on Linux. Type the following commands one at a time, pressing Enter after each one:
- mkdir ~/flex-cards-lab — Creates a new folder called flex-cards-lab inside your home directory. mkdir stands for "make directory" (a directory is just another word for folder). The ~ symbol is a shortcut that means "my home folder" — so the new folder lands right inside your personal files.
- cd ~/flex-cards-lab — Moves you into the new folder so any files you create land here. cd stands for "change directory." From now on, any files you create will land inside flex-cards-lab.
- touch index.html style.css — Creates two empty files: one for the HTML structure and one for CSS styles. touch creates a file if it doesn't already exist.
- code . — Opens VS Code with the current folder loaded. The dot means "this folder." VS Code will open and show your two new files in the sidebar.
Your project is ready. You should see index.html and style.css in the VS Code sidebar. These two files are all you need — no build tools, no frameworks, just plain HTML and CSS opened directly in a browser.