Lesson 8: Clean Code and Debugging
Overview
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.
Purpose
Bugs in HTML are more forgiving than programming languages such as JavaScript (the language used in Unit 3). However debugging is an explicit problem solving process that students will use repeatedly when working with any language on the computer. When problem solving there are different strategies that a computer scientist can use to find the source of the issue.
In addition to the strategies to fix bugs once they have occurred there are certain styles of writing HTML code that help prevent bugs or make it easier to find bugs. The three main style conventions used are comment, whitespace, and indentation. To motivate students to consider using these conventions in the future, the debugging levels demonstrate that it is easier to debug a program that is written with these style conventions.
Agenda
Warm Up (10 minutes)
Activity (35 minutes)
Wrap Up (10 minutes)
View on Code Studio
Objectives
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
Preparation
- Prepare poster paper, sticky notes, and markers
Vocabulary
- 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
Teaching Guide
Warm Up (10 minutes)
Discussion Goal
Goal: Students do not need to get all the bugs or the strategies in this first discussion. They will add to this list throughout class.
Bugs students might share could include:
- Closing and opening tag switched
- Not closing a tag
- Not putting quotes around attributes values
- Spelling a tag name wrong
- Not putting a list item inside a type of list element
- Using the wrong header tag
- Wrong file path for an image
- Forgetting the equals sign between attribute name and value
- Closing tags out of order
- Not putting content inside a tag
Strategies students might share for debugging could include:
- Guess and Check
- Taking out sections to see which section is causing problems
- Looking for missing tags
- Figuring out what section of the code has the problem (Making the problem smaller)
- Asking a friend for help
- Thinking about when the code last worked and what you have added since then
Previous Experience with Bugs
Set up: Put an poster up on the wall where all students can get to it. Write the title "Class Bugs" at the top but wait to explain the meaning of the term until it is introduced below.
Group: Place students in groups of 3-4.
Distribute: Give each group a handful of sticky notes
Prompt: With your group:
- Come up with at least three specific problems you have encountered while trying to write web pages in HTML.
- What project were you working on?
- How did you ultimately track down and fix the problem?
Discuss: Have students share out the bugs they have faced and strategies they have used for finding them.
Vocabulary: Introduce the concept of bug and debugging explaining them in the context of the problems and strategies students shared.
Teaching Tip
Using the Bugs Poster: Encourage students to use this bugs poster as a resource through the rest of the unit. Whenever a student successfully squashes a new bug, have them put it on the poster. When students are get stuck, they can check the bug poster for someone who may have encountered the same issue before.
Use Journals: If you like you can have sutdents individually track their bugs on a new page in their journals, just like the "HTML Tags" page that they have been updating.
Share: Ask each group to use the sticky notes they were given to write down at least three of the bugs they've encountered and how they solved them, using one sticky per bug. Each sticky should have:
- A brief description of the bug
- Steps taken to solve it
- Name of student who solved it
Once groups have written down their bugs, have them stick them up on the class poster.
Remarks
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!
Group: Put students in pairs to work on these Code Studio levels.
Wrap Up (10 minutes)
Discussion Goal
Goal: Students answers will vary but should hopefully include the following:
- Number of bugs
- Use of comments (text between the characters
<!--and-->) - Separating things onto separate lines (whitespace)
- Grouping together things that are one idea such as a list (whitespace)
- Indenting elements that are inside other elements
If students don't mention some of these things ask them to compare two sites that have different uses of these elements.
Setting Expectations: Use this discussion to motivate the need for making readable code. Highlight that you will expect them to follow the norms they learned today from now onwards, in particular on their projects for this unit.
Coding Style Conventions
Prompt: What made it harder or easier to debug the web pages?
Discuss: Have students share out things that made it easier or harder to debug the web pages they encounter.
Remarks
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.
- Lesson Overview
- Student Overview
Overview
In this lesson covers common issues that arise when designing web pages in HTML. The class will correct errors in a sequence of increasingly complex web pages found on Code Studio and learn the importance of comments, whitespace, and indentation as tools for making web pages easier to read.
Vocabulary
- Bug - Part of a program that does not work correctly.
- Comment - A comment is a programmer-readable note in the source code of a computer program.
- Debugging - Finding and fixing problems in your algorithm or program.
- Indentation - The placement of text farther to the right, or left, to separate it from surrounding text which helps to convey the program's structure.
- Whitespace - Whitespace refers to any character that shows up as a blank space on the screen, such as a space, a tab, or a new line. Whitespace helps separate different parts of the document to make it easier to read.
Introduced Code
- Comment -
<!-- -->
Student Instructions
Debugging
What is a bug?
Bugs are mistakes in code which causes it not to work as planned.What is debugging?
Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug.What are some examples of bugs?
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.
Computer code is written by humans, and all humans make mistakes. Part of being a good computer scientist is finding your mistakes and fixing them. In computer science we call mistakes bugs. The process of finding and fixing those bugs is called debugging. Over the next couple levels you are going to work on your debugging skills.
Do This
- Look at the web page code, and discuss with your partner what is causing the following two bugs:
- The heading is not big enough.
- The second item on the list doesn't have a number.
- Fix all the bugs in the code so that the final result matches the image on the right.
Student Instructions
Debugging
What is a bug?
Bugs are mistakes in code which causes it not to work as planned.
What is debugging?
Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug.
What are some examples of bugs?
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.More debugging practice! This page is a little more challenging to debug than the last one.
Do This
- Discuss with your partner what you think the bugs are in this page.
- Find and fix all the bugs so that your page matches the one on the right.
Student Instructions
Debugging
What is a bug?
Bugs are mistakes in code which causes it not to work as planned.
What is debugging?
Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug.
What are some examples of bugs?
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.
Why does the inspector sometimes stop working?
Sometimes there are so many bugs in the HTML that the inspector cannot read the code properly and it stops working completely, even on the parts of the code that are correct. Once the bugs are corrected, the inspector will work again.
This page has images in it. Images make finding bugs a little more tricky. Can you debug this page?
Do This
- Discuss with your partner what is causing the bugs in this page.
- Fix the bugs so that your page matches the target page shown below.
Student Instructions
Formatting
What is whitespace?
Whitespace refers to any character that shows up as a blank space on the screen, such as a space, a tab, or a new line. Whitespace helps separate different parts of the document to make it easier to read. For example, in HTML code new elements are usually put on a new line, even though it doesn't make any difference in how the page is displayed.
What is indentation?
Indentation is the placement of text farther to the right, or left, to separate it from surrounding text. Indentation helps to convey the program's structure. In HTML, elements that are inside other elements are usually indented. Here is an example:
<body>
<p>This paragraph is inside the "body" element.</p>
</body>
What is formatting?
Formatting is arranging text in a way that makes it easier to understand. HTML is usually formatted using indentation. That means that elements that are inside other elements are further to the right in code. Here is an example:
<body>
<p>This paragraph is inside the "body" element.</p>
</body>
Why does the inspector sometimes stop working?
Sometimes there are so many bugs in the HTML that the inspector cannot read the code properly and it stops working completely, even on the parts of the code that are correct. Once the bugs are corrected, the inspector will work again.
The way that you write your code can make it easier or harder to find bugs. If you use whitespace and indentation, it will make it easier to read and easier to fix.
Do This
- Look at the code with your partner and discuss how you should format the code to make it easier to read.
- Make the code easier to read by adding new lines and indentation.
- Fix all the bugs so that your page matches the target page below.
Student Instructions
Comments
What is whitespace?
Whitespace refers to any character that shows up as a blank space on the screen, such as a space, a tab, or a new line. Whitespace helps separate different parts of the document to make it easier to read. For example, in HTML code new elements are usually put on a new line, even though it doesn't make any difference in how the page is displayed.
What is indentation?
Indentation is the placement of text farther to the right, or left, to separate it from surrounding text. Indentation helps to convey the program's structure. In HTML, elements that are inside other elements are usually indented. Here is an example: <body>
<p>This paragraph is inside the "body" element.</p>
</body>
What is formatting?
Formatting is arranging text in a way that makes it easier to understand. HTML is usually formatted using indentation. That means that elements that are inside other elements are further to the right in code. Here is an example:
<body>
<p>This paragraph is inside the "body" element.</p>
</body>
You can add comments to your code to explain the different parts of the code and what it should create. Comments can help you to debug, and will also help other people who are trying to understand your code.
<!-- this is a comment -->
Do This
- Look at the code with your partner and find the comments.
- Use the comments to help you fix the bugs in the HTML.
- Formatting HTML
- Student Overview
- Challenge
- 8
Student Instructions
Challenge
Check with your teacher before starting on this challenge.
This page is only partially finished, and it has some bugs. Luckily, there are comments that should help you to finish the page as the author intended.
Do This
- Look at the code and with your partner and discuss what the page should look like.
- Work together to finish the page, paying attention to formatting.
- Compare with another pair to see whether your pages are the same.
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.