When you write HTML and CSS, things won't always work the way you expect - and that's normal. Professional developers spend a significant amount of their time testing, inspecting, fixing, and retesting their code. This section will show you how that process works in practice and introduce you to the tools that make debugging manageable.

Yes, debugging is finding and fixing something that is wrong, but don't just think of it that way. Testing and debugging means that real development is happening!


Debugging Is a Cycle, Not a Failure

Web development rarely looks like this:

write code → everything works → done

Instead, it looks like this:

write code → test → something's off → inspect → fix → test again → repeat

HTML and CSS are especially forgiving languages. Browsers try their best to display a page even when the code isn't perfect. That can be helpful, but it can also hide problems that come back later when layouts get more complex or styles start interacting. Your goal as a developer is not just to "make it work", but to understand what the browser is actually doing.


How Browsers Handle HTML and CSS Errors

HTML is parsed permissively. This means that things like missing closing tags, incorrect nesting, and small syntax mistakes often will not prevent a page from loading. Instead the browser, behind the scenes, quietly guesses what you meant, rewrites parts of the document accordingly, and moves on. Sometimes the result looks fine. Other times, it creates confusing layout or styling bugs later.

CSS behaves differently in that invalid rules are ignored, incorrect selectors can apply styles in unexpected ways, and conflicting rules get resolved through specificity and their order. This makes inspection tools essential to get your code functioning correctly.


Using Browser DevTools to Inspect Your Page

Every modern browser includes developer tools (DevTools). The most important ones for this course are:

The Elements (DOM Inspector) Panel

This shows:

  • the HTML the browser actually rendered (not just what you wrote)
  • how elements are nested
  • which CSS rules apply to each element

You can:

  • expand and collapse elements
  • hover to highlight them on the page
  • temporarily edit HTML or CSS to test fixes

The Styles Panel

This shows:

  • which CSS rules are applied
  • which rules are overridden
  • where each rule comes from (file and line number)

Together, these tools help answer critical questions like, Is my element structured the way I think it is? Is my CSS applying - or being overridden? Is the issue HTML, CSS, or both?


Common HTML and CSS Problems You'll See

You will debug these constantly:

HTML issues

  • Missing closing tags
  • Incorrect nesting (especially with lists and sections)
  • Broken links or image paths
  • Missing attributes (like alt on images)

CSS issues

  • Selector doesn't match the element you expect
  • Styles overridden by more specific rules
  • File not linked correctly
  • Typos in property names or values

None of these mean you're "bad at coding". They mean you're coding.


Validating Your HTML

Because browsers try to "fix" HTML errors silently, it's important to validate your code. An HTML validator checks your markup against standards, reports errors with line numbers, and helps catch issues before they cause bigger problems. Imagine what the code on a complex webpage could look like, and you'll immediately understand why line numbered reports are incredibly helpful!

A good HTML validator is an important tool in a solid and efficient development workflow. A good workflow looks like:

  1. Write HTML
  2. Load the page
  3. Inspect with DevTools
  4. Validate
  5. Fix issues
  6. Reload and retest

This loop might feel a little slow at first, but once you get used to it, you will soon discover how powerful and efficient it is.


Try It Now: Practice the Debugging Loop

This activity is about process, not perfection.

  1. Copy and paste the following into Mozilla Playground. Make sure you clear anything that is in the CSS code editor.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Debug Practice Page</title>
    <style>
      body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        margin: 2rem;
        line-height: 1.6;
      }

      .card {
        border: 2px solid #333;
        padding: 1rem;
        max-width: 650px;
      }

      .highlight {
        background: #fff3bf;
        padding: 0.1rem 0.25rem;
      }

      /* This should style the nav links, but it won't (on purpose) */
      .nav a {
        text-decoration: none;
        border-bottom: 2px solid #333;
      }
    </style>
  </head>

  <body>
    <header class="card">
      <h1>Debug Practice Page</h1>
      <p>
        Your mission: use DevTools to find what's broken, fix it, and reload.
      </p>

      <!-- BUG #1: class name typo means the .nav styles won't apply -->
      <nav class="nva">
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <main class="card">
      <section id="about">
        <h2>About</h2>

        <!-- BUG #2: missing closing tag for <strong> makes too much text bold -->
        <p>
          I'm learning how to <strong>debug HTML and CSS using DevTools.
        </p>

        <p>
          This sentence should <span class="highlight">only highlight this phrase</span>
          and not anything else.
        </p>
      </section>

      <section id="projects">
        <h2>Projects</h2>

        <!-- BUG #3: broken image path -->
        <img src="images/profile.png" alt="Profile photo placeholder">

        <p>
          Here are a few things I'm practicing:
        </p>

        <!-- BUG #4: list items are missing closing </li> tags (browser will guess) -->
        <ul>
          <li>Using the Elements/Inspector panel
          <li>Checking which CSS rules apply
          <li>Fixing paths and nesting problems
        </ul>
      </section>

      <section id="contact">
        <h2>Contact</h2>

        <!-- BUG #5: broken link (missing quote in href) -->
        <p>
          Visit my favorite reference:
          <a href="https://developer.mozilla.org/en-US/docs/Web/HTML>MDN HTML</a>
        </p>
      </section>
    </main>

    <footer class="card">
      <p>Done? Try breaking something new on purpose, then debug it</p>
    </footer>
  </body>
</html>
  1. Open your browser's DevTools
    • The most universal way to access DevTools across all major browsers (Chrome, Firefox, Edge, and Safari) is to right-click anywhere on a webpage and select Inspect or Inspect Element from the context menu. Alternatively, you can use the standard keyboard shortcut F12 or Cmd + Option + I (Mac) / Ctrl + Shift + I (Windows/Linux) to toggle the diagnostic panel open and closed.
  2. Inspect the structure:
    • Expand elements
    • Hover to see how the browser highlights them
  3. Intentionally introduce a small issue:
    • Remove a closing tag
    • Change a class name
    • Break an image path
  4. Reload the page and observe what changes
  5. Use the inspector to find the problem
  6. Fix it and reload again

Here is a "Debugging Loop" Checklist for this Exercise

  • Open DevTools → Elements panel
  • Find BUG #1 (nav styling not applying) → fix the class typo
  • Find BUG #2 (too much bold text) → close the <strong> tag
  • Find BUG #3 (image missing) → fix src or replace with a working URL
  • Find BUG #4 (list structure odd) → close each <li>
  • Find BUG #5 (link broken) → fix the missing quote in href
  • Reload after each fix and observe what changes

Pay attention to how you found the issue - that skill matters more than the fix itself.


Debug Practice - Answer Key (Fixed Version)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Debug Practice Page</title>

    <style>
      body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        margin: 2rem;
        line-height: 1.6;
      }

      .card {
        border: 2px solid #333;
        padding: 1rem;
        max-width: 650px;
      }

      .highlight {
        background: #fff3bf;
        padding: 0.1rem 0.25rem;
      }

      /* Fixed: nav class now matches HTML */
      .nav a {
        text-decoration: none;
        border-bottom: 2px solid #333;
        margin-right: 0.75rem;
      }
    </style>
  </head>

  <body>
    <header class="card">
      <h1>Debug Practice Page</h1>
      <p>
        Your mission: use DevTools to find what's broken, fix it, and reload.
      </p>

      <!-- FIXED: class name corrected -->
      <nav class="nav">
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <main class="card">
      <section id="about">
        <h2>About</h2>

        <!-- FIXED: <strong> properly closed -->
        <p>
          I'm learning how to <strong>debug HTML and CSS</strong> using DevTools.
        </p>

        <p>
          This sentence should <span class="highlight">only highlight this phrase</span>
          and not anything else.
        </p>
      </section>

      <section id="projects">
        <h2>Projects</h2>

        <!-- FIXED: working image source (placeholder image used) -->
        <img
          src="https://via.placeholder.com/200x150"
          alt="Profile photo placeholder">

        <p>
          Here are a few things I'm practicing:
        </p>

        <!-- FIXED: list items properly closed -->
        <ul>
          <li>Using the Elements/Inspector panel</li>
          <li>Checking which CSS rules apply</li>
          <li>Fixing paths and nesting problems</li>
        </ul>
      </section>

      <section id="contact">
        <h2>Contact</h2>

        <!-- FIXED: href quote closed -->
        <p>
          Visit my favorite reference:
          <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">
            MDN HTML
          </a>
        </p>
      </section>
    </main>

    <footer class="card">
      <p>Done? Try breaking something new on purpose, then debug it.</p>
    </footer>
  </body>
</html>


Reflections From This Exercise

This solution intentionally demonstrates correct semantic structure, clean nesting and closure, matching class names between HTML and CSS, a valid image source (external placeholder avoids repo asset issues), proper link syntax, and how "small" errors can lead to big rendering problems. Let's talk about some trouble shooting tips that we took away from this exercise:


Troubleshooting Tips (Bookmark This)

When something isn't working, ask these in order:

1. Is the file connected?

  • Is the CSS file linked correctly?
  • Are paths spelled correctly and case-sensitive?

2. Is the element really there?

  • Does it exist in the rendered DOM?
  • Is it nested where you expect?

3. Is the selector correct?

  • Does it match the actual HTML?
  • Is another rule overriding it?

4. Is the browser ignoring something?

  • Invalid CSS rules are skipped silently
  • One typo can disable an entire declaration

5. Did I reload?

  • Browsers cache aggressively
  • Hard refresh when in doubt

6. Did I check for typos?

  • Misspelled words will cause errors
  • Check for missing closing tags, brackets, etc

Debugging gets easier the moment you slow down and inspect.


Why This Matters for Your Portfolio

As your portfolio grows, small issues compound:

  • layouts break at certain screen sizes
  • styles override each other
  • accessibility issues appear quietly

The developers who succeed aren't the ones who avoid bugs - they're the ones who know how to investigate them calmly and systematically. This test → debug → repeat process is how real web pages are built.

Source: Khalil Abdullah and Saylor University
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.