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

Lesson 14: Project - Personal Portfolio 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.

Agenda

Day 1

Day 2

Day 3

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

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 Final Personal Website - 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 Final Personal Website - 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 Final Personal Website - Peer Review 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 partners 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.

View on Code Studio
View on Code Studio

Overview

In the last few days of the unit, the class finalizes their personal websites, working with peers to get feedback, review the rubric, and put the finishing touches on the site. To cap off the unit, everyone shares their projects and how they were developed.

Resources

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.