Codelab 2: Card with Border & Spacing

Add borders and margins to create spaced-out card layouts.

Step 1 of 7

Open your project

Let's pick up where Codelab 1 left off and build something new: a set of styled cards with borders and spacing.

Open your terminal by pressing Ctrl+Alt+T. Navigate to your project folder:

cd ~/box-model-lab

Then open it in VS Code:

code .

If you're starting fresh and didn't do Codelab 1, create the folder and files first:

mkdir ~/box-model-lab && cd ~/box-model-lab touch index.html style.css code .

Once VS Code opens, you should see your index.html and style.css files in the left sidebar. We'll update both of these in the following steps.

Tip

If you completed Codelab 1, your project folder already exists with your quote box code. We'll replace it with cards in the next step — but your setup is already done.

THE CSS BOX MODEL

margin

border

padding

content

Content

Padding

Border

Margin