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
- Website for a Purpose - Slides
For the Students
- Website for a Purpose - Rubric
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
- Your Team Project
- 2
Student Instructions
Your Group Project
For example to link to the unique houses page you would add the following code inside your `` element.
wzxhzdk:0 ::: ::: details [**How do I add a hyperlink?**] You can add hyperlinks to your web page using the `` element. The text you want to display as the hyperlink goes between the opening and closing hyperlink tags. The `` element has an attribute `href` which is the location to link to. The location of a local page is just the file path for that page.
For example to link to the unique houses page you would add the following code inside your `` element.
wzxhzdk:1 :::
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
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
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
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
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
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.