← Week 4
DESN 368

CSS Foundations from The Odin Project

Week 4 · P&E · 10 pts

Important

Do these exercises in Codespaces, not CodePen. You’ll download the exercise files, add them to your repo, and edit them directly. Commit after each exercise.

Step 1

Download the Exercise Files

  1. Download this zip file: week-4-1.zip
  2. Unzip the file on your computer
Done When

You have a wk4-css-foundations-lvl-1 folder on your computer with exercise folders inside it.

Step 2

Add the Files to Your Repo

  1. Open your repo in Codespaces
  2. In the file explorer, navigate to your week-4/ folder
  3. Drag and drop the unzipped wk4-css-foundations-lvl-1 folder from your computer into the week-4/ folder in Codespaces
  4. Read the README.md Inside the folder for full instructions

Your folder structure should look like this:

week-4/ └── wk4-css-foundations-lvl-1/ ├── README.md ├── intro-to-css/ │ ├── 01-css-methods/ │ ├── 02-class-id-selectors/ │ ├── 03-grouping-selectors/ │ ├── 04-chaining-selectors/ │ └── 05-descendant-combinator/ └── cascade/ └── 01-cascade-fix/
Done When

You can see the exercise folders inside week-4/wk4-css-foundations-lvl-1/ in Codespaces.

Step 3

Complete the Exercises in Order

For each exercise: read the README, look at the desired-outcome.png, then edit the index.html and style.css files directly in Codespaces.

Intro to CSS

  1. 01-css-methods — Methods for adding CSS (inline, internal, external)
  2. 02-class-id-selectors — Class and ID selectors
  3. 03-grouping-selectors — Grouping selectors
  4. 04-chaining-selectors — Chaining selectors
  5. 05-descendant-combinator — Descendant combinator

Cascade

  1. 01-cascade-fix — Specificity and rule order

Solutions are in each exercise’s solution/ folder — don’t peek until you’ve finished!

Step 4

Commit Your Work

After each exercise, commit with a clear message:

  1. Open Source Control (Ctrl+Shift+G / Cmd+Shift+G)
  2. Stage your changed files with the + button
  3. Write a commit message like:
Complete exercise 02 — class and ID selectors
  1. Click the checkmark (✓) to commit
  2. Push when you’re done for the day with Sync Changes
Done When

All 6 exercises are completed and committed to your repo. Your commit history shows your progress through each exercise.

Submission

Submit your GitHub repo URL. Your completed exercises should be visible in the commit history.