My Website Portfolio

In this project, students are introduced to the theory and practice of user interface design. Students learn about what makes an engaging and accessible user interface and will employ an iterative design process including rapid prototyping and user testing to design and develop their own engaging web pages.

Hard

8 Hours

High School

Project Description

Background

Students will create a website portfolio by following the Design Thinking process. Design Thinking is a step-by-step process that helps developers and entrepreneurs develop their products while considering their end-users and testing out products before releasing them. Empathy is the ability to understand and share the feelings of another, and is the most important tenet of Design Thinking. Students will practice building empathy by interviewing classmates and evaluating the accessibility of existing web pages.

Your Task

In this project, students will test one another’s prototypes and provide constructive feedback about their usability and aesthetic appeal. Students will also ask thoughtful questions of the testers to get a better understanding of their experience interacting with the prototype.

Use this project to store the final version of your site. You can republish it at your personalized CodeHS site!

1. Set Up Your codehs.me Domain

This website will be hosted at your own custom domain: <your username>.codehs.me

In order to set up this domain, you simply need to set your CodeHS username.

To do this, follow these steps:

Go to your Account Settings: https://codehs.com/manage_account
Set your username. This will be how you log in to the site, and it will set your own custom codehs.me subdomain. For example, if you set your username to karel, you would own the karel.codehs.me domain.
Your username should have letters, numbers, and hyphens only

2. Paste Your Homepage HTML Code into Your Sandbox

Now we’ll paste the code you wrote for your homepage into your Sandbox Homepage editor. This is what will be displayed when people navigate to <your username>.codehs.me

Copy the HTML code you wrote in this exercise
Go to your sandbox: https://codehs.com/editor/sandbox
Click on the Edit My codehs.me Homepage Button (or direct link here: https://codehs.com/editor/sandbox/homepage)

Paste your HTML code into the editor and either run it or save it.

4. You Now Have Your Own codehs.me Homepage!
Navigate to <your username>.codehs.me to see your homepage! For example, if your username was karel, you would navigate to karel.codehs.me

If you want to edit your homepage in the future, simply return to the Sandbox and click on the Edit My codehs.me Homepage button, or follow this link: https://codehs.com/editor/sandbox/homepage