Assignment Overview

Complete this hands-on exercise to learn the CSS Box Model and color formats using Firefox Developer Tools.

Instructions

Step 1: Download and Complete the Exercise

1. Download the file:
   "fun" new for spring but has lots of extra code: Week 4 DevTools Practice - Standalone.html
   previous version before Travis tried over optemize everything: week4-devtools-WORKING-SAVE-1-1.html
2. Open in Firefox Developer Edition (download if needed: https://www.firefox.com/en-US/firefox/developer/)
3. Follow all instructions in the file
4. Complete all tasks - your answers will auto-save as you type!
5. Take a screenshot of your completion certificate when you finish all tasks
6. Save the file

Step 2: Deploy to Github

Once you've completed all exercises:

1. Rename the file from dev-tools-practice-week4-final.html to dev-tools-lastFirstname-wk4.html
2. Upload to week-4 in your GitHub repository
3. Add a nav/link to the file in your index.html
4. Submit the link to the to your completed devtools assignmen– hint: this should look like https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/dev-tools-lastFirst-wk4.html

Submission Requirements

1. The link to the live file – Paste the link in the submission box

What You'll Learn

• Understanding the CSS Box Model (margin, border, padding, content)
• Inspecting HTML elements with Firefox DevTools
• Working with different color formats (Named, Hex, RGB, HSL)
• Live editing CSS properties in the browser
• Using the Inspector tab to debug and understand CSS

Need Help?

• Firefox Developer Edition Download: https://www.firefox.com/en-US/firefox/developer/
• Firefox DevTools Documentation: https://firefox-source-docs.mozilla.org/devtools-user/index.html