Session 33: TLO 4: U2L11 Styling Elements with CSS

65 minutes

lesson exploration

Purpose

Essential Practice: Students have strategies for debugging

Potential Teaching Group Decisions:

The teacher directs participants to the student version of the “Guide to Debugging” and prompts them to use the debugging process when they encounter bugs.
Teacher instructs participant to complete at least one debugging level in the practice choice level (Level 7)
Teacher has participants document bugs in their journals
In the wrap up, after students have written about the new CSS properties they have learned, teachers lead a discussion on potential bugs that might arise with these new properties (highlight bugs highlighted in Level 7 debugging activities if participants struggle to come up with potential bugs on their own)

Debrief Topic: Debugging

Objectives

Participants have brainstormed ways to support students in the process of debugging
Participants have used CSS properties to change the size, position, and borders of elements

Supplies & Prep

Room Setup:

Full Cohort
Table Groups (3-4)

Facilitator Supplies and Prep:

CSD Module 3 Slides

Teacher Materials:

Agenda

Kick Off (5 minutes)

Lesson (40 minutes)

Debrief (20 minutes)

Facilitation Guide

Kick Off (5 minutes)

Producer Tip

You should have information from the teaching group on how they would like to handle breakout rooms. Verify that the information is correct during the break prior to the session

(2 minutes) Teaching Group Set Up

Teaching group sets up whatever they need for the lesson. If they can do this during break it will mean more debrief time.

Producer: Temporarily give the teaching group Co-Host privileges so that they can move in between breakout rooms.

Producer: If using breakout rooms, set up the participant rooms, a “Teacher” room, and a “Facilitator” room

(2 minutes) Previously On

Show Unit calendar to highlight where we are in the unit.
Go over the lesson that was skipped
- U2L10: Websites for Expression
  - Students investigate ways to use websites as a means of personal expression and develop a list of topics and interests that they would want to include on a personal website
  - This lesson emphasizes that web development, and by extension computer science, is an avenue for self expression

(1 minute) Role Reminders

Facilitators reminds everyone of their roles during the model lesson

Remarks

Put your hats on and let's get ready to go!

Lesson (40 minutes)

Facilitator Tip

To make teachers feel more comfortable, it may be a good idea to turn off your camera throughout the lesson and/or change your name to “Facilitator - Ignore Me”. This can be helpful while moving through breakout rooms so “students” do not look to you for answers.

Facilitator Tip

If breakout rooms are used, it is important to get a sense of what is happening in them. As you move through the rooms, make sure that you are not providing input. If you are asked for it, remind teachers using chat that you are not a teacher right now and they can use the call for help button if needed.

Producer Tip

Just as with facilitators in breakout rooms, you may need to act as a “messenger” for the teachers. If a group presses the “call for help” button, you will need to find the teachers and inform them that a group is asking for help.

Facilitator Instructions

Be attentive to what is happening during the lesson as you select your debrief goals, reflection prompts, and discussion prompts. During the lesson, it is recommended that you communicate with your co-facilitator to share what you are seeing in the lesson and develop a shared understanding of the goal of the debrief for the lesson. You can communicate through Slack or through passing notes to one another. You are looking for the teaching group to demonstrate the “Essential practice” and “Teaching group decisions” identified in the debrief below.

Lesson Plan Link

Lesson Slides Link

Lesson Objectives

Students will be able to:

Use CSS properties to change the size, position, and borders of elements.
Create a CSS rule-set for the body element that impacts all elements on the page.

Lesson Overview

This lesson continues the introduction to CSS style properties, this time focusing more on non-text elements. Students begin this lesson by looking at a website about Desserts of the World. They investigate and modify the new CSS styles on this website, adding their own styles to the page. After working on the Desserts page, students apply their knowledge of new CSS properties to do more styling of their personal websites.

Producer Tip

You will need a breakout room for the teaching group to debrief while the main group does their reflections.

Question of the Day:

How can we style the images and layouts of our pages?

Debrief (20 minutes)

Suggested Debrief Plan
Be Sure to Model	Essential Practices	Students utilize strategies for debugging
Be Sure to Model	Potential Teaching Group Decisions	The teacher directs participants to the student version of the “Guide to Debugging” and prompts them to use the debugging process when they encounter bugs. Teacher instructs participant to complete at least one debugging level in the practice choice level (Level 7) Teacher has participants document bugs in their journals In the wrap up, after students have written about the new CSS properties they have learned, teachers lead a discussion on potential bugs that might arise with these new properties (highlight bugs highlighted in Level 7 debugging activities if participants struggle to come up with potential bugs on their own)
If the essential practices, listed above, are present in the lesson we recommend the following for your debrief:
Debrief Direction	Topic	Debugging
Debrief Direction	Goal	Teachers have brainstormed ways to support students in the process of debugging
To reach this goal, consider using the following reflection and discussion prompts:
Debrief Suggestions	Reflection Prompt	As a learner, what did you do when you encountered bugs? How did you work through them?
	Teaching group returns and shares "Choices, Advice, and Takeaways"
	Discussion Prompts	Prompts: What strategies can you use to manage students who get frustrated easily with debugging? How might these strategies help students feel a sense of inclusion in CS? At the conclusion of the discussion, have participants turn to the Guide to Debugging in Appendix C of the curriculum guide. This guide is the teacher facing Guide to Debugging that corresponds to the student facing Guide to Debugging that has been used thus far in this workshop. Have participants skim this document to get the idea of what is here. There is no need to have participants read this entire document at this point. The goal is for participants to know this resource is available if they are ready to dig more into the process of debugging. For some, this might be too much information to digest at this point. For this reason, you will return to this document and dig deeper into debugging during the Academic Year Workshops. Discussion Goal: This is a time for participants to share ideas and strategies with each other. Bugs can be very frustrating for students if they have not developed appropriate strategies to debug their work. Debugging is also a great place for collaboration and group problem solving. Setting up a classroom culture of debugging from the start can go a long way in creating a positive classroom culture that promotes students feeling a sense of inclusion. Facilitator Note: As you discuss this prompt, look for places to draw out the decisions for this lesson, listed above. FACILITATOR NOTE: During your debrief, avoid the topic of teaching in the virtual world unless you know the majority of teachers will be virtual next year. Many teachers will be in person, and conversations about choices made for the virtual setting will not be helpful as teachers return to the classroom.