Lesson 13: Project - Personal Web Page

Overview

Question of the Day: What skills and practices help when we code web pages?

After quickly reviewing their debugging process, students go online to create the pages that they have planned out in previous lessons, with the project guides as a reference. Once they have finished with their pages, they complete a short reflection on the process, what they are most proud of, and what they would like feedback on. They then engage in a structured peer feedback process before making final edits to the pages. Afterwards, they reflect on the skills and practices that helped them to be successful.

Purpose

In the previous lessons, students have planned out their personal web page. In this lesson, they'll get to create and share it with the rest of the world. This should reinforce the value of the planning process, and also give them a chance to practice effective communication through peer feedback. Students should have a chance to engage in all five practices in this lesson: Problem Solving, Persistence, Communication, Collaboration, and Creativity.

Assessment Opportunities

Use the project rubric attached to this lesson to assess student mastery of this chapter's learning goals.

Agenda

Lesson Modifications

Warm Up (5 minutes)

Activity

Wrap Up (10 minutes)

View on Code Studio

Objectives

Students will be able to:

  • Create a digital artifact

Preparation

  • Ensure students have access to the Project Guide from the last lesson.
  • Print copies of the reflection and peer feedback documents.

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

Discussion Goal

The purpose of this discussion is both to normalize debugging and to make sure students start the coding part of the project with some good strategies that will help them to debug. Common bugs they may have seen might be spelling errors, forgetting to link the style sheet, not properly nesting tags, etc. This will vary from class to class, but most students will have encountered multiple bugs in the chapter. While coding, students should use proper formatting to help them to read their code, code small bits at a time and check as they go, and use good naming conventions. For debugging advice, students may give dispositional advice ("Don't give up!", "Remember that it's normal"), recommended resources ("Ask a friend to look at it", "look at the map levels"), process-based advice ("describe the bug first, then look for it before you change stuff", "look at what's messed up and check the spelling in that part"), or tools based advice ("look above where the pink is", "use the inspector tool"). Give students time to share their advice, and make sure that they are referencing the Debugging Process.

Debugging 3-2-1

Remarks

In this lesson, you'll be coding your web page and sharing it with the world. One of the biggest parts of coding is debugging.

Prompt: What are the top 3 bugs you have seen so far when making web pages? What are 2 things you can do while coding to make bugs easier to find and fix? What is the 1 piece of advice you'd give someone who has a bug?

Give students a few minutes to brainstorm some ideas, then allow them to share with the class. You may want to project their ideas and leave the display up as the students code their pages.

Question of the Day: What skills and practices help when we code web pages?

Activity

Personal Websites

Distribute Return the "Define" and "Prepare" portions of the Project Guide to the students.

Transition: Send students to Code Studio.

Peer Review

Distribute: The 'Personal Web Page' Reflect and Peer Review Guides.

Support: Help students as they complete the Personal Web Page - Reflect guide. This guide asks students to reflect on whether the web page met the criteria students came up with in the "Define" phase, and whether they followed through on the plan they made in the "Prepare" phase. It then prompts them for what they like the most and what they would want to improve on their site, as well as what kind of feedback would be helpful to them.

Group: Place students in pairs.

Pre-Review

Before students review each other's work, each student should fill out the top of the guide with what they are most interested in feedback on.

Reviewer Section

After switching guides, the students evaluate how well the projects met the criteria of the rubric. Encourage students to find evidence for learning in their peer's projects, but also to suggest how the projects could be taken further. You may need to support students in providing constructive feedback.

Free Response Feedback

Students then use the "I like, I wish, What if" structure to provide more open-ended feedback to each other. Again, some classes may need specific support in providing constructive feedback.

Creator Response

Next, students should switch back and creators reflect on how the feedback can help them make their project better. Students may then go back to Code Studio to make the revisions that they have decided on.

Collect: Project Guides and Peer Review Guides.

Wrap Up (10 minutes)

Discussion Goal

Goal: Students should reflect on the process so far. If students have trouble thinking of different practices that are helpful, you may want to remind them of the five practices of computer science: problem solving, persistence, creativity, communication, and collaboration. Students may also mention more specific skills such as using documentation, planning, teamwork, and debugging. Prompt students to explain how these practices helped them as they coded.

Journal: Personal Website

Question of the Day: What skills and practices help when we code web pages?

Prompt: After the first day of pulling together your personal website, reflect on your experience.

  • How did you use the problem-solving process in creating your site?
  • What other skills and practices were helpful as you made your web page?

Discuss: Have students share out the different skills and practices that they used.

Send students to Code Studio to complete their reflection on their attitudes toward computer science. Although their answers are anonymous, the aggregated data will be available to you once at least five students have completed the survey.

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

Student Instructions

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

Teaching Tip

Planning Checkpoint

Check over student plans before allowing them to continue on the rest of the levels.

Student Instructions

Your Personal Web Page

In the next few levels, you'll be completing and publishing your personal web page. This is your chance to share your ideas with the world, and also to show all the things that you have learned.

You'll need...

  • Your completed project guide
  • The images you downloaded
  • The project rubric

Here are the things you have learned...

  • How to use HTML to structure the content of your page
  • How to use CSS to style the text, colors, and layout of your page
  • How to format your code to make it easier to read
  • How to debug HTML and CSS code
  • How to use use images in a responsible way
  • How to protect your personal information online

Examples

The Cutest Dog
Dog Sample Page
My Trip
Trip Sample Page
Musical Instruments
Instrument Sample Page
Recycling Club
Recycling Sample Page
Haikus
Haiku Sample Page
View on Code Studio

Student Instructions

Upload Images

Next, you'll need to upload all of your images into your project.

Do This

  • Upload all of the images listed in your project guide into your project.
  • Make sure each image file name uses good naming conventions
View on Code Studio

Student Instructions

Add HTML

Next, you should add the HTML to your page.

Do This

  • Add HTML to make the page you sketched in your project guide.
  • Double check that the page has everything you want, and make any changes you need.
View on Code Studio

Student Instructions

Add Styles

Next, style the page according to your plan.

Do This

  • In the stylesheet, add CSS rule sets for your tags.
  • Check to make sure that the page looks right, then make any adjustments
View on Code Studio

Student Instructions

Review Your Project

You're almost ready to publish your project, but you should check one more time that you have fulfilled all the requirements for this project.

Do This

  • Check that you are comfortable sharing all the information that's on your site.
  • Check that all of your images are correctly attributed, and that you have the right to put them on your site.
  • Check that your project includes everything included in the project rubric.
  • Use comments and whitespace to make your website readable.
  • Ask a classmate to help you find any potential problems with your site.
  • Video: Publishing Your Website
  • 7
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Discussion Goals

The video content is fairly straightforward, but this is your last check in with students before they publish, so it's a good time to make sure they have full thought through the implications of publishing to the entire world. They should make sure that they are not sharing any sensitive information, and that they have the rights to use all the content on the page.

As they began to share, they should also think about how they respect the work of other website publishers, in particular their classmates. You may want to take some time to establish classroom norms around how they talk about and give feedback on their classmates' sites, as well as guidelines for using code that others have written.

Student Instructions

Questions to Consider

  • What do you think your responsibilities are as a website publisher?
  • Why might you want to see the code or remix someone else's site?
  • Publishing Your Website
  • 8
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Share Your Project

It's time to share your project with the world!

Do This

  • Click the button at the top of this page.
  • Copy the URL it gives you, and email it to the people you want to see your page.
  • Reflection
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

This level is an assessment or survey with multiple questions. To view this level click the "View on Code Studio" link.

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-19 - Document programs in order to make them easier to follow, test, and debug.
IC - Impacts of Computing
  • 1B-IC-21 - Use public domain or creative commons media and refrain from copying or using material created by others without permission.