YOUR FIRST MISSION

Start with one small win.

You do not need to understand the whole tech world today. Make one thing work, understand it, then take the next step.

Works on your phone, too. Your edits save in this browser.

Start Learn Build Ship

CHOOSE ONE

What do you want to do?

YOUR WORKMy projects Open +

MORE WHEN YOU NEED ITOther First Comet tools Open +

1
2
3
4
5
6
7
8
9
10
11

<!doctype html>
<html lang="en">
  <head>
    <title>My First Project</title>
  </head>
  <body>
    <main>
      <h1>Hello, world!</h1>
    </main>
  </body>
</html>

Change timeline3 unsaved changes

FILES

FIRST COMET · CODE ROOM

REAL EDITORGUIDED PATH

Use the real VS Code Web. Keep First Comet beside you.

Write in the real editor. Learn in First Comet. Move between them without pretending a tutorial box is your development environment.

01 Work there → 02 Learn here

☄

VS Code Web

<main> <h1>Hello</h1> <p>My first page</p> </main>

BUILD HERE

☄First CometLIVE

STEP 1 OF 4

Create your first page

✓ Open a folder
2 Add a heading
3 See it in browser

LEARN HERE

01Real tools

02Clear next step

03Build confidence

FIRST COMET TEACHER● BESIDE YOU

BEGINNER · DO THIS NOW

Open a folder before writing code.

Open VS Code Web.
Choose Open Folder.
Select the folder for your first website.
Create index.html.

Do not worry about extensions, Git, terminal commands or databases yet.

PRACTISING · NEXT TARGET

Work in the real project structure.

Open your existing folder, keep HTML/CSS/JS separated, and use Explorer, Search and Source Control instead of copying whole projects into one file.

PRO · FAST MODE

Skip the walkthrough.

Open the workspace and jump directly to Explorer, Source Control, extensions, repository work and deployment checks.

QUICK VS CODE HELP

Choose a question. First Comet will tell you exactly where to look in VS Code.

YOUR FIRST VS CODE MILESTONE

1

Open folderYour project lives in one folder.

→

2

Create index.htmlYour first webpage file.

→

3

Write one headingSomething visible in the browser.

→

4

Save itCtrl + S.

FIRST COMET · START SMALL

Learn by building.

One small step at a time.

DO THIS NEXT

Try one tiny coding challenge.

Change a few lines, run the result, and see what your code actually does.

→ →

I need something else

YOUR FIRST WIN

Run one page on your computer.

FIRST RULE

Work locally first.

Your first page stays on your computer.

WHAT DOES LOCALHOST MEAN?

Your computer temporarily becomes the server.

Normally a website lives on a server connected to the internet. With localhost, the server is running on your own computer. Your browser opens the site from your machine instead of from the public internet.

LOCALHOSTYou → your computer → website

ONLINE WEBSITEYou → internet → public server → website

LOCALHOST HAS LIMITS

Not public. Other people cannot normally open your localhost link.

Your computer must run it. Close the local server and the site stops.

No real domain yet. You use an address such as localhost:5500.

Online behaviour can differ. Domains, HTTPS, secrets and hosting rules are tested again before launch.

YOUR REQUIRED ORDER

Milestones, not random topics.

Do not skip ahead. Each milestone has one clear result. When you can produce that result yourself, you are ready for the next one.

01

MILESTONE 01

Run a website on localhost

START HERE

Get one simple page working. Nothing else yet.

USE THIS SETUP

VS Code + Live Server. One folder. One index.html. Open it with Live Server.

1. Create a folder

Name it my-first-site.

2. Create index.html

This will be the first page the browser loads.

3. Start Live Server

Your browser should open a localhost address.

4. Change one sentence

Save the file and make sure the browser shows the new sentence.

SUCCESS MEANS

Edit index.html → save → see the change.

That is enough for Step 1.

02

MILESTONE 02

Build the page structure with HTML

AFTER 01

Now you may start building the actual webpage. HTML tells the browser what each piece of content is.

YOU MUST UNDERSTAND

Headings for titles · paragraphs for text · links for navigation · images for visuals · buttons for actions · forms for user input · sections for page structure.

SUCCESS MEANS

You can build a simple page with a heading, text, image, link, button and form, and it works on localhost.

Then you are eligible for Milestone 03.

03

MILESTONE 03

Make the page look right with CSS

AFTER 02

CSS controls how the HTML looks. Keep testing every change on localhost.

YOU MUST UNDERSTAND

Colours · fonts · spacing · width and height · Flexbox · Grid · responsive design for phones and laptops.

SUCCESS MEANS

Your page is readable, aligned and usable on both a laptop-sized screen and a phone-sized screen.

Then you are eligible for Milestone 04.

04

MILESTONE 04

Add behaviour with JavaScript

AFTER 03

JavaScript makes the page react. A button can open something, a form can be checked and content can change without reloading the whole page.

YOU MUST UNDERSTAND

Variables · functions · conditions · events · finding HTML elements · changing text/classes · basic form handling.

SUCCESS MEANS

You can make at least one useful interaction work correctly on localhost without copying a complete solution blindly.

Then your first frontend is ready for Milestone 05.

05

MILESTONE 05

Connect a backend

AFTER FRONTEND

The backend handles work the browser should not do by itself: checking requests, applying rules, protecting secrets and talking to a database.

YOU MUST UNDERSTAND

Request → response · API routes · JSON · one backend language such as Node.js or Python · validation · environment variables.

SUCCESS MEANS

Your localhost frontend can send a request to your localhost backend and display the answer.

Then you are eligible for Milestone 06.

06

MILESTONE 06

Make the project remember with a database

AFTER BACKEND

A database keeps information after the page closes: accounts, projects, products, messages, orders or any other information your app must remember.

YOU MUST UNDERSTAND

Tables · rows · columns · IDs · relationships · SELECT · INSERT · UPDATE · DELETE · permissions. Then use PostgreSQL, Supabase or another suitable database.

SUCCESS MEANS

Your app can save one real record, reload the page and retrieve that same record safely.

Then you are eligible to prepare the project for the internet.

07

MILESTONE 07

Preview online, then publish

FINAL STEP

Even when the project will live on GitHub, Vercel or Cloudflare, keep a local copy. Make changes locally first, check the result, then push or deploy the version that worked.

1Edit locallyChange your files on your computer.

→

2Test localhostCheck layout, buttons, forms and errors.

→

3Push / deploySend the tested version online.

→

4Test the live URLCheck again because hosting can behave differently.

Teacher rule: a successful localhost build is not the final product, but an unsuccessful localhost build should never be your production deployment.

MAKE IT YOURS

Workspace settings

These preferences stay on this device.

Experience level

Changes how much guidance appears.

What should I call you?

Not set yet

Your First Comet teacher

Not chosen yet

Your age & teacher tone

Not set yet · supportive tone

Appearance

Warm cream by day, deep ink by night.

Intro animation

Replay the First Comet launch sequence.

Clear local projects

Removes projects saved in this browser only.