Codelab 1: Padding a Quote Box

Before we write any code, we need a place to put our files. We'll use the terminal — a text-based way to give commands to your computer. Think of it like texting instructions to your computer instead of clicking around with a mouse.

Open a terminal by pressing Ctrl + Alt + T on Linux. You'll see a blinking cursor waiting for your commands. Now type the following commands one at a time, pressing Enter after each one:

• mkdir ~/box-model-lab — This creates a new folder called box-model-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 ~/box-model-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 box-model-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 web 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.