📖 Testing and Debugging HTML and CSS

Introduction to Debugging

Debugging is the process of identifying and fixing errors in your code. Whether it's a missing HTML tag, a misplaced CSS property, or an accessibility oversight, debugging is an essential skill for web developers.

This lesson will help you understand common debugging techniques using industry-standard tools like Visual Studio Code and browser Developer Tools.

Why Debugging Matters

Errors in your code can lead to:

  • Broken layouts
  • Non-functional features
  • Accessibility issues

Debugging early and often saves time and prevents frustration by ensuring your web pages meet the required standards and function as intended.

Common Errors in HTML and CSS

HTML Errors
Examples include missing closing tags, improper nesting, and incorrect attributes.
CSS Errors
Issues such as conflicting styles, broken layouts, and invalid property names.
Accessibility Violations
Errors like missing alt attributes, insufficient color contrast, and non-descriptive link text.

Types of Errors by Severity

🚨 Critical Errors (Highly Pronounced)

  1. HTML Structural Issues: Missing closing tags, improperly nested elements, and incorrect <!DOCTYPE> declarations.
  2. CSS Issues: Broken layouts, overlapping content, or elements disappearing due to incorrect styles.
  3. Accessibility Violations: Missing form labels, no keyboard navigability, or absent alt attributes on images.

⚠️ Moderate Errors (Subtle but Noticeable)

  1. HTML Issues: Misusing HTML for layout, incorrect attributes, or redundant elements.
  2. Common Misuses:
    • Using <br> tags for spacing instead of CSS.
    • Applying inline styles directly in HTML.
    • Using heading tags for appearance instead of document structure.
  3. CSS Issues: Improper media queries, mismatched styles, or conflicting selectors.
  4. Accessibility Violations: Poor contrast ratios, improper heading hierarchy, or overuse of ARIA roles.

🔍 Minor Errors (Barely Noticeable or Hidden)

  1. HTML Issues: Unused tags, invalid attributes, or missing meta tags.
  2. CSS Issues: Overly specific selectors, deprecated properties, or inefficient animations.
  3. Accessibility Violations: Missing focus styles, vague links, or subtle animation timing issues.

Debugging Techniques

🔍 Validate Your Code

🛠️ General Practices

  • Work incrementally: make small changes and test frequently.
  • Watch for red underlines in VS Code or other IDEs; hover for quick tips.
  • Use View Page Source and browser Inspect tools to view live HTML structure.
  • Comment out blocks of code to isolate issues: <!-- HTML comment --> or /* CSS comment */

📦 Check Required Assets

  • Ensure all files (CSS, JS, images) are saved locally or uploaded to the server.
  • Check that paths are correct and files are in the right directory.
  • If your entire page disappears after adding styles, you may be missing a closing </style> tag.

🔗 Troubleshooting URLs and File Paths

  • Make sure you have an index.html file in the root of your GitHub Pages project. Without it, your site won't load automatically.
  • If your homepage isn't index.html, you must include the filename in the URL. Example:
    https://username.github.io/repo/otherpage.html
  • Check your relative paths carefully. ./images/logo.png and ../images/logo.png point to very different places.
  • Use your browser's Dev Tools → Network tab to confirm whether linked files (images, stylesheets, etc.) are loading correctly.

🧠 Pro Tip: File paths are case-sensitive on GitHub Pages. About.html is not the same as about.html.

📱 Test Across Devices

  • Test in multiple browsers (Chrome, Firefox, Safari, Edge).
  • Check responsiveness with browser tools (desktop, tablet, mobile views).

💡 Programming Errors

  • Watch for missing HTML closing tags and improper nesting.
  • Check for missing CSS braces, colons, or semicolons.
  • Take a break! A fresh look often reveals the issue.

Advanced Techniques

  • 🧪 Perform a hard refresh to clear your browser cache.
  • 🧠 Open Dev Tools with Ctrl+Shift+I (PC) or Cmd+Opt+I (Mac). Check the Console for errors.
  • 🧩 Use the Elements tab in Dev Tools to inspect styles. Look for properties that are crossed out (strikethrough) or greyed out — they're being overridden.

If the solution isn't obvious, look for info info icon and help help icon icons on your tools or LMS interface.

Real-World Debugging Examples

Example 1: Fixing a Broken Form

Severity Level: Critical

Problem
A form is missing <label> elements and uses self-closing tags for void elements, which can cause validation warnings and accessibility issues.
<form>
  <input type="text" name="username" />
  <input type="submit" />
Symptoms
The form renders but lacks proper labeling. Screen readers can't associate input fields with their purpose, and validators may flag unnecessary self-closing slashes.
Solution
Add <label> elements and remove self-closing slashes in HTML5.
<form>
  <label for="username">Username:</label>
  <input id="username" type="text" name="username">
  <input type="submit" value="Submit">
</form>

Severity Level: Moderate

Problem
A misspelled filename in the href attribute causes the external CSS file not to load.
<link rel="stylesheet" href="stlyes.css"> <!-- filename is misspelled -->
Symptoms
The styles from the external stylesheet do not apply at all. The browser renders default styles.
Solution
Use Dev Tools to inspect the element and confirm the stylesheet is loading in the Network tab. Check for selector typos in the Elements panel.
<link rel="stylesheet" href="styles.css"> <!-- filename is spelled correctly-->

Example 3: Identifying Subtle Accessibility Issues

Severity Level: Moderate to Minor

Problem
A design uses foreground and background colors that don't meet accessibility contrast standards, making text difficult to read for many users.
.text-container {
  background-color: #C0C0C0;
  color: #FFFFFF;
}
Symptoms
Text appears very faint or unreadable, especially for users with low vision or color blindness. This may not be flagged by a standard HTML validator.
Solution
Use a contrast checker. Adjust the colors for readability
.text-container {
  background-color: #333333;
  color: #FFFFFF;
}

🧾 Debugging Checklist

  • ✅ Use validators (HTML, CSS, accessibility)
  • ✅ Check asset links and file paths
  • ✅ Inspect layout and styles with Dev Tools
  • ✅ Test on multiple browsers/devices
  • ✅ Use contrast checkers for accessibility
  • ✅ Keep your code clean and modular
  • ✅ Take breaks and come back with fresh eyes

References

Last updated: August 14, 2025 at 10:12 PM