📖 Upload as Material in Google Classroom:
- Slides (make a copy for your program - upload the copy)
- Coding Exercise(s)
📝 Upload as Assignment in Google Classroom (5 points):
- Exit Ticket (DO NOT MAKE A COPY - upload as link)
This lesson focuses on reviewing and debugging HTML and CSS concepts. Students are guided through the principles of clean coding and effective debugging strategies. Additionally, the lesson revisits core HTML and CSS concepts, such as structuring web pages, adding style, using selectors, and emphasizes the importance of these technologies in web development, preparing students for a coding challenge.
-
👋 Welcome (5) :
- Greeting students and setting the tone for the lesson.
- There is no Do Now for this lesson - most of the time will be spent reviewing and with practice.
-
🪳 Debugging (5) :
- Introduce debugging and its importance.
- Normalize errors in coding, discuss how they’re common for everyone.
- Introduction to Debugging Strategies: Write clean code, Use documentation, Read error messages.
- Analyze code snippets, emphasize formatting and organization.
- Use Repl.it Features: Teach how to auto-indent and use Repl.it for clean code.
- Utilize Documentation: Show how to use documentation for HTML errors.
-
👾 Coding Challenge Intro (5) :
- Explain the purpose, structure, and rules of the coding challenge for next class.
- This is introduced before the review to give a clear framing to students on what to expect.
-
🔄 HTML Review (10) :
- Review the basic structure of HTML and its importance.
- Discuss HTML: Explanation, importance, and structure of HTML.
- Review HTML Elements: Tags, attributes, and their purposes.
- Code Along: Guide students through a live coding example.
-
🔄 CSS Review & Exercise (10) :
- Review the styling capabilities of CSS and its importance.
- Discuss CSS: Explanation, importance, and structure of CSS.
- Review CSS Selectors: Tag selectors, class selectors.
- Code Along: Guide students through a live coding example.
-
👋 Closing (5) :
- Assess understanding and close the lesson.
- Exit Ticket: Direct students to the Exit Ticket in Google Classroom.
- Make sure students have submitted their exit ticket.
-
Debugging Is About Finding Major Mistakes Only:
- Misconception: Debugging is often misunderstood as the process to find only major or catastrophic errors.
- Clarification: Debugging is about finding and fixing any errors, even minor ones, and improving code quality. It’s a regular part of the coding process, not just something done when there's a significant failure.
-
Writing More Code Lines Is Always Better (or Worse):
- Misconception: Some may think that more lines of code mean better quality, while others may believe that fewer lines are always preferable.
- Clarification: Quality coding is about writing clean, readable, and efficient code. Sometimes that requires more lines for clarity, and sometimes concise code is more effective. Neither is inherently better or worse.
-
CSS Is Just About Making Things Look Pretty:
- Misconception: CSS is often reduced to just colors, fonts, and basic styling.
- Clarification: While CSS does control aesthetics, it also handles layout, responsiveness, animation, and other complex design aspects. It's a powerful tool for overall user experience, not just superficial design.
-
Errors and Bugs Are a Sign of Failure or Lack of Skill:
- Misconception: Encountering errors or bugs in code is often seen as a sign that a programmer has failed or lacks skill.
- Clarification: Even experienced programmers encounter errors and bugs. They are a natural part of the development process and can even be helpful learning tools. Debugging is a vital skill that helps programmers understand their code better, and facing errors doesn't mean failure or incompetence.
- n/a