Lesson 18: Planning a Multi-Page Site
Overview
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.
Purpose
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.
Agenda
Lesson Modifications
Warm Up (10 minutes)
Activity (30 minutes)
Wrap Up (5 minutes)
View on Code Studio
Objectives
Students will be able to:
- Distribute tasks amongst team members.
- Seek and incorporate feedback from team members.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Planning a Multi-Page Site - Slides
- Project Guide - Website for a Purpose - Prepare - Exemplar
For the Students
- Website for a Purpose - Rubric
- Plan a Multi-Page Website - Project Guide
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.
Remarks
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.
Overview
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.
Journal
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
- Upload Your Images
- 2
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.