Build it yourself · HTML, CSS & JS

Build your first web page.

You'll grab a small, real website, open it on your own computer, change it to make it yours, and put it online. No installs, no build step — just files you can read top to bottom.

Open the repo on GitHub ↗ ← Back to all tutorials
What you're building

A link-in-bio landing page

hibot-static-site is a single web page — the kind you'd put in a social media bio: your name, a short blurb, and a few links. It's built from the three core languages of the web: HTML (the structure), CSS (the look), and JavaScript (the behavior). There's no server and no build step, so the whole app runs just by opening a file.

This is the best possible first project: you can see every line, change one thing, and instantly watch what happens. By the end you'll have your own version live on the internet.

HTML + CSS + JS No build step Static hosting Open source
Before you start

Two things to have ready

  • A web browserYou already have one — Chrome, Safari, Firefox, or Edge. That's what runs the page.
  • A code editor (recommended: Cursor)Any text editor can open the files. We like Cursor because its built-in AI can explain each line and make changes for you in plain English.
The easy-mode way to follow along

Let an AI editor sit beside you

Cursor is a code editor with an AI built in. Open the project in it and you can highlight any line and ask "what does this do?", or describe a change in plain English and watch it edit the file. New builders get 50% off their first month through our link.

Start with Cursor — 50% off →

ⓘ Affiliate disclosure

The walkthrough

From clone to live, one step at a time

  1. Get the code onto your computer

    If you have Git, "clone" the repo — that just means download a copy you can edit.

    # copy the project to your computer git clone https://github.com/Cartooli/hibot-static-site.git cd hibot-static-site

    No Git? On the repo page, click the green Code button → Download ZIP, then unzip it. Either way works.

  2. Open it in your browser

    There's nothing to install. Just find index.html in the folder and double-click it — it opens in your browser as a real web page.

    That's the whole app, running on your computer. Pretty fast, right?

  3. Look around the files

    Open the folder in your editor. There are only a few pieces:

    index.html — the page itself: your text, links, and structure.
    assets/ — the styling (CSS) and any scripts (JavaScript) and images.
    That's it. Everything you see in the browser comes from these files.

  4. Make your first change

    Open index.html in your editor. Find the heading text near the top and replace it with your own name:

    <!-- before --> <h1>Your Name</h1> <!-- after --> <h1>Alex Rivera</h1>

    Save the file, then go back to your browser and refresh the page (Ctrl + R, or Cmd + R on Mac). Your change is right there. Now try changing a link, or a color in the CSS file.

  5. Save your work with Git

    Lock in your changes so they're never lost. Make your own empty repo on GitHub first, then:

    git add . git commit -m "Make the page mine" git remote set-url origin https://github.com/YOUR-USERNAME/YOUR-REPO.git git push -u origin main

    New to this? Our guide to pull requests walks through saving and publishing work on GitHub.

  6. Put it on the internet

    Because it's just files, hosting is free and instant. The easiest path: in your GitHub repo, go to Settings → Pages and turn on GitHub Pages — your site gets a public address in about a minute. Or connect the repo to Vercel for the same result with auto-updates on every push.

When something looks off

Totally normal — here's the fix

Where to go next

Keep building

Ready for a server? Try another starter, or dig into the tools.

FastAPI Starter →Your first backend server, in Python. Flask Guestbook →Your first database, with Flask + SQLite. Streamlit Tool →Build a web app in pure Python. Python CLI →A terminal app with zero dependencies. All EdTech Tutorials →Ten worked example apps to learn from. The AI Build Stack →The full toolkit, tool by tool.

You built a web page. What's next?

Open the live sample, see how it behaves, then keep going. New builders: let Cursor write the next version with you — 50% off your first month through our link.

Get Cursor — 50% off your first month → Open the repo ↗

ⓘ Affiliate disclosure

Disclosure: The Cursor links on this page are referral links — new users get 50% off their first month when they sign up through them, and code.hibot.space may earn a commission at no additional cost to you. This helps keep these guides free. Every other link on this page is a clean URL with no referral code.