Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Debugging Techniques</title>
</head>
<body>
<div class="container">
<h1>🐛 HTML Debugging Guide</h1>
<!-- Browser DevTools -->
<div class="tool-card">
<h2>1. Browser DevTools (F12)</h2>
<p style="color: #6b7280; margin-bottom: 15px;">
Your primary debugging tool - available in all modern browsers
</p>
<div class="debug-steps">
<ol>
<li>Press <strong>F12</strong> or right-click → Inspect</li>
<li>Use <strong>Elements</strong> tab to inspect HTML structure</li>
<li>Check <strong>Console</strong> for errors and warnings</li>
<li>View <strong>Network</strong> tab for loading issues</li>
<li>Use <strong>Lighthouse</strong> for performance audits</li>
</ol>
</div>
</div>
<!-- Common Debugging Techniques -->
<div class="technique">
<h3>📍 Inspect Element</h3>
<p style="color: #475569; margin-bottom: 10px;">
Right-click any element → Inspect to see its HTML and CSS
</p>
<code>Right-click → Inspect Element</code>
</div>
<div class="technique">
<h3>🔍 Console Errors</h3>
<p style="color: #475569; margin-bottom: 10px;">
Check Console tab (F12) for HTML/JavaScript errors
</p>
<div class="error-example">
❌ Uncaught TypeError: Cannot read property 'value' of null
<br>→ Element with that ID doesn't exist
</div>
</div>
<div class="technique">
<h3>✏️ Edit Live HTML</h3>
<p style="color: #475569; margin-bottom: 10px;">
Double-click any text in Elements tab to edit and test changes
</p>
<code>Elements tab → Double-click text → Edit</code>
</div>
<div class="technique">
<h3>🎨 Highlight Elements</h3>
<p style="color: #475569; margin-bottom: 10px;">
Hover over elements in DevTools to highlight them on the page
</p>
<code>Hover in Elements tab → See highlight on page</code>
</div>
<!-- Keyboard Shortcuts -->
<h2 style="color: #ef4444; margin-top: 40px; margin-bottom: 20px;">
⌨️ DevTools Shortcuts
</h2>
<div class="shortcut-grid">
<div class="shortcut-item">
<strong>Open DevTools</strong>
<code>F12 or Ctrl+Shift+I</code>
</div>
<div class="shortcut-item">
<strong>Inspect Element</strong>
<code>Ctrl+Shift+C</code>
</div>
<div class="shortcut-item">
<strong>Console</strong>
<code>Ctrl+Shift+J</code>
</div>
<div class="shortcut-item">
<strong>Refresh Page</strong>
<code>Ctrl+R or F5</code>
</div>
<div class="shortcut-item">
<strong>Hard Refresh</strong>
<code>Ctrl+Shift+R</code>
</div>
<div class="shortcut-item">
<strong>View Source</strong>
<code>Ctrl+U</code>
</div>
</div>
<!-- Validation -->
<div style="background: #fef3c7; padding: 20px; border-radius: 12px; border-left: 4px solid #f59e0b; margin-top: 30px;">
<h3 style="color: #78350f; margin-bottom: 10px;">🔧 Validation Tools</h3>
<ul style="list-style: none; line-height: 2; color: #92400e;">
<li>✓ W3C Markup Validator (validator.w3.org)</li>
<li>✓ HTML Hint (VS Code extension)</li>
<li>✓ Browser Console (F12 → Console)</li>
<li>✓ Lighthouse Audit (F12 → Lighthouse)</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
Elements not properly closed cause layout issues
❌ <div><p>Text✅ <div><p>Text</p></div>IDs must be unique - use classes for multiple elements
❌ <div id="box"></div><div id="box"></div>✅ <div class="box"></div><div class="box"></div>Images must have alt text for accessibility
❌ <img src="photo.jpg">✅ <img src="photo.jpg" alt="Description">Block elements cannot go inside inline elements
❌ <a><div>Link</div></a>✅ <a><span>Link</span></a>