Day 1Day 2Day 3Day 4Day 5

Session 13: Model Lesson 3: U2L3 Intro to HTML

75 minutes

lesson exploration | role play

Purpose

  • Set the tone for TLO sessions for the week
  • Demonstrate best practices with an plugged lesson
  • Demonstrate Web Lab
  • Demonstrate the first get on Code.org moment

Objectives

  • Act as learners in a demo lesson modeled by facilitator
  • See a plugged lesson modeled
  • Be introduced to the course by experiencing the course

Supplies & Prep

Room Setup:

  • Normal Breakout Room Set Up

Facilitator Supplies and Prep:

Teacher Materials:

Agenda

Kick Off (5 minutes)

Lesson (40 minutes)

Debrief (30 minutes)

Facilitation Guide

Kick Off (5 minutes)

(2 minutes) Previously On

Using the slides go over the lessons in Unit 1 and Unit 2 they will have skipped to get here

  • Unit 1 Lesson 7 to 9 - Just remind them that we wrapped this up end of day on Monday
  • Unit 2 should be kicked off in the morning session but remind them:
    • Unit 2 Lesson 1: Students explore the different kinds of websites that people make and their purposes
    • Unit 2 Lesson 2: Students begin designing their own website for self expression, including brainstorming its content.

(1 minute) Role Reminders

  • Remind everyone of their roles during the model lesson

Remarks

Put your hats on and lets get ready to go!

Lesson (40 minutes)

(10 minutes) Warm Up

Display: Show the image inside the Exemplar Text Website - Website

Prompt: Imagine you wanted to explain to a person over the phone how to draw this web page.

  • Pair: Talk to your elbow partner about the instructions would give to describe this web page
  • Share: Then popcorn around to have people give instructions. As people give instructions act as the person on the other end of the phone trying to recreate the image. Make mistakes highlighting that it's difficult to know what instructions are telling you how to write things and some are telling you what to write.
  • Repeat this process until you have recreated most of the web page

Remarks

There's a lot of information that we need to communicate if we want to create web pages. It's not enough to just know what content you want to put on your page, like the actual words or images. You need to know where things should be and how they should look. Today we're going to start learning the languages used on the web to represent this additional information.

(30 minutes) Main Activity: Exploring HTML

Teaching Tip

Using Resources: Below you can find the recommended way of using the many resources students are introduced to in the lesson. Wait until after students have seen all of these resources to review at the end of the lesson, but model the correct usage as they appear.

  • Videos: Watched as a class but students can always return to them
  • Help & Tips Pages: Contain text and diagrams explaining content. These are intended as helpful student resources, not class readings. They are a good place to go for review after learning content or when students get stuck in levels.
  • Level Instructions: Instructions may introduce small pieces of new content. Each level features a "Do This" section explaining what students are supposed to do in that level. set the expectation early that reading these instructions, not just the "Do This" is important.
  • Level Tips: Students can click these tips in the instruction areas of lessons. Students should use these as a first place to check for help before talking with peers or a teacher.
  • Inspector Tool: Highlights the code corresponding to a web page element when hovered over in the Preview Area.
  • Bubble Color: Bubbles may turn green but there is no validation of correctness. Green only means a student clicked Continue or Finish for a level. Set the understanding early that this is more a tool for them than an indication of either completeness or correctness.

Remarks

Today we are going to start working with a lot of resources. I'm going to leave a list here at the front of the room, and at the end of the lesson we'll review how each is used.

Display: Write the following list at the front of the room

  • Videos
  • Map Levels
  • Level Instructions
  • Level Tips
  • Inspector Tool
  • Bubble Color

Group: Place learners in pairs with a single computer. They do not need to formally use pair programming here but encourage students throughout the lesson to switch who is writing the actual code.

Transition: Move learners onto the level progression for the lesson. Slides will help you communicate how they should move online but be prepared for this to take a while.

Level 2: Have pairs work together on this level. Encourage discussion.

Video 1- Level 3: Show the video to the whole class on the projector.

Level 4: Have pairs work together on this level. Encourage discussion.

Discuss: Discuss as a class what learners have discovered by comparing the code to the output. Use the prompts actually in the level. Give many learners a chance to share and try not to just jump to "right answers", especially those clearly coming from content experts. You can make connections back to the warm-up activity.

Video 2 - Level 5: Show video 2 to the class.

Map Level - Level 6: Give learners about 30 seconds to look at the map level and understand that it is a resource to help them if they get stuck. There's also some interesting links there if they want to explore once they're done with the rest of the lesson.

Levels 7-9: Have pairs work through these levels together, encouraging them to switch who is writing the actual code.

This lesson will likely end with students working on the levels and thats fine. We are modeling that its okay to run out of time.

Debrief (30 minutes)

Have everyone take their hats off and exit their role. They can now think normally as teachers.

Lead who did not teach the model lesson runs the debrief.

Teaching Tip

Possible Goals: This is the first time the a tool is used in a lesson. Might want to talk about managing tools in a lesson. Since a facilitator is running this lesson hopefully you can hint towards how they used the “get them in the tool and let them figure it out”

There are also a bunch of resources to consider here (videos, maps, instruction expandos). Consider having teachers think about each of these can address different student needs in their own classrooms.

(5 minutes) Debrief: Individual Reflection

  • 2-3 minutes to individual reflect then chat at the table

Suggested Prompt: What kinds of things were you doing in this lesson when you were learning?

Note: During this time the facilitator who modeled the lesson should be preparing to share out using the teaching reflection questions.

(24 minutes) Debrief: Share-Out

  • During the share-out take notes in the shared notes doc

  • Start the share out with the "teacher" (the lead facilitator who modeled the lesson) sharing out about choices made in teaching the lesson.

    • Choices Advice, Takeaways
    • Facilitators share their planning document for the lesson
    • Make sure to highlight resources or parts of the lessons you made "choices" to skip
  • Then pose your follow up question and start the whole group debrief discussion

    • Suggested Prompt: As you transition to using Web Lab, what might be some ways you can ensure students continue to use the Student Practices of collaboration and communication?

(1 minute) Next Session Reminder

End of Session Reminder: At the end of this session teachers will have a 15 minute break before they start Lesson Planning. Make sure to let teachers know what time you want them back in the room before they head out for break.