Skip to content
Chapter 07 of 07 · 2 lessons · ~25 min

Debug and Build

Learn why CSS rules win or lose, fix "my styles aren't working" for good, and put everything together into a responsive landing page.

YOUR PROGRESS0%
/ Lessons in this chapter
17
CSS Specificity: Why Your Styles Aren’t Working How browsers decide which CSS rule wins, and a step-by-step way to fix styles that won't apply. Coming soon
18
Build a Responsive Landing Page With HTML and CSS How to combine everything from this course into a real, responsive landing page you can use for clients. Coming soon

Chapter practice task

Task: Build and launch your responsive landing page

  1. Plan the sections: header, hero, services, about, pricing, contact, footer.
  2. Write the HTML first, with semantic tags and no styles.
  3. Add your variables, base styles and layout, mobile-first.
  4. Fix any “not working” rules using DevTools and specificity.
  5. Test on a phone, run Lighthouse and publish the page.

By the end of this chapter

  • You can work out why a CSS rule is being overridden
  • You can debug layouts in DevTools quickly
  • You have a finished, responsive landing page for your portfolio

Quick answers for this chapter

Is !important bad?

Not always, but it should be a last resort. Fix specificity first.

What’s the fastest way to debug CSS?

Right-click → Inspect, and look for crossed-out rules in the Styles panel.

Can I reuse the landing page for clients?

Yes. It’s a great starting template for small business sites.