Day 1
01 Intro 02 ML 1: U1L3 03 Break 04 CSD Overview 05 Lesson Process 06 Transition to Asynchronous 07 Lunch 08 ML 2: U1L7 09 Break 10 Tools and Strategies 11 The PLACE 12 Transition to Asynchronous 13 Fac. Debrief
Day 2
14 Intro 15 ML 3: U2L2 16 Break 17 ML 4: U2L3 18 Transition to Asynchronous 19 Lunch 20 Asynchronous Debrief 21 Break 22 TLO 1: U2L5 23 Transition to Asynchronous 24 Fac. Debrief
Day 3
25 Intro 26 Understanding Context 27 TLO 2: U2L6 28 Break 29 TLO 3: U2L9 30 Transition to Asynchronous 31 Lunch 32 Asynchronous Debrief 33 TLO 4: U2L11 34 Break 35 TLO 5: U2L16 36 Transition to Asynchronous 37 Fac. Debrief
Day 4
38 Intro 39 Bias and Responsibility 40 TLO 6: U3L2 41 Break 42 TLO 7: U3L3 43 Transition to Asynchronous 44 Lunch 45 Asynchronous Debrief 46 TLO 8: U3L4 47 Break 48 Barriers, Opportunities, and Commitments 49 Transition to Asynchronous 50 Fac. Debrief
Day 5
51 Intro 52 Community 53 Prep for the Year 54 Break 55 Assessment 56 Transition to Asynchronous 57 Lunch 58 Asynchronous Debrief 59 Planning 60 Closing Ceremonies 61 End Early & Friday Facilitator Debrief

Session 15: Model Lesson 3: U2L2 Intro to HTML

65 minutes

lesson exploration

Purpose

Essential Practice: Teachers provide opportunities for exploration coupled with opportunities for sensemaking.

Lesson Decisions:

  • Allow participants time to explore Web Lab before discussing its capabilities as a whole group
  • Watch videos together as a whole group and utilize the discussion questions from the teacher resources to facilitate group sense making
  • Do not answer questions directly, instead point participants to resources that might help them answer the question themselves.
  • Have participants create a list of resources throughout the lesson in their journals.

Debrief Topic: Exploration

Objectives

  • Participants understand the value of exploration along with how resources can support student exploration.
  • Participants gain experience using HTML and Web Lab

Supplies & Prep

Room Setup:

  • Full Cohort
  • Table Groups (pairs)

Facilitator Supplies and Prep:

Teacher Materials:

Agenda

Kick Off (5 minutes)

Lesson (40 minutes)

Debrief (20 minutes)

Facilitation Guide

Kick Off (5 minutes)

(4 minutes) Previously On

Remarks

Previously, we learned about two important frameworks in the CS Discoveries curriculum. These include the Problem Solving Process and the Input Output Storage Processing (IOSP) sequence. These frameworks will be used throughout the course. As we begin to dig into Unit 2, we are going to have the opportunity to get some hands on experience designing websites.

Using the unit overview on pages 9-12 of the Curriculum Guide, introduce the unit. Specifically emphasize:

  • Structure of the unit
  • Concepts covered in the unit (including defining key terms used in the unit)
  • Types of lessons
  • The specific lessons that are introduced at this workshop

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

  • Unit 1 Lesson 9 - Remind participants that we wrapped this up yesterday
  • Unit 2 should be kicked off in the morning session but remind participants:
    • Unit 2 Lesson 1: Students explore sample websites and start to consider the purposes a website might serve, both for the user and the creators.

Facilitator Tip

Make sure participants have a piece of paper and a writing utensil for the lesson.

Facilitator Tip

Guide participants to the lesson before the start. This will allow you to focus on the content rather than the virtual tools.

(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

This activity is modified to increase participant engagement. Note that the web page is described to participants and they draw the page on a sheet of paper. The reveal is then made to participants so that they see the difference between their drawing and the actual page.

Warm Up (5 minutes)

The Need for HTML

Teaching Tip

If this site is blocked for students, your IT department may need to whitelist codeprojects.org. This is the same site that students will use to publish their own web pages, so it's important that they have access.

Remarks

You will need a piece of paper and a pen or pencil for this activity.

Prompt: Imagine you wanted to explain to a person over the phone how to draw a web page. I am going to give you verbal instructions for how to draw a web page that I am viewing. I want you to draw it as best you can on the piece of paper.

Discussion Goal

Activities like this one are often used in CS courses to help highlight just how much precision is needed to communicate instructions to a computer. In this instance the goal is similar. You want to highlight the challenge of differentiating the actual content on the page and instructions indicating how it should be structured. This demonstration helps justify the creation of HTML in order to tag pieces of content to help the computer understand what they are and hence how they should look.

Web Page Instructions:

  • Centered on the first line, write Our first website.
  • On the next line, write The quick brown fox jumps over the lazy dog on the left side
  • On the next line, right-aligned, write On the left side, write this really small
  • Skip a few lines
  • Centered on the next line, write On the right side, write the dog is brown
  • Skip a few lines
  • Left-aligned, Write The hippo enjoys a swim
  • On the next line, right-aligned, Draw a smiley face
  • On the next line, left-aligned, write Move up a little and write the number two
  • Skip a couple of lines and write Your Name right-aligned.
  • On the next line, write My Name right-aligned

Facilitator Instructions: Once participants have drawn what they think the web page looked like, have them reveal their pages to their webcams for a minute.

Display: After a minute, reveal the image of the actual page.

Discuss: Once you have finished drawing the site, quickly create a list of all the different kinds of information you needed to account for in the instructions. (For example, location, size, font, etc.)

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.

Question of the Day: How can we tell the computer both what to put on the web page, and how to organize it?

Key Vocabulary:

  • website content - the text and images on a website
  • website structure - how the content of a website is organized

Producer Tip

Begin the process of assigning partners to breakout rooms.

Facilitator Tip

Divide the breakout rooms into two equal-sized groups. For example, put all even table groups into one group and all odd table groups into a second. Decide ahead of time which groups each of you will be in charge of “floating” to. One facilitator can take the even numbered groups and one facilitator can take the odd numbered groups. Observe students working and guide students when they need assistance. The focus of guidance should be a reliance on others for assistance. Respond to questions by asking other students what their thoughts are. Facilitators will not share their screens during this time, but rather have students share theirs so groups can work together to solve problems.

Activity (30 minutes)

Exploring HTML

Remarks

I want you to move to Bubble 1 in Lesson 2. Here you will find a new tool called Web Lab. I want you to play around for a little and see what you can figure out!

Facilitator Instructions: Allow teachers time to play around with the tool. After giving students some time to explore the tool, ask them to share out anything that they have discovered. The video on the next level will give them a short tour, so it's okay if they don't notice everything.

Partner Exploration

Remarks

In a moment, I am going to put you with partners to work through this level. As you work, I want you to keep an eye out for resources. Those are anything that can help you as you work, like videos. Jot down any that you come across as you work.

I am now going to put you with a partner. Watch the video in Bubble 2 on your own, then begin working with your partner on Bubble 3 and try to get as far as you can.

Assessment Opportunity

Students answers will vary but will likely center around the fact that using tags helps the computer know what different pieces of content "are". As students discuss HTML as a solution, make sure that they are using the key vocabulary of the lesson:

  • website content - the text and images on a website
  • website structure - how the content of a website is organized
  • HTML - Hypertext Markup Language, a language used to create web pages
  • HTML Element - A piece of a website, marked by a start tag and often closed with an end tag
  • HTML Tag - The special set of characters that indicates the start and end of an HTML element and that element's type

The content is the literal words that are being typed on the page. Using HTML students are providing structure to the page, explaining how those pieces of content should be interpreted.

Wrap Up (5 minutes)

Reflection

Question of the Day: How can we tell the computer both what to put on the web page, and how to organize it?

Journal Prompt: In your own words, how does HTML help solve the problem of telling a computer what a web page looks like, not just what content is on it? Discuss: After students have had time to reflect individually in the journal, allow them to discuss with a partner, then share with the class.

Remarks

HTML uses tags to help the computer know what different pieces of content in the web page actually are. Right now we've only learned how to tell the computer that some text is a paragraph, or that part of your website is the body. We've already seen how that affects the way our web pages look and are structured. As we move forward we're going to learn more tags and see more examples of how this language helps us add structure to our web pages.

Review: Return to the list of lesson resources you wrote on the board and review as a class how they are supposed to be used.

Debrief (20 minutes)

Suggested Debrief Plan
Be Sure to Model Essential
Practices		 Teachers provide opportunities for exploration coupled with opportunities for sensemaking.
Lesson Decisions
  • Allow participants time to explore Web Lab before discussing its capabilities as a whole group
  • Watch videos together as a whole group and utilize the discussion questions from the teacher resources to facilitate group sense making
  • Do not answer questions directly, instead point participants to resources that might help them answer the question themselves.
  • Create a poster with a list of resources throughout the lesson and refer to it often. Have participants keep a similar list in their journals.
If the essential practices, listed above, are present in the lesson we recommend the following for your debrief:
Debrief Direction Topic Exploration
Goal Participants understand the value of exploration along with how resources can support student exploration.
To reach this goal, consider using the following reflection and discussion prompts:
Debrief Suggestions Reflection
Prompt		 As a learner, what was the benefit of exploring Web Lab before watching the videos and discussing the tool as a class?
Discussion
Prompts
  • How do resources support students in exploring new tools and new concepts?
  • How will you support students using these tools in your classroom?
  • Due to the virtual environment, students watched the video on their own. However, in an actual classroom, the teacher would have the class watch the videos together. How would this decision support student exploration?

Discussion Goal:Participants should understand that sensemaking is a crucial part of exploration. Resources support students in sense making by providing a place for students to go to answer their own questions, revisit concepts they have already learned, and learn new things to push their skill set further. Watching videos together provides an opportunity for class discussion sensemaking. This is also a time to reinforce concepts that have been explored and to ensure all students have the basic understandings necessary to be successful in future activities. When students are set up for success, they are more likely to feel a sense of belonging in the class.

FACILITATOR NOTE:
As you discuss this prompt, look for places to draw out the decisions for this lesson, listed above.