vibecodingby qairuhub
0/ 1960 XP
ENҚАЗ

Start here · 10 minutes

Stop reading.Start typing.

Nobody has ever learned this from a page. Pick the track that matches what you have in front of you, spend ten minutes, and build one small real thing. Everything else on this site will make more sense afterwards.

Why ten minutes matters

The gap between reading about agents and using one is bigger than it looks. Until you have watched a model confidently write something wrong, and then fixed it, the warnings in this course are just words. Ten minutes of real contact does more than an hour of video.

Pick your track

No install · Free5 min

In your browser

You have a phone or a locked-down computer, or you just want to see it work first.

  1. Open a free AI chatAny of claude.ai, chatgpt.com, or gemini.google.com. All have a free tier that is enough for this.
  2. Ask for one complete fileCopy the prompt below. Asking for a single self-contained HTML file matters: it means you can run the result with no setup at all.
  3. Save it and open itCopy the code into a text editor, save it as countdown.html, and double-click the file. That is a working web page you made.
  4. Now change one thingGo back and ask for one change — a different colour, your own date, a sound at zero. Watch how you describe it. That is the whole skill.
Copy this prompt
Write a complete, single-file HTML page that counts down to 1 January 2027.

Requirements:
- One file. All CSS and JavaScript inline. No external libraries.
- Big readable numbers: days, hours, minutes, seconds, updating every second.
- Dark background, works on a phone screen.
- Put my name at the top: <your name>

Return only the file contents, nothing else.

You are done when You have a working page, made by describing it. That is vibe coding, in the original sense.

Laptop · The real thing10 min

A real coding agent

You have a laptop you can install things on. This is the track the rest of the course builds on.

  1. Install Node, if you do not have itGet the LTS version from nodejs.org. Then check it worked: the command below should print a version number.
  2. Install a coding agentClaude Code is what this course uses. Gemini CLI is free and works the same way if you would rather not pay for anything yet.
  3. Make an empty folder and go into itNever point an agent at your whole computer. Give it one small folder that contains only this experiment.
  4. Start it and ask for something realRun the agent, then type a request in plain language. Watch which files it decides to create before you accept anything.
  5. Read what it didAsk it to explain its own work. An agent that can explain its choices is one you can correct. This habit is worth more than any prompt trick.
terminal
$ node -v# check Node
$ npm install -g @anthropic-ai/claude-code# Claude Code
$ npm install -g @google/gemini-cli# or Gemini CLI (free)
$ mkdir countdown && cd countdown# a clean folder
$ claude# start it
Copy this prompt
Build a single-page countdown site for a QairuHub event on 1 December 2026.

- Plain HTML, CSS and JavaScript. No framework, no build step.
- A big countdown, the event name, and a short description.
- Dark theme, mobile first.

Before you write anything: tell me what files you plan to create and why. Wait for me to say go.

You are done when You have run a real agent, reviewed a plan, and shipped a file. Lab 01 picks up exactly here.

Bonus · Free5 min

Put it on the internet

You finished either track above and want a link you can send someone.

  1. Open a free hostGo to app.netlify.com/drop or pages.cloudflare.com. Neither needs a card for a small static site.
  2. Drag your folder inNetlify Drop takes a folder with an index.html and gives you a URL. Rename your file to index.html first.
  3. Send the link to someoneThis is the moment it stops being a file on your laptop and becomes a thing that exists. Do not skip it.

You are done when Something you described in words is now live at a URL. Module 12 covers how all of this actually works.

If it goes wrong

The code it gave me does not work.

Good — this is the normal case, not a failure. Paste the exact error back to it, along with what you expected to happen. Do not paraphrase the error; the full text is the useful part.

It keeps giving me something different from what I asked.

Your request is probably under-specified rather than misunderstood. Add the constraint you have in your head but did not type. Module 07 is entirely about this.

I cannot pay for anything.

Gemini CLI has a free tier, and the browser track needs nothing at all. The tools page lists every free option honestly, including what each one limits.

It asked to run a command and I do not know if that is safe.

Read the command before approving it. If it deletes, force-pushes, or touches anything outside your test folder, say no. Module 11 is the full version of this rule.