Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
Ch. 2
10
11
12
13
14

Lesson 14: Project - Final Personal Website

Overview

Students have spent a lot of time throughout the unit working on their Personal Website. In the final couple of days students finalize their websites. They work with peers to get feedback, put the finishing touches on the websites, review the rubric and reflect on their process. To cap off the unit, they will share their projects and also a overview of the process they took to get to that final design.

Purpose

This project emphasizes many of the core practices of this course. Students will need creativity, problem solving skills, and persistence to complete their websites. This final section of the project requires those practices as well as collaboration and communication. Peer review will encourage students to leverage their peers as resources. The final reflection and presentation allow students to practice communication about their work.

Assessment Opportunities

Use the project rubric attached to this lesson to assess student mastery of learning goals of this unit. You may also choose to assign the post-project test through code studio.

Agenda

Day 1

Day 2

Day 3

Post-Project Test

View on Code Studio

Objectives

Students will be able to:

  • Apply CSS styles across an entire website
  • Explain the design choices they made on their website to other people
  • Prioritize and implement incremental improvements

Preparation

  • Figure out a way to showcase all the students projects and get as many users as possible to check them out
  • Plan out the day breakdown based on your class schedule
  • Print a copy of the peer review guide for each student.
  • Print a copy of the project guide for each student.
  • Print a copy of the rubric for each student.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

For the Students

Support

Lesson Forum

Report a Bug

Teaching Guide

Day 1

Define: Rubric Review

Remarks

Over the course of the whole unit you have been developing a personal website. Over the next couple of classes you will be creating a final version of that project. As we prepare to showcase your work, we will use the problem solving process as our guide to ensure we have the best quality product possible.

The first step of the problem solving process is to define the problem. To help define our problem we need to understand the expectations of the final product. The rubric for your Personal Website will help us. Let's go over it before starting.

Distribute: Give each student a copy of he project guide.

Discuss: As a class, review the rubric portion of the Project Guide and clarify any questions students have.

Plan: Finishing Personal Website

Remarks

Next you will begin the planning stage of the problem solving process. Keep in mind you have limited time to complete this project so you will need to prioritize the work you need to.

Students should use the project guide to plan out the work they will do to finish their Personal Website.

Try: Finalize Personal Website

Remarks

Now that you all have plans, it is time to begin implementing your plan. We will be doing a peer review as a class. You should work to make a polished product to share during the peer review.

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

Day 2

Remarks

You should now have a polished product you are proud of. An important part of any major project is to get feedback from people not working on that project with you. They may bring some perspective you might have missed. We will spend today giving and getting feedback. Then you will reflect on how to put this feedback into action.

Reflect: Peer Review

Distribute: One copy of the peer review guide to each student.

Group: Pair students up.

Peer Review Process

Students will:

  • Open up their website projects in Web Lab.
  • Fill in the top part of the worksheet, identifying what they would like feedback on.
  • Trade places with their partner so their partner is now looking at their sheet and website.
  • Give feedback on partner's work.
  • Switch back to their sheet and website to review feedback.
  • Make a plan for implementing some of the feedback.

Plan and Try: Final Touches

Transition:Students return to Code Studio and make any improvements that were identified in the peer review session. If they did not get any suggestions from the peer review, the teacher may want to give them some suggestions.

Students should also review the rubric as a final way to check their work.

Reflect: Final Reflection

Setup: Students will need their journals and all of their screenshots of the progress on their home page. You may want printed versions if you are going to display them during the showcase.

Prompts:

  • I am most proud of the following aspect(s) of my personal website:
  • The biggest challenge that I overcame so far in making my personal website:
  • Improvements I still want to make to my website are:
  • If I knew at the beginning of this project what I know now, I would have started it differently by doing this:
  • I would describe the level of effort I’ve invested into this project as:

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.

Day 3

Showcase Set Up

Setup: Students need:

  • A computer to display the website.
  • A way to display their website progression screenshots

Student Website Showcase

Students should stand next to their computers and talk to people attending the showcase about their work. If you can't get others to come visit your room for this activity, you can split the class in half and have one half present while the others circulate. Then they can switch.

Post-Project Test

The post-project test is found at the bottom of the Web Development unit overview page on Code Studio (studio.code.org/s/csd2-2019).

This test is locked and hidden from student view by default. In order for students to see and take this test, you'll need to unlock it by clicking the "Lock Settings" button and following the instructions that appear.

View on Code Studio
View on Code Studio

Personal Website

This is it! You have been working on your Personal Website for the whole unit. Put the finishing touches on it and submit it to your teacher! Remember to use the problem solving process as your guide in preparing your final product.

Do This

  • Define: Read the rubric so you know what is expected
  • Plan: Decide what you still need to work on and put those things in priority order
  • Try: Implement your improvements to your personal website.
  • Reflect: Get feedback from a classmate and decide what of that feedback to act on.

Don't forget to take a screenshot of your home page and save it somewhere on your computer so you can find it later (Need help with how to screenshot? Check out this website .)

  • Reflection
  • 3
  • (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-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.