🚀 Four

Build a personal webpage on CodePen

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

🤖 Step 4: What to do

Overview

In this exercise, you will:

  • Build your first webpage using HTML and CSS
  • Practice editing your webpage and instantly see results
  • Share your work with others using CodePen

What Should You Do?

1. Sign up a CodePen account

CodePen.io is an online playground where you can:

  • Write HTML and CSS code
  • See the results instantly
  • Share your work with others

👉 While you are learning, CodePen lets you experiment and get instant feedback.

2. Learn HTML and CSS

You can use any resource you like, but here are two free and beginner-friendly options:

Option 1: Khan Academy
Option 2: W3Schools
How much do I need to learn?

Here is a self-checklist to check if you understand HTML and CSS well enough to produce the webpage in this Step.

✅ HTML Basics

  • I know what HTML is used for.
  • I know how <!DOCTYPE html>, <html>, <head>, and <body> make up the basic structure of an HTML document.
  • I can add a title inside the <head> tag.
  • I know these key terminologies: element, tag, attribute, opening tag, closing tag.
  • I can add text using <h1> to <h6> headings and <p> paragraphs.
  • I can add a link with <a href="...">.
  • I can add an image with <img src="..." alt="...">.
  • I can create a list using <ul> (unordered) or <ol> (ordered) with <li>.
  • I know how to group content with <div> and highlight text with <span>.
  • I know the differences between block-level and inline elements (e.g., <div> vs <span>).

✅ CSS Basics

  • I know what CSS is used for.
  • I can connect CSS to HTML using a <style> tag or an external .css file.
  • I understand the advantages of specifying CSS styles in an external .css file.
  • I understand the basic structure of a CSS rule.
  • I know how to select elements using
    • Element selectors (e.g., p)
    • Class selectors (e.g., .classname)
    • ID selectors (e.g., #idname)
  • I can change text color, size, and font with CSS.
  • I can change the background color of a page or element.
  • I can add borders, margins, and padding.
  • I can center text and image.

3. Prepare a webpage on CodePen

Your webpage should meet all of the following criteria:

  • It is about something you like (e.g., a hobby, a city, a person, an animal, a flower, or food).
  • It contains at least 100 words.
  • It includes at least three images, and at least one image must be centered on the page:
    • The image should remain centered regardless of the viewport width.
    • Free-tier CodePen users cannot upload images. Use publicly accessible image URLs instead.
  • It includes an ordered (<ol>) or unordered (<ul>) list.
  • All CSS should be written inside the CSS tab on CodePen (not inline).
  • Both HTML and CSS should be free of syntax errors.

💡Using AI to help you understand and fix coding errors

If you do not know how to fix an error in your code, show your code to AI and ask it to help you understand the cause of the error.

Remember that the purpose of this exercise is learning - you shouldn’t have AI write code for you. But it can help you understand problems.

4. Submit your CodePen page link

Submit the link to your CodePen page in Step 4 on the CYF Course Platform.

Important Notes About CodePen

  • When writing your code in CodePen, you do not need to include <!DOCTYPE html>, <html>, <head>, or <body> tags (the editor adds them automatically).

  • CodePen has built-in features to help you check your code for errors:

    • Analyze HTML → checks your HTML for mistakes
    • HTML Analyzer
    • Analyze CSS → checks your CSS for mistakes

  • To learn more about CodePen features, see: How to Use CodePen – A Beginner’s Guide.

✅ Step 4: 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:

Webpage Criteria

  1. It contains at least 100 words.
  2. It includes at least three images, and at least one image is centered on the page.
  3. It includes a list.
  4. All CSS code is written inside the CSS tab.
  5. All code is free of syntax errors.

📩 Step 4: How to show us

Submission

You must do this on the CYF Course Platform.

  1. Submit a link to your personal webpage on CodePen.

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🧶🧶 workshopCode Your Future Workshops are meetings where you can get technical help. or in Slack🧶🧶 SlackSlack 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 optional step is just for you. You don’t need to submit it. Next, build a website to show your skills and experience. It’s a great way to show potential employers what you can do.

A site like this is called a portfolio. It’s a collection of your work and skills. Start now and keep adding to it as you learn new things.

💡Tip

This four hour video course Learn HTML: Full Tutorial for Beginners (2022) answers most of the common questions beginners have.