Lesson 18: Planning a Multi-Page Site


Question of the Day: How do we plan a web page as a group?

Students work in teams to plan out their web sites and create a sketch of each page. They then download the media that they will need for their sites. At the end of the activity, they decide how the work will be distributed among team members and report whether the entire group agreed to the plan.


This lesson gives students a chance to plan as a team. They will need to make many group decisions and have effective ways of resolving disagreements. The plan that they create will be referenced over the next few lessons as they build their sites.

Assessment Opportunities

1. Distribute tasks amongst team members.

Check over the work plan at the bottom of the activity guide and make sure that it is specific enough to be useful and that it seems to be a fair and reasonable division of work.

2. Seek and incorporate feedback from team members.

In the wrap up, check that students have reasonable ways of handling disagreement with one another.


Lesson Modifications

Warm Up (10 minutes)

Activity (30 minutes)

Wrap Up (5 minutes)

View on Code Studio


Students will be able to:

  • Distribute tasks amongst team members.
  • Seek and incorporate feedback from team members.


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

For the Teachers

For the Students


Report a Bug

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 (10 minutes)

Discussion Goal

The goal of this discussion is to make sure that the various features that students have learned are top of mind when they begin to design their sites. Make sure students are mentioning the features that they have particularly enjoyed in the unit, and review the tags and css properties that create them.

Prompt: Write down the top three fun features that you might like to add to your site.

Share: Allow students to share out some of their favorite features.


Today, you'll have a chance to design your websites in your teams. You'll get to work together to decide how all of these features can go into your sites.

Question of the Day: How do we plan a web page as a group?

Activity (30 minutes)

Group: Place students into project groups.

Distribute: Hand out the project guides, one for each group.


Review the project requirements with the students, emphasizing that part of the project is working together as a group. Assure them that they will learn how to add new pages and link between them in the next lesson, but that they will plan out the pages that they want first.

Teaching Tip

You may want to ask groups to run their sketches by you before moving on. Make sure that the pages all appear to be the same style, and that they include a way to navigate from one to another.

Design Your Site

Teams should describe each page in the site, including its purpose. On separate sheets of paper, they should sketch out the various pages. This allows different team members to focus on different pages.

Describe Your Tag and Class Styles

Students should decide together how they would like all of the elements to be styled. They may want to refer back to the sketches in order to decide together.

Work Plan

Once the design is set, teams should decide how they will split up the work. There are multiple pages and a style sheet to consider. They should also consider how they will incorporate the different components into a single project.

Check to make sure that all of the students are in agreement about the plan.

Find Your Images

Once students have gotten your approval for their site designs and work plan, allow them to go online to find images for the site.

Uploading images

Once students have gotten their images, allow them to upload them into the project on Code Studio. Every student within each team should have an identical set of images with identical names.

Wrap Up (5 minutes)

Assessment Opportunity

Check that student descriptions of the disagreement and resolution involve effective and collaborative strategies for working together.


Question of the Day: How do we plan a web page as a group?

Prompt: Describe a difference of opinion that members of your team had, and how you resolved it.

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

Student Instructions

  • Upload Your Images
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Upload Images

Upload all of your team's images into your project.

Do This

  • Upload all of the images listed in your team's web site plan into your project.
  • Double check that each image file name uses good naming conventions.
  • Double check that everyone on the team has the exact same images with the exact same names.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 1B-AP-11 - Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.
  • 1B-AP-14 - Observe intellectual property rights and give appropriate attribution when creating or remixing programs.
  • 1B-AP-16 - Take on varying roles, with teacher guidance, when collaborating with peers during the design, implementation and review stages of program development.
  • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
  • 2-AP-15 - Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
  • 2-AP-18 - Distribute tasks and maintain a project timeline when collaboratively developing computational artifacts.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
IC - Impacts of Computing
  • 1B-IC-20 - Seek diverse perspectives for the purpose of improving computational artifacts.
  • 1B-IC-21 - Use public domain or creative commons media and refrain from copying or using material created by others without permission.