Finding Bugs

Lesson Content

• Lesson Plan Template:

  CTE Lesson Plan

• CTE Course Info and Benchmark Notes

  
  

  Program Title:

  Integrated Technology Studies

  Course Title:

  Coding Fundamentals

  Course Number:

  9009200

  Career Cluster:

  Information Technology

  CIP Number:

  0511020109

  Course Type:

  Orientation/Exploratory

  • 07.07 Troubleshoot and debug errors in code.
  • 07.02 Define the term “algorithm,” and explain how it relates to problem-solving.

• Unit Outline

  
  

  This lesson is designed to be used with the case study, “Finding Bugs.” See CPALMS resource ID #208506.

• Career Connection

  
  

  Debugging is an important skill to learn because it allows software engineers and computer science developers to problem solve errors before releasing it to the public.

  This lesson helps students develop skills such as, problem-solving, computer literacy, navigating digital communications, sharing ideas and dependability.

• Learning Objectives

  
  

  Students will be able to:

  • Build a CSS debugging checklist to identify malfunctions and coding errors.
  • Develop a presentation on debugging checklist using digital tools.
  • Discuss ways to improve the creativity of web layouts.

• Prior Knowledge

  
  

  Students should be able to/familiar with:

  • Building an external CSS stylesheet.
  • Identify CSS selectors, declarations, and the impact of values.
  • Basic HTML and CSS knowledge.

• Guiding Questions

  
  
  • How can coding be used to improve a malfunctioning and outdated website?
  • What are the steps to debug CSS?
  • Why is debugging important outside of computer science?

• Procedure

  
  
  1. Teachers will introduce the term of debugging and its meaning in computer science.
     • Definition: Debugging is the process of finding and fixing errors or bugs in the source code.
  2. Engage students in a discussion (in pairs, or small groups) on the guiding questions. Students will be required to provide examples of debugging HTML and CSS that they have experienced. The purpose of the discussion is for the students to begin defining what an algorithm is pertaining to coding and how they can problem solve coding bugs thanks to creating a debugging checklist.
  3. Have students read and review the given case study, Finding Bugs, CPALMS Resource 208506. Then, divide students into groups to role play as Joe who now wants to help Lauren develop a helpful checklist on how to debug CSS.
  4. Using a teacher chosen digital platform, divide students into pairs to brainstorm and create a checklist of steps describing how to debug a CSS code. Checklists should include examples of errors.
     • See the lesson attachment, Teacher Notes, for guidance.
  5. To close the lesson, students will present their findings and share with the whole classroom.
  6. After the presentation of group work, ask students how debugging may improve the creativity of web layouts (exit ticket).

• Teacher Notes

  
  

  Students will use posters or presentation to make a checklist on how to approach CSS errors providing common mistakes they have experienced as well.

  Common mistakes in CSS:

  1. Punctuation errors (example: forgetting braced brackets after the selector is set)
  2. IDs, classes (example: IDs begin with #, classes begin with a .)
  3. Margin and Padding (example: margin clears an area outside the border, while padding is the area around the content).

• Optional

  
  

  Extension Idea:

  Students may be provided with a CSS code full of "bugs" and they are required to debug using their checklist (this is an extension).