Week 4: Developer Tools Practice

Box Model & Colors

Interactive Learning Exercise

Your Progress

100%

11 / 11 Tasks Completed

🔧 Before You Start - Important Setup!

Recommended Workflow for This Exercise:

  1. Download this file to your computer (if you haven't already)
  2. Open it in Firefox browser
  3. Open Firefox Developer Tools:
    • Windows/Linux: Press F12 or Ctrl + Shift + I
    • Mac: Press Fn + F12 or Cmd + Option + I
  4. Split your screen: Keep DevTools open on one side while you work through exercises
  5. Type your answers in the text boxes as you complete each task
  6. Click "Check Answer" after completing each exercise section
  7. When finished, click the green "Download Completed File" button at the bottom to save your work!

💡 Pro tip: This exercise is designed to be hands-on. You'll learn by doing!

⚠️ IMPORTANT:

• Your answers save automatically as you type (as a backup)

• After completing all tasks, use the Download button at the bottom to save your completed file

• Submit the downloaded file to Canvas for grading

1 Opening Developer Tools

Let's Start!

First, open the Firefox Developer Tools using one of these methods:

  • Press F12 (Windows/Linux) or Fn + F12 (Mac)
  • Right-click anywhere on this page → Select "Inspect Element"
  • Click the Firefox menu (≡) → More Tools → Web Developer Tools
✓ Completed

2 Using the Inspector Tab

Explore the Inspector

The Inspector tab shows you the HTML structure of the page. Let's practice!

  1. Make sure the Inspector tab is selected in DevTools
  2. Click the "Pick an element" button (looks like a cursor arrow) or press Ctrl + Shift + C
  3. Hover over the purple header at the top of this page
  4. Click on it to inspect it
✓ Completed

3 Understanding the Box Model

Every element on a web page is a box! The CSS Box Model has four main parts:

Inspect this box! 🔍
Look at its padding, border, and margin in DevTools

Practice: Inspecting the Box Model

  1. Use the Inspector tool to click on the box above that says "Inspect this box!"
  2. In the Inspector panel, look for the Box Model diagram (usually on the right side)
  3. The Box Model shows the dimensions of the element in colored sections
✓ Completed

4 Experimenting with Border

Change my border! 🎨

Live Editing: Border Properties

  1. Inspect the box above
  2. In the Inspector's CSS rules panel (right side), find the border property
  3. Click on the border value and try changing it to different values like:
    • 5px solid red
    • 10px dotted blue
    • 3px double green
✓ Completed

5 Playing with Padding

Adjust my padding! 📏

Understanding Padding

  1. Inspect the box above
  2. Find the padding property in the CSS panel
  3. Try changing the padding to different values (e.g., 50px, 5px, 100px)
  4. Watch how the box grows or shrinks!
✓ Completed

6 Margin Magic

Play with my margin! 🎪

Exploring Margins

  1. Inspect the box above
  2. Find the margin property
  3. Try these experiments:
    • Change margin to 0
    • Change margin to 50px
    • Try negative margin like -20px
✓ Completed

7 Working with Colors

CSS supports multiple ways to write colors!

Red Box
Teal Box
Blue Box
Green Box
Yellow Box

Inspect Colors

  1. Inspect each colored box above
  2. Look at the background-color property for each box
  3. Notice they all use HEX color codes (start with #)
✓ Completed

8 Different Color Formats

Changing Color Formats

CSS supports several color formats:

  • Named colors: red, blue, coral
  • HEX: #FF6B6B
  • RGB: rgb(255, 107, 107)
  • HSL: hsl(0, 100%, 71%)
  1. Inspect the Red Box from the previous section
  2. Click on the color swatch (colored square) next to the HEX code
  3. A color picker will appear
  4. At the top of the color picker, you can switch between formats
✓ Completed

9 Gradients

Inspecting Gradients

  1. Inspect the purple gradient box above
  2. Find the background property
  3. Notice it uses linear-gradient()
  4. Try changing the colors or the angle!
✓ Completed

10 Create Your Own Style

Style me however you want! 🎨

Creative Challenge!

Use DevTools to change the box above. Try to change:

  • Background color
  • Border style and color
  • Padding
  • Margin
  • Text color
✓ Completed

📝 Reflection Questions

Think About What You Learned

✓ Completed

🎓 Certificate of Completion

Firefox Developer Tools Practice - Week 4

Student Progress Summary

Progress

100%

11 / 11 Tasks Completed ✓

Skills Mastered:

  • ✓ Understanding the CSS Box Model
  • ✓ Inspecting Border, Padding, and Margin
  • ✓ Working with Color Formats (Named, Hex, RGB, HSL)
  • ✓ Using Firefox Developer Tools Inspector
  • ✓ Live CSS Editing and Experimentation

📸 For Submission: Don't forget to download your completed file using the button below!

Date Completed: Thursday, April 23, 2026

Course: DESN368 Web Design 1 - Week 4

💾 Save Your Work

Click the button below to download a copy of this file with all your answers saved!

This will save a new HTML file with all your answers embedded. You can open it anytime or submit it to Canvas!

💡 The downloaded file will be named: week4-devtools-completed-YYYY-MM-DD.html