Lesson 20: Project - Website for a Purpose

Overview

Question of the Day: What skills and practices will help us work together to make a great website?

Teams have spent a lot of time throughout the chapter planning their websites. In this lesson they are finally able to code their pages. Using the project guide, the team works together and individually to code all of the pages, then puts all of the work together into a single site.

Purpose

This project emphasizes many of the core practices of this course. Students will need creativity, problem solving skills, persistence, collaboration and communication to complete their websites.

Agenda

Lesson Modifications

Warm Up

Activity

Wrap Up

View on Code Studio

Objectives

Students will be able to:

  • Create a digital artifact
  • Distribute tasks among team members and maintain a project timeline

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

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

Team Cheer

Teaching Tip

Depending on your classroom, you may want to alter the activity. Any activity that gets students in a good mood to persist through coding out this project will work well.

Remarks

Your teams have been working hard for these past few lessons, so we're going to take a bit of time to celebrate. You have five minutes to think of a great cheer for your team.

Share: Give students some time to come up with a cheer for themselves, then allow them to share with the class if they'd like.

Activity

Web Lab

Remarks

Now that we're ready to get going, it is time to begin implementing the plans that you've made.

Distribute: Return the "Prepare" project guide to groups.

Transition: Teams log onto Code Studio and begin finalizing their websites.

Wrap Up

Shout-out!

Prompt: Your team just worked really hard! Give one shout-out to each person on the team about something that they did especially well.

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

Student Instructions

  • Your Team Project
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Your Group Project

Here is your group project. It already has an index page, but you'll need to create all of the other pages.

Do This

  • Double check all of the page names in your website plan to make sure they follow good naming conventions.
  • Check with the rest of your group if you need to change a page name.
  • Create a new page for each of the pages in your website plan.
  • Inside each new page, create an HTML comment that describes the page and who is in charge of it.
  • Check to make sure everyone in your group has the exact same list of HTML pages.
  • Add Content and HTML
  • 3
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Add Your Content and HTML

Now add all of the HTML you will need for your project, including links to the stylesheet and other pages.

If you are responsible for the navigation bar, add it here, too.

Do This

  • Add HTML to the pages.
  • Test your links to make sure that they work.
  • Check that all of your images are displaying.
  • Share Your Pages
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Share Your Content and HTML

Share your web page with your teammates, and copy and paste the code for their pages into your project.

Do This

  • "Share" your page, and give the link to your teammates.
  • Get the "Share" link from each of your teammates and click the "View Code" link at the bottom of the screen.
  • Copy the HTML from your teammates' pages into your project.
  • Copy and paste the correct navigation bar onto each page.
  • Check that all of the links and images work correctly.
  • Add Style
  • 5
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Add Your Styles

Now add all of the CSS you are responsible for, including your classes.

Do This

  • Add CSS rule sets to the stylesheet.
  • Check that all of your pages are displaying the correct styles.
  • Share Your Stylesheets
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Share Your Styles

Now share all of the CSS styles and classes with your teammates.

Do This

  • Use the "Share" link from each of your teammates and click "View Code" to see their HTML and CSS.
  • Open each of your teammates' stylesheets and copy and paste their code into your stylesheet.
  • Check the stylesheet to make sure that there are no conflicts (two rule sets for the same tag or style).
  • Check that all of your pages are displaying the correct styles.
  • Check Your Work
  • 7
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Check Your Work

Your site is done! Check to make sure it meets the requirements.

Do This

  • Check that your site looks the same as your teammates' sites.
  • Check that your site includes everything from the project guide.
  • Check that your site meets the requirements of the project in the rubric.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-15 - Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.
  • 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.