Lesson 6: Clean Code and Debugging

Web Lab

Overview

In this lesson students will common issues that arise when designing web pages in HTML. Students will correct errors in a sequence of increasingly complex web pages found on Code Studio. 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 occured 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 motivate 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)

Objectives

Students will be able to:

  • Describe why using white space, 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

Links

For the Students

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 - A white space or spacing is any section of a document that is unused or space around an object. White spaces help separate paragraphs of text, graphics, and other portions of a document, and helps a document look less crowded.

Introduced Code

Support

Report a Bug

Teaching Guide

Warm Up (10 minutes)

Previous Experience with Bugs

Goal: Students think about the strategies they have already used while debugging.

Prompt: At your table:

  • 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?

Discussion 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

Discuss: Have students share out the bugs they have faced and strategies they have used for finding them.

Display: Class list of bugs and strategies for solving them.

Formally introduce the concept of Bug and Debugging.

Set up: Have students take out their Web Development Practices - Project Guide.

In the Web Development Practices - Project Guide find the Bugs List and have students write down all the bugs the class came up with. The list will help them in hunting for bugs today.

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.

Activity (35 minutes)

Web Lab: Smash Those Bugs!

Debugging Levels

Students will be working through a set of 4 web pages and debugging issues with each of the web pages. Once they are done debugging they are prompted to take out their Web Development Practices - Project Guide and start updating their Bug Smashing List.

Group: Put students in pairs to work on these Code Studio levels.

Transition: Have students go to Lesson 7 Bubble 2 on Code Studio.

Once groups have debugged all the puzzles make sure students take out their Web Development Practices - Project Guide and turn to page 3, title Bug Bashing.

They should be responding to the following prompt which is also in Code Studio:

Prompt: Debugging is a problem solving process. Using the Bug Bashing table, identify at least three of the bugs you encountered and describe how you were able to solve it. You can continue adding to this table as you encounter and fix bugs in the future.

Wrap Up (10 minutes)

Coding Style Conventions

Prompt: What made it harder or easier to debug the web pages?

Discussion Goal

Students answers will vary but should hopefully include the following:

  • Number of bugs
  • Use of comments (things that are of the form )
  • Separating things onto separate lines (white space)
  • Grouping together things that are one idea such as a list (white space)
  • 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.

Discuss: Have students share out things that made it easier or harder to debug the web pages they encounter.

Update HTML Elements List

Set Up: Have students take out their Web Development Practices - Project Guide.

Have students update their HTML Elements table on page 2 of their Web Development Practices - Project Guide packet with the image element.

View on Code Studio

The Internet - Web Development: Lesson 6 - Clean Code and Debugging

Background

In this lesson students will address common issues that arise when designing web pages in HTML. Students will correct errors in a sequence of increasingly complex web pages found on Code Studio. 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.

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 - A white space or spacing is any section of a document that is unused or space around an object. White spaces help separate paragraphs of text, graphics, and other portions of a document, and helps a document look less crowded.

New Blocks

Resources

View on Code Studio

Student Instructions

Debugging

Computer code is written by humans and humans make mistakes. All computer scientists make mistakes. So part of being a good computer scientists is about being able to find your mistakes and fix them. In computer science we call mistakes bugs. Bugs can be anything in code which causes it not to work as planned. The process of finding and fixing those bugs is called debugging. Debugging is a problem solving process so use your problem solving steps as you try to debug. Over the next couple levels you are going to work on your debugging skills.

The desired web page is on the right. There are two issues with the starter web page:

  1. The header won't show up as an h1 header.
  2. The list doesn't seem to be formatting correctly.

Do This

  • Find and fix all bugs in the starting HTML
  • Check that the final result matches the image on the right.
View on Code Studio

Student Instructions

Debugging

More debugging practice! This page is a little more challenging to debug than the last one.

Do This

Fix the HTML so that the web page makes the example on the right.

  • Find and fix all bugs in the starting HTML
  • You will know you have found all the bugs when your page matches the one on the right.
View on Code Studio

Student Instructions

Debugging

This page has images in it. Images make finding bugs a little more tricky. Can you debug this page?

As you are debugging you may notice a new set of symbols that look something like this:

<!-- this is a comment -->

This is a comment. Comments are written by computer scientists creating web pages for themselves and other humans who might look at their HTML file. Comments explain the different parts of the code and what it should create. Comments might be able to help you debug.

Do This

  • Find and fix all bugs in the starting HTML
  • You know you’ve found all of the bugs when your page matches the Target Page.
View on Code Studio

Student Instructions

Debugging

Sometimes bugs in code aren't obvious in how the page displays. Remember that you want your web page to display on any browswer so even though it displays nicely in one place may not mean that it works everywhere.

Do This

  • Find and fix all bugs in the starting HTML
  • You know you’ve found all of the bugs when your page match’s the Target Page
View on Code Studio

Student Instructions

Debugging Strategies

Debugging is a problem solving process. Using the Bug Bashing table in your Personal Web Development Practice packet, identify at least three of the bugs you encountered and describe how you were able to solve it. You can continue adding to this table as you encounter and fix bugs in the future.

Standards Alignment

View full course alignment