Codelab: Flexbox Navigation Bar

Every website has a navigation bar. GitHub, YouTube, Amazon, Netflix, Wikipedia — all of them use flexbox to build their top bars. The navigation bar is often the very first thing a user sees and interacts with, and it's one of the most common UI patterns on the entire web. In this codelab, you'll build one from scratch, understanding exactly why each CSS property is needed and how it contributes to the final result.

Before we write any code, we need a place to put our files. Open a terminal by pressing Ctrl + Alt + T on Linux. You'll see a blinking cursor waiting for your commands. Type the following commands one at a time, pressing Enter after each one:

• mkdir ~/flexbox-nav-lab — This creates a new folder called flexbox-nav-lab. 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 ~/flexbox-nav-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 flexbox-nav-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 page 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.

That's it — your project is ready! You now have a folder with two empty files, and VS Code is open and waiting for you to start coding. By the end of this codelab, you'll have a professional-looking navbar that uses the exact same CSS techniques as the sites you visit every day.