HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Debugging & Testing

When your layout breaks or colors don't apply, you need to debug. Your primary tool is the browser's Developer Tools (Press F12 or Right-Click > Inspect).

What DevTools allows you to do:

Inspect Elements: See exactly which HTML tags represent which visual parts of the screen.
Modify Live CSS: Change colors, add padding, or test grid layouts in real-time in the browser without saving your code.
Check Specificity: See exactly which CSS rule is winning and which rules are being overridden (crossed out).
Device Toggle: Simulate mobile phones and tablets to test your responsive media queries.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
 <style>
 body { font-family: monospace; background: #1e1e1e; color: #d4d4d4; padding: 20px; font-size: 16px; }
 .dev-tools-sim { border: 1px solid #444; padding: 20px; background: #2d2d2d; border-radius: 8px; }
 .selector { color: #d7ba7d; }
 .prop { color: #9cdcfe; }
 .val { color: #ce9178; }
 .crossed-out { text-decoration: line-through; color: #888; }
 </style>
</head>
<body>

<h2>DevTools "Styles" Tab Simulation</h2>
 When you inspect an element, the browser shows you a hierarchy of CSS rules applied to it. Rules that are overridden by higher specificity are crossed out.

<div class="dev-tools-sim">
 .btn.primary { 
 &nbsp;&nbsp;background-color: #3498db; /* Winning rule! */ 
 }
 
 .btn { 
 &nbsp;&nbsp;background-color: #7f8c8d; /* Overridden by .btn.primary */ 
 &nbsp;&nbsp;padding: 10px 20px; 
 &nbsp;&nbsp;border-radius: 5px; 
 }
 </div>
 
 Right-click anywhere on this page and select "Inspect" to see the real DevTools!

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Debugging & Testing

Debugging & Testing

What DevTools allows you to do:

Try It Yourself

Topics