🚀 Four

Build four simple projects using HTML and CSS in Khan Academy

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

🤖 Step 4: What to do

Overview

This exercise aims to help you:

  • Learn how to create a webpage using HTML and CSS
  • Learn how to manage files on GitHub
  • Deploy your webpage using GitHub Pages

What Should You Do?

1. Learn HTML & CSS

Learn HTML and CSS by completing Unit 2 of Khan Academy’s Computer Programming course. You don’t need to know anything about coding to start - it’s good for complete beginners. There are 9 lessons in Unit 2. The video playlist is ~2 hours long, and the whole course will take 4-10 hours. This course is completely free.

  1. Create an account on Khan Academy.
  2. Go to the course: Computer Programming: Unit 2: Intro to HTML/CSS: Making webpages.
  3. Practice HTML and CSS by completing the challenges and projects in the course.
2. Build a webpage
  1. Complete the Project: Event Invite exercise in Lesson 6.
  2. Save your code.
3. Validate your code
  1. Visit the W3C Markup Validation Service.
  2. Click the “Validate by Direct Input” tab, paste your code into the text area, and click the “Check” button.
  3. Repeatedly improve your code until there are no more errors.

💡Using AI to help you understand and fix coding errors

  • Ask AI to explain the error message to you.
  • Show your code to AI and ask how you can fix the errors.
4. Sign up a GitHub Account

📝Note

GitHub is a website where people can store and share their work, especially code for websites or apps. It helps you keep track of changes, work with others, and go back to earlier versions if needed. Think of it like Google Docs, but for coding projects.
5. Creating a Repository for your Website
  1. Create a repository and include your name in the repository name.
    • The repository name will appear in the link to your webpage.
    • We use this name to tell who you are. You can use your first name or last name.
  2. Add your webpage (an HTML file) to this repository and name the file index.html.
    • You can create a new file on GitHub and edit the file directly, or upload a file you prepared on your computer.
  3. Optionally, add other files your website needs (e.g., CSS files and images).

📝Note

Use these resources to learn

6. Deploy your webpage on GitHub Pages

📝Note

  • GitHub Pages is a free service that lets you turn your files on GitHub into a simple website.
  • GitHub Pages (github.io) is not the same as GitHub (github.com).

Configuring Github Page settings

  1. In your repository, click on “Settings”.
  2. Select “Pages” from the sidebar.
  3. Choose the branch you want to deploy. Typically, this is the “main” branch.
  4. Click “Save” to apply the branch setting.
  5. Reload the settings page after a few minutes to see the “Your page is live at …” message.
    • The webpage may take a few minutes to deploy on Github Pages.
  6. Click the link to visit your webpage.

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

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

📩 Step 4: How to show us

Submission

You must do this on the CYF Course Platform.

  1. Submit a link to your Event Invite webpage on GitHub Pages

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.