What you'll learn
Professionals lean on tools. Your browser's DevTools are a superpower for inspecting and debugging any page, and Git plus free hosting let you version and publish your work to the world. This module is about workflow.
By the end you'll be able to:
- Navigate the browser DevTools
- Inspect and live-edit CSS to experiment
- Debug common layout and specificity problems
- Version your code with Git and deploy free with GitHub Pages
The DevTools tour
Open DevTools with F12 or by right-clicking any element and choosing Inspect. The panels you'll use most:
| Panel | What it's for |
|---|---|
Elements | The live DOM tree and the CSS styling each element |
Styles / Computed | Every rule applied, and the final computed values |
Console | Errors, warnings, and messages |
Network | Every file the page loads, with sizes and timing |
Device toolbar | Preview any screen size and simulate mobile |
Inspecting & live-editing
Click any element in the Elements panel and its styles appear on the right. You can edit values live — change a colour, tweak padding, toggle a property on and off — and see the result instantly. Nothing you change here is saved; it's a risk-free sandbox for experimenting before you commit changes to your real CSS file. The box-model diagram at the bottom visualises padding, border, and margin exactly as you learned in Module 13.
Tip
Debugging CSS
Three of the most common CSS puzzles, and how DevTools solves them:
- "My rule isn't applying." In the Styles panel, an overridden declaration shows with a strikethrough — a more specific rule won. Check specificity, or whether a typo broke the selector.
- "There's a mystery gap." Hover an element to see its margin (orange) and padding (green) highlighted on the page — margin collapsing and stray padding become obvious.
- "Which rule set this?" The Computed tab lists the final value and lets you jump to the exact rule and file that produced it.
Version control
Git tracks the history of your project so you can save snapshots (commits), undo mistakes, and collaborate. The everyday commands to get a project onto GitHub:
git init # start tracking this folder
git add . # stage all your files
git commit -m "Initial site" # save a snapshot
git branch -M main
git remote add origin https://github.com/you/my-site.git
git push -u origin main # upload to GitHubDeploying free
Because an HTML/CSS site is just static files, you can host it for free. GitHub Pages publishes straight from a repository — push your code, enable Pages in the repo settings, and your site is live at a real URL in minutes. Netlify and Vercel offer the same with drag-and-drop simplicity. There's no better feeling than sending someone a link to something you built.
Key idea
Recap & quick check
Key takeaways
- Open DevTools with F12 or right-click → Inspect; the Elements and Styles panels are your main tools.
- You can live-edit CSS in DevTools risk-free to experiment before changing your files.
- The device toolbar tests responsive design at any screen size.
- Overridden rules show struck-through (specificity); hovering reveals margins and padding.
- Git versions your code; GitHub Pages (or Netlify/Vercel) hosts static sites for free.
Quick check
1. How do you open the browser DevTools?
2. In the Styles panel, what does a struck-through declaration mean?
3. What is the device toolbar used for?
4. What does git commit do?
5. How can you host a static HTML/CSS site for free?
You have a real workflow now. To close Phase 6, let's survey what's beyond plain CSS: frameworks and preprocessors.