Lesson 8: Clean Code and Debugging


Students deal with common issues that arise when designing web pages in HTML. Students will correct errors in a sequence of increasingly complex web pages. In the process they will learn the importance of comments, whitespace, and indentation as tools for making web pages easier to read. At the end of the lesson students create a list of strategies for debugging web pages and ensuring they are easy to read and maintain.


Students will be able to:

  • Describe why using whitespace, indentation, and comments makes your code easier to maintain
  • Develop a set of techniques for preventing bugs in HTML code and finding them when they occur


  • Bug – Part of a program that does not work correctly.
  • Comment – A note in the source code of a computer program that helps explain the code to people who read it
  • Debugging – Finding and fixing problems in an algorithm or program.
  • Indentation – The placement of text farther to the right or left of the surrounding text, making it easier to understand the program’s structure
  • Whitespace – Any character that shows up as a blank space on the screen, such as a space, a tab, or a new line; helps separate different parts of the document to make it easier to read

Introduced Code

Warm Up (10 minutes)

Previous Experience with Bugs

  1. Get into groups of 3-4.
  2. Each group needs a handful of sticky notes–get them from your teacher
  3. With your group DISCUSS the following:
    1. Come up with at least three specific problems you have encountered while trying to write web pages in HTML.
    2. What project were you working on?
    3. How did you ultimately track down and fix the problem?
  4. Use the sticky notes you were given to write down at least three of the bugs you’ve encountered and how you solved them, using one sticky per bug. Each sticky should have:
    1. A brief description of the bug
    2. Steps taken to solve it
    3. Name of student who solved it
  5. Once your group has written down your bugs, stick them up on the class poster.
  6. The problems you had when your HTML code did not work correctly are bugs. The process of fixing bugs and strategies used to fix them is called debugging. Today we’re going to be working on our debugging skills and learning some strategies to keep our code clean to help avoid them.

Activity (35 minutes)

Web Lab: Smash Those Bugs!

  1. Go to code.org Unit 2, Lesson 8
  2. Read the the first level
  3. Use pair programming to work on Lesson 8 Code Studio levels 2-6–the NAVIGATOR should write down each bug for each level and how your team fixed it Turn in your paper before you leave class today.
  4. You can write down tips for debugging code in the future, either in your journal or on the class poster.

Wrap Up (10 minutes)

Coding Style Conventions

  1. What made it harder or easier to debug the web pages? In your journal or Word Online file type about the things that made it easier or harder to debug the web pages you encounter.
  2. Code needs to be useful for both people and computers. Code that your computer can run might still be really hard for someone (or even you!) to read and make changes to. From now on it’s important that we use these practices to ensure our code is easy to read for people, not just good enough for a computer to use.

Leave a Reply

Your email address will not be published. Required fields are marked *