Codelab: Inline-Block Nav Pills
Build a navigation bar with inline-block pills — styled, spaced, and polished.
Set up your project
In this codelab, you'll build a navigation bar like the ones on GitHub, Notion, or Slack — where links sit side by side as styled pills. Every major website has one: a horizontal row of clickable items at the top of the page that lets users jump between sections. By the end of this exercise, you'll have built a complete, polished nav bar from scratch using the inline-block technique, and you'll understand *why* inline-block is needed here (and not just inline or block).
Let's set up the project. Open a terminal (Ctrl + Alt + T on Linux) and type the following commands one at a time, pressing Enter after each:
- mkdir ~/nav-pills-lab — Creates a new folder called nav-pills-lab in your home directory. mkdir stands for "make directory." The ~ symbol is a shortcut that means "my home folder" — so the new folder lands right inside your personal files.
- cd ~/nav-pills-lab — Moves you into the new folder. cd stands for "change directory." From now on, any files you create will land inside nav-pills-lab.
- touch index.html style.css — Creates two empty files: one for 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 workspace is ready. You should see index.html and style.css in the VS Code sidebar.