Clean Code and Debugging

1. Teacher Prep
●Put an poster up on the wall where all
students can get to it. Title the poster "Class
Bugs"
●Sticky notes

3. LESSON 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.

4. Warm Up
Today you will be working with your table row!

5. Warm Up
With Your Group:
• Using your sticky notes, 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?

6. Bug
Part of a program that does not work correctly.
Debugging
Finding and fixing problems in your algorithm or program.
NEW WORDS!

7. Warm Up
Using your sticky notes, now write 3 bugs you’ve
encountered
Each sticky should have:
1. A brief description of the bug
2. Steps taken to solve it .
3. Name of student who solved it
Once groups have written down their at least three bugs,
stick them up on the class poster.

8. Warm Up
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.

9. BUG REPORT!
During today’s lesson, if you squash a bug and want to
write up your bug report, you can write it on your sticky
note. Make sure you include your name, description of
bug, and how you fixed it!
If anyone gets stuck today they can go look at the bug
reports to see if they find any help!

10. Go to Code Studio
Unit 2, Chapter 1, Lesson 8
Work through level 2, 3, 4, 5, and 6
https://studio.code.org/s/csd2/stage/8/
puzzle/2

11. Formatting HTML
We are going to read the the level 7 together.
But before we do, the next two slides have
some NEW WORDS!
After we are done reading level 7 anyone that
has completed 2-6 can move on to level 8!

12. Comment
A comment is a programmer-readable note in the source code of a
computer 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.
NEW WORDS!

13. 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.
NEW WORD!

14. WRAP UP
What made it harder or easier
to debug the web pages?

15. WRAP UP
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
formatting practices to ensure our code is easy to
read for people, not just good enough for a computer
to use.