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
- Personal Web Page - Slides
- Peer Review - Personal Website - Exemplar
- Practices Reflection - Exemplar
- Project Guide - Personal Web Page - Reflect - Exemplar
For the Students
- Personal Web Page - Peer Review
- Personal Web Page - Reflect - Project Guide
- Personal Web Page - Rubric
- Computer Science Practices - Reflection
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
- Project Guide
- 2
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
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
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.
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
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
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
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
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.