Codelab: Block & Inline Experiment
See block and inline elements in action — add backgrounds, toggle display values, and inspect with DevTools.
Set up your project
In this codelab, you're going to run a hands-on experiment to answer one of the most important questions in CSS: what's the difference between block and inline elements? Instead of just reading about it, you'll build a page with both types, paint them with colors so you can *see* how they behave, and then flip their display values to watch them transform. By the end, you'll have a gut-level understanding of how block and inline work — the kind of intuition you can only build by experimenting.
Before we start experimenting, we need a project folder with two files. Open a terminal by pressing Ctrl + Alt + T on Linux, then type the following commands one at a time, pressing Enter after each:
- mkdir ~/display-lab — This creates a new folder called display-lab in 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 ~/display-lab — This moves you into the folder you just created. cd stands for "change directory." From now on, any files you create will land inside display-lab.
- touch index.html style.css — This creates two empty files. touch creates a file if it doesn't already exist. We need index.html for our HTML structure and style.css for our visual styles.
- code . — This opens VS Code with the current folder loaded. The . (dot) means "the folder I'm currently in." VS Code will open and show your two new files in the sidebar.
Your project is ready — two empty files waiting for code.