🔧 Firefox Developer Tools Practice

Box Model & Color Values

Week 4

🦊 About Firefox Developer Tools

This is a Firefox Developer Tools tutorial. While Chrome, Safari, and other browsers have developer tools, Firefox Developer Edition has the best tools for learning web development!

📥 Download Firefox Developer Edition: www.firefox.com/en-US/firefox/developer/

Firefox Developer Edition is specifically designed for web developers and includes enhanced developer tools, experimental features, and better CSS debugging capabilities.

📚 Essential Resources

Your Progress

100%

Complete: 11 / 11 tasks

💾 Your answers are auto-saved as you type!

🚀 Getting Started: How to Use Firefox Developer Tools

Instructions for This Exercise

  1. Make sure you're using Firefox Developer Edition (download link above if you haven't already!)
  2. Download or save this HTML file to your computer
  3. Open the file in Firefox Developer Edition by double-clicking it or dragging it into the browser window
  4. Open Firefox Developer Tools using one of these methods:
    • Right-click on any element and choose "Inspect Element"
    • Windows/Linux: Press F12 or Ctrl+Shift+I
    • Mac: Press Fn+F12 or Cmd+Option+I
  5. The Developer Tools panel will open - you can dock it to the side or bottom of your screen
  6. Click on the "Inspector" tab to view HTML and CSS
  7. You can now examine and edit CSS properties in real-time!

💡 Tip: Keep this file open in Firefox Developer Edition and refer back to it as you work through each exercise. Fill in the answer boxes as you go!

💡 What You'll Learn Today:

  • The Box Model: How margin, padding, and borders work together
  • Color Values: Named colors, hex codes, RGB, and HSL
  • Firefox Developer Tools: How to inspect and understand CSS properties using the best tools for web development

1 Understanding the Box Model

What is the Box Model?

Every HTML element is a box made up of four parts:

  • Content: The actual text or images inside
  • Padding: Space between the content and the border (inside)
  • Border: The line around the padding
  • Margin: Space outside the border (pushes other elements away)

Exercise 1: Inspect Border Properties

Your Task: Inspect the box below and find its border properties.

  1. Right-click on the blue box below
  2. Select "Inspect" from the menu
  3. Look in the Styles/Rules panel on the right
  4. Find the .box-model-demo class
  5. Look for the border property
This is my content! The blue area is my background. The dark blue line around me is my border. The space between this text and the border is padding. The space outside the border pushing other elements away is margin.
💡 Hint: Look for border: 5px solid navy; in the .box-model-demo class. This is shorthand for width, style, and color all in one line!
✓ Completed

Exercise 2: Measuring Padding

Your Task: Compare these two boxes to see how padding affects spacing.

  1. Inspect the yellow box (it has the class padding-demo)
  2. Find the padding property in the Styles panel
  3. Now inspect the green box (class padding-demo-large)
  4. Compare their padding values
Small Padding Box - Notice how close the text is to the border!
Large Padding Box - Lots of space between the text and the border!
💡 Hint: Padding pushes the border AWAY from the content. More padding = more space inside the box!
✓ Completed

Exercise 3: Exploring Margin

Your Task: See how margin creates space BETWEEN elements.

  1. Inspect the red box (class small-margin)
  2. Find its margin value
  3. Inspect the green box (class large-margin)
  4. Compare the space around each box
Small Margin Box - I'm close to other elements!
Large Margin Box - I have lots of space around me!
💡 Hint: Margin is OUTSIDE the border and pushes other elements away. Padding is INSIDE the border and pushes content away from the border.
✓ Completed

Exercise 4: Using the Box Model Diagram

Your Task: Find the visual box model diagram in Developer Tools.

  1. Inspect the blue box from Exercise 1
  2. In Firefox: Scroll down in the Inspector panel to find the "Box Model" section
  3. In Chrome: Click on the "Computed" tab, then scroll down to see the box diagram
  4. The diagram shows all four layers: content, padding, border, and margin
Inspect me and find the Box Model diagram!
💡 Hint: The box model diagram looks like nested boxes. The innermost box is the content, then padding (green), then border (yellow/orange), then margin (orange/brown).
✓ Completed

2 Understanding Color Values

Four Ways to Define Colors in CSS:

  • Named Colors: Simple names like red, blue, tomato
  • Hex Codes: Six-digit codes like #4a90e2 (common in design)
  • RGB: Red, Green, Blue values like rgb(46, 204, 113)
  • HSL: Hue, Saturation, Lightness like hsl(280, 70%, 60%)

Exercise 5: Named Colors

Your Task: Inspect this box to see how named colors work.

  1. Right-click on the red box below
  2. Select "Inspect"
  3. Find the .named-color class in the Styles panel
  4. Look at the background-color property
This box uses a named color: "tomato"
💡 Hint: Named colors are the simplest! There are 140+ named colors in CSS like tomato, cornflowerblue, salmon, etc.
✓ Completed

Exercise 6: Hexadecimal (Hex) Colors

Your Task: Learn how hex color codes work.

  1. Inspect the blue box (class hex-color)
  2. Find the background-color value
  3. Notice it starts with a # symbol
  4. Hex codes are 6 characters: #RRGGBB (Red, Green, Blue)
This box uses a hex color: #4a90e2
💡 Hint: In Developer Tools, you can click on any color value to open a color picker! This lets you see the color in different formats (hex, RGB, HSL).
✓ Completed

Exercise 7: RGB Color Values

Your Task: Understand RGB color notation.

  1. Inspect the green box (class rgb-color)
  2. Find the background-color using rgb()
  3. The three numbers represent Red, Green, and Blue
  4. Each number can be from 0 to 255
This box uses RGB: rgb(46, 204, 113)
💡 Hint: rgb(0, 0, 0) is black, rgb(255, 255, 255) is white. The higher the number, the more of that color!
✓ Completed

Exercise 8: HSL Color Values

Your Task: Learn about HSL (Hue, Saturation, Lightness).

  1. Inspect the purple box (class hsl-color)
  2. Find the hsl() color value
  3. First number (0-360): Hue (the actual color on the color wheel)
  4. Second number (0-100%): Saturation (how vivid the color is)
  5. Third number (0-100%): Lightness (how bright or dark)
This box uses HSL: hsl(280, 70%, 60%)
💡 Hint: Hue 0 or 360 is red, 120 is green, 240 is blue. Saturation at 0% is gray, 100% is most vivid. Lightness at 0% is black, 100% is white, 50% is the "true" color.
✓ Completed

Exercise 9: Converting Color Formats (Switch to Chrome!)

🔄 Time to Switch Browsers!

This exercise works best in Chrome/Edge. Firefox DevTools don't have the color format cycling feature.

What to do:

  1. Your answers are auto-saved, so don't worry!
  2. Open this same file in Chrome or Edge
  3. Complete Exercise 9 and the remaining exercises in Chrome
  4. Your progress will still be saved!

Your Task (in Chrome/Edge): See how the same color can be written different ways.

  1. Open this file in Chrome (your answers will load automatically!)
  2. Right-click and Inspect the colored box below
  3. In the Styles panel, find the background-color property
  4. Click on the small color square next to the color value
  5. A color picker will open
  6. Shift+Click on the color value at the top to cycle through formats: RGB → HEX → HSL → Named!
  7. Watch how the same color can be written multiple ways
This box is the color rgb(255, 99, 71). Can you find other ways to write this same color?
💡 Hint: rgb(255, 99, 71) = #ff6347 = tomato! They're all the same color, just written differently. Use Shift+Click in Chrome to cycle through all the formats!
✓ Completed

🌟 Bonus Challenge: Edit CSS Live! (Continue in Chrome)

Challenge: Change This Box Using Dev Tools

Your Task: Use Chrome Developer Tools to change this box's appearance.

  1. Inspect the box below (it has an id of challenge-box)
  2. In the Styles panel, find the inline styles
  3. Click on any property value to edit it
  4. Try changing:
    • The background-color to your favorite color
    • The padding to make it bigger or smaller
    • The border to a different width or color
    • The margin to move it around
  5. Watch the box change in real-time!
Edit my CSS properties using Developer Tools!
⚠️ Remember: Changes made in Developer Tools are temporary! They only last until you refresh the page. To make permanent changes, you need to edit your actual CSS file.
✓ 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: Take a screenshot of this completion certificate and submit it for your grade!

Date Completed: Wednesday, October 22, 2025

Course: DESN368 Web Design 1 - Week 4