Debugging a Business Website

Lesson Content

• Lesson Plan Template:

  CTE Lesson Plan

• CTE Course Info and Benchmark Notes

  
  
  • Course Name: Coding Fundamentals
  • Course Number: 9009200
  • Course Type: Orientation/Exploratory
  • CIP Number: 0511020109
  • 06 Create a program that implements an algorithm to achieve a given goal, individually and collaboratively.
  • 07.07 Troubleshoot and debug errors in code.

• Unit Outline

  
  

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

• Career Connection

  
  

  Problem solving through collaboration is a fundamental skill to learn because it allows software engineers and computer science developers to determine why an operating system, application or program is misbehaving.

  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:

  • Collaborate with a partner to debug CSS declarations.
  • Solve errors present in a mock business website.
  • Create a successful code that is free of errors.
  • Produce a digitally written response explaining ways to debug the website/code.

• 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 is the syntax structured for CSS selectors?
  • What impacts do declarations have in your HTML code?

• Procedure

  
  
  1. Teacher will introduce what it means to have an external CSS document and review the CSS syntax with properties and their values when creating a business website.
  2. Then, students will read the case study independently.

     • Here are some suggestions:

       • Number the paragraphs on the case study before printing
       • Pre-teach the following vocabulary words and their definitions: Freelance, clientele, expertise, meticulous (list the words and their definitions in your procedures)
       • Students should circle or underline the vocabulary word in the text and write the definitions in the margins.
       • Teacher should then read the question and background paragraph aloud while students follow along.
       • In the margin of the first paragraph, students should write a “gist” statement (a “gist” statement is a two to four word statement that captures the essence/main point of the paragraph.
         • Paragraph 1 gist: Joe graduated from college and got a programming job
         • Paragraph 2 gist: Joe hires Nathan and Lauren to help him our with the landscaping website
         • Paragraph 3 gist: Lauren is challenged by debugging the CSS portion of the website.
         • Paragraph 4 gist: Due to the lack of guidance from Nathan and Joe, Lauren reaches out to her web programming teacher for help.
       • After reading the question and first paragraph, check for student understanding
       • Students can partner read the rest of the case study while the teacher walks around the room and monitors to answer questions students might have.
  3. Teacher will then ask the students to role play in pairs a discussion between Lauren and her boss Joe (students may share their finding in an online discussion board and/or a digital tool of teachers' choice). Encourage the students to answer the following questions:
     • "What would you say/do if you were Lauren?"
     • "How would you respond to Lauren's challenges to complete her work?"
     • Have each pair brainstorm two ways that can help Lauren debug her website.
     • Students may share their finding in an online discussion board and/or a digital tool (teachers' choice).
  4. Teacher will provide the HTML file and assist students on how to run it properly on a code editor software and/or online platform of their choice.
  5. After this task, students will be divided into new pairs and role play if they were to be Nathan and Lauren from the case study. Teachers will provide students with the CSS file (both on the computer and a paper version as well) that has bugs and errors. Students will work to debug CSS properties and/or values that seemed in need of adjustments.
     • One student is responsible to circle the “bugs” on paper
     • The other student is making the adjustment on the code editor and running the code to see how the website is positively responding to the debugging in real time.
  6. Students will create a digital written response to Joe (the owner) explaining two changes they made to the website to improve it. Suggestions: students may email him, or send him a digital message updating him on the adjustments made.

• Teacher Notes

  
  
  • An answer key with the CSS bugs is provided to the teacher as guidance to this lesson plan.

• Optional

  
  

  Extension Idea:

  • Students work together using digital tools to create the company business logos as well as a website graphic to be included in the HTML file (named as image_one and image_two).