Codelab 1: Padding a Quote Box
Build a styled quote box in VS Code — learn padding hands-on.
Set up your project
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.
If you don't have VS Code installed, use any text editor you have — gedit, nano, Kate, or even Mousepad. The important thing is that you save plain text files with the correct file extensions (.html and .css). Don't use a word processor like LibreOffice Writer — it adds invisible formatting that browsers can't read.