🏠
Build a personal home page with CodePen
🤖 Step 5: What to do
Overview
CodePen is an easy-to-use website where you can build and preview simple web pages using HTML, CSS, and JavaScript—right in your browser—and easily share your work with others using a link.
In this exercise, you must build your own homepage on CodePen that meets some specific requirements. Give it your own personal touch. We know that people who do well on our courses show creativity, curiosity, persistence, and rigour. That’s what we’re looking for from you in this project.
💡Tip
- Make good use of web search and AI.
What Should You Do?
1. Make a free account on CodePen
- Sign up for a free account on CodePen.
2. Fork the CYF starter page
- Fork (make a copy of) the CYF starter page Personal Home Page Template to your own CodePen account.
- Here are the instructions to fork a CodePen page.
- Make sure you’re logged into CodePen when you fork the page so that your work is saved.
📝Note
- The CYF template is set up to use JavaScript to check whether your HTML code passes 10 automated tests.
- You must not modify the JavaScript code.
3. Prepare your homepage
- Prepare your homepage in the page you forked.
- Write your HTML code in the HTML tab and your CSS code in the CSS tab.
- You may delete the HTML comment in the HTML tab.
- Your homepage must meet the following criteria, which are written in a special format called Given/When/Then.
📝Given/When/Then Criteria
Given a personal homepage
When I look in the test console
Then all 10 tests are passing
When I read the content
Then I learn something about you
When I view the page
Then the design is unique and the images are displayed properly
When I play the video on the page Then the video can play normally
When I validate the HTML Then the HTML is valid
4. Validate your code
- Use CodePen’s “Analyze HTML” feature to help you find errors in your HTML code. Then fix the errors yourself manually.
- Use a similar approach to identify and fix CSS errors.
5. Submit your CodePen page link
Submit the link to your CodePen page in Step 5 on the CYF Course Platform.
💡Tip
Your work is not judged on aesthetics in this project. We are interested in code correctness and specification compliance.
✅ Step 5: How to check your work
A volunteer will review your submission and check that it meets the acceptance criteria. They will give you feedback on your submission and help you make any changes needed to meet the criteria.
Here are the criteria you need to meet:
Given a personal homepage
When I look in the test console
Then all 10 tests are passing
When I read the content
Then I learn something about you
When I view the page
Then the design is unique and the images are displayed properly
When I play the video on the page Then the video can play normally
When I validate the HTML Then the HTML is valid
📩 Step 5: How to show us
Submission
You must do this on the CYF Course Platform.
- Submit a link to your personal homepage on CodePen.
How to get help
When you have a question, ask it.
Remember, Code Your Future is a community of adults sharing skills. We are all here to help each other, and learn. You are meant to ask questions at Code Your Future. When you see someone else has a question, help them if you can.💡Code Your Future is a Community
When you have questions about coursework, ask in a
You do not need to wait for a workshop to ask a question. You can ask questions in Slack at any time. We are here to help you understand and complete this course. Our goal is to help you learn.
🤖 Step 5: Extend Your Skills
Use your new skill in real life:
This step is just for you. You don’t need to submit it. Next, deploy your personal home page to GitHub Pages, using what you learned in Khan Academy.