gluntyacademy

glunty academy

glunty // cursor lessons

Build a real web page

Say what you want, watch Cursor write the code, then change one thing yourself so the page is truly yours.

0 of 12 done
  1. Finish the step above first
    01

    Pick what you are making

    Every website is just an idea someone decided to build. Today the someone is you.

    You are going to make a tiny real web page. Not a fake one - a real one with real code you can see.

    First pick your kind of page: a fan page for something you love, a silly joke site, or a mini portfolio that shows off your stuff.

    Type your pick below.

  2. Finish the step above first
    02

    Say who it is about

    A page needs a star. Who or what is yours about?

    It can be you, your pet, your favorite game, a made-up hero, or the best sandwich ever.

    Pick one thing so your page has a clear point.

    Type it below.

  3. Finish the step above first
    03

    Open Cursor

    Cursor is a code editor - a tool where you write and see the code for real programs.

    The cool part: you can talk to it in plain English and it writes the code with you.

    Open Cursor, make a new file, and name it index.html. That name is special - browsers look for it first.

    Type the file name below so it sticks in your head.

    Open Cursor (new tab)
  4. Finish the step above first
    04

    Write your big headline

    The headline is the giant text at the top of a page. It is the first thing anyone reads.

    Make it grab people. Short and bold beats long and boring.

    Write the exact words you want at the very top of your page.

    Type your headline below.

  5. Finish the step above first
    05

    List three things to show

    Good pages show a few clear things, not a wall of stuff.

    Think of three things your page should say. Facts, jokes, or projects - your call.

    Write three short lines. Keep each one tiny.

    Type your three things below, split by commas.

  6. Finish the step above first
    06

    Choose the vibe

    Colors and mood change how a page feels. Same words, whole new feeling.

    Describe the look you want in a few words. Cursor will turn it into real colors and style.

    Think mood, not just color - 'cozy and warm' or 'spooky dark' tells more than 'blue'.

    Type your vibe below.

  7. Finish the step above first
    07

    Let Cursor build your page

    Time to hand Cursor a real developer prompt - not a lazy 'make a website', but your exact plan.

    Copy the prompt below. It already fills in your answers and tells Cursor how to build it well.

    Paste it into Cursor's chat and let it write your index.html.

    Then look at what it made and type the first HTML tag you spot.

    what will really happen

    Cursor writes real, working code from your prompt in a few seconds.

    The first version is usually plain and may add extra stuff you never asked for.

    It sounds confident even when a line is off, so read it, do not just trust it.

    Open Cursor (new tab)
    You are a friendly front-end web developer who teaches total beginners. Build me a tiny website as ONE single file named index.html. It is a [site_type] about [topic]. Put a big headline at the very top that reads exactly: [headline]. Show these three things clearly, each in its own spot: [three_things]. Match this look and feel: [vibe]. Rules: use only plain HTML and CSS, no frameworks, no outside links or web images. Add short comments in the code that explain what each part does in plain English. Use clear tags like h1, p, and section. Make it easy to read on a phone. When you finish, tell me in one sentence which line holds my headline so I can find it fast.
  8. Finish the step above first
    08

    See the real code

    Here is the magic moment: the code is not a secret. It is right there, and you can read it.

    Scroll through your index.html. Find the line that holds your headline words.

    Reading code before you change it is exactly how developers think.

    Paste that headline line below.

    hold on - judge it, do not celebrate
    • Is this actually the page you pictured, or just the first thing Cursor gave you?
    • What is the ONE part that looks generic or boring?
    • What would you change to make it feel like YOURS?
  9. Finish the step above first
    09

    Change one thing yourself

    Now you drive. Do not ask Cursor - do it with your own hands.

    Change one small thing in the code. Swap a word, change a color, or make the headline bigger.

    Save the file and refresh the page to see your change appear. That jolt? That is you coding.

    Type what you changed below.

    Did you read the code before you changed it, or just guess?

  10. Finish the step above first
    10

    Understand what you did

    Changing code is good. Knowing WHY it worked is what makes you a builder.

    Copy the prompt below. It asks Cursor to explain your headline line word by word and check your change.

    Paste it into Cursor and read the answer slowly.

    Then type, in your own words, what that line of code actually does.

    Open Cursor (new tab)
    You are a patient coding teacher for a total beginner. I just changed one thing in my page by myself: [one_change]. First, explain in plain English what the line with my headline [headline] does, piece by piece, as if I have never seen code before. Then look at the change I made, tell me if it will work, and if it is broken show me the corrected line and explain why it broke. Do not rebuild the whole page - just teach me this one part so I really get it.
  11. Finish the step above first
    11

    Build your page spec

    Real developers write a spec - a plain-English plan of what a page should be - before and after they build.

    Glunty will now turn all your answers into a clean spec you can reuse or hand to Cursor again.

    This is the real, useful thing you made today: your page, described in your own words.

    Hit build and read your spec.

    Do the steps above and your Your page spec shows up here.
  12. Finish the step above first
    12

    Ship it to the wall

    You built a real web page, saw the real code, and changed it yourself. That is a big deal.

    Time to show it off. Share your page or your spec on the class wall.

    Add #Glunty so your class can find it and cheer you on.

    Post it and take the bow.

The class wall - share yours

Loading the class wall...

You are a web builder now.

You did not just order a website - you designed it, read the real code, and changed it with your own hands. That is exactly how developers think, and today you did it for real.

Back to the academy Your progress
Embedded tool from glunty.com