🏠 Four

Build a personal home page with CodePen

🔖
  1. Instructions
  2. Acceptance Criteria
  3. Submission
  4. Help
  5. Extensions

🤖 Step 4: What to do

You must now build your own home page, and get all of the tests to pass. 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.

  1. Make a free account on Codepen
  2. Fork the CYF starter page Personal Home Page Template
  3. Read the instructions in the code panels and edit the code to meet all the criteria you discover

Use HTML and CSS to complete this project. Codepen has options to use extensions like SASS and Pug and feel free to use those if you want!

💡Tip

Make sure you’re logged in to Codepen when you fork so your work is saved.

Advice

Use and read the tests to discover the other 10 requirements. Build, test, and improve your code progressively. The tests are written in the Javascript window in Codepen for you to see, and there’s a readout in the main view showing the results. Don’t worry that you don’t understand the brackets and arrows, read the words. The tests will rerun every time you make a change in your code.

Once you’re done, submit the URL of your working project with all its tests passing, to the dashboard.

🤖 Step 4: How to check your work

We have written this criteria in a special format called Given/When/Then . It is called a “specification”.

Here are the acceptance criteria for your project:

Given a personal home page

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

When I validate the HTML
Then the HTML is valid

💡Tip

Your work is not judged on aesthetics in this project. We are interested in code correctness and specification compliance.

📩 Step 1: How to show us

Submission

You must do this in the CYF Course platform

  1. Share a link to your personal homepage on CodePen with all the tests passing

How to get help

When you have a question, ask it.

💡Code Your Future is a Community

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.

First, visit our frequently asked questions page

When you have questions about coursework, ask in a workshop 🧶 🧶 workshop Code Your Future Workshops are meetings where you can get technical help. or in Slack 🧶 🧶 Slack Slack is messaging software - once you have downloaded Slack you can visit our Slack workspace to ask your questions.

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 4: 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.