Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
10
11
12
13
Ch. 2
14
15
16
17
18
19
20
21

Lesson 12: Your Web Page - Prepare

Overview

Question of the Day: What do we need to do to prepare to build our web pages?

In this lesson, students engage in the "prepare" stage of the problem-solving process, deciding what elements and style their web page will have. They begin by reviewing the different HTML, CSS, and digital citizenship guidelines they will need in building their web pages. They then describe and sketch their pages, listing the tags and styles they will use to get the layout and design that they decided on. They then move online to find and download the images they will need for their pages. Afterwards, they reflect on how their plan will ensure that the website does what it is designed to do.

Purpose

This lesson reinforces the idea that students should design and plan their pages before they start coding. It provides a structured process for planning that ties into the problem solving process that threads throughout the course. The plan should tie back to the "Define" worksheet that students completed a couple lessons before, and gives them something to use as they build their pages in the next lesson.

Assessment Opportunities

  1. Logically separate the content, structure and formatting of a digital artifact

    In the activity guide, check that the design sketch includes the content, and that the tag and style columns in the "Describe your styles" section are filled out with HTML tags on the left and style descriptions or CSS on the right.

  2. Create documentation that explains the design decisions of an artifact

    In the wrap up, check that students have tied their design decisions in the Activity Guide with the goal of the website as stated in the earlier lesson.

Agenda

Lesson Modifications

Warm Up (5 min)

Activity (20 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Logically separate the content, structure and formatting of a digital artifact
  • Create documentation that explains the design decisions of an artifact

Preparation

  • Print out one copy of the activity guide for each student.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

For the Students

Support

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 2.

Warm Up (5 min)

Discussion Goal

Goal: This is a chance for students to remind themselves of (and for you to check on) the most important things that they have learned in the unit so far. While the focus may vary from class to class, most classes should have a few things to say in every category. Make sure that you are highlighting the differences between structure (HTML) and style (CSS) in your conversations. If you have noticed particular obstacles for your students, this is a good place to make sure they are prepared to face them.

Prompt: We've learned a lot of HTML and CSS in this unit, and also a lot about how to be responsible digital citizens. We're about to plan out the specifics of our web pages. Take a few minutes to think about some of the most important things that we should remember during the project in these categories:

  1. HTML tags and tips/tricks for using them
  2. CSS properties and tips/tricks for using them
  3. How to be responsible and safe online

Discuss: Have students share out their ideas and display them at the front of the class.

Question of the Day: What do we need to do to prepare to build our web pages?

Activity (20 min)

Distribute: Hand out student journals or the activity guide, if students are not using journals. If available, students may want to use colored pencils or crayons to sketch their pages.

Describe Your Page

Give students a few minutes to describe and sketch out their page. Remind them that they should be thinking about layout as well as content, but that they do not need to include every word of the page. They can also put more details about the element styles in the next section.

Describe Your Styles

Each student should choose tags related to some of the elements on their pages and describe what those elements will look like (color, size, etc.). It's not necessary that they write down the exact CSS properties, but there should be enough information that they can use it to guide them when they make their pages.

Teaching Tip

You may want to have each student check in with you on their web page plan before allowing them online to find their images. Make sure each student has sketched out a rough site and described the styles for a few different tags. The sketch and description should show that the page will be sufficient to demonstrate that they have acquired the target skills and understandings of the chapter.

Find Your Images

Transition Allow students to go online to find the images that they want to use for their sites. Make sure that they are writing down the information about the copyright and that they can tell you where the image is from, so that they (or you!) can find it in the future.

Wrap Up (5 min)

Assessment Opportunity

Check that students have tied design decisions to the purpose of the website as explained in the "Websites for Expression" lesson.

Journal Prompt/Exit Ticket

Question of the Day: What do we need to do to prepare to build our web pages?

Prompt: Think back to the "Define" part of this project. Explain two ways that your plan will make your personal web page successful.

Collect: Collect the journals or the activity guides where students planned their pages. They will need them in the next lesson.

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.