Lesson 05 — Build Your Own Project

This is a big one. Up to now you followed the lessons step by step. Now you’re the boss.

You’re going to build a small project that is yours — your idea, your choices, your name on it. MILO — the brain — is your tutor, and GetAdvice is MILO’s friendly face out in the world. This project belongs to you.

Think of it like a kitchen. The last lessons taught you how to use the stove, the knife, and the oven. Today you cook your own dish. It doesn’t have to be fancy. It just has to be yours.

Step 1 — Pick one idea

Here are four beginner-friendly projects. Each one uses the three things you already know: HTML (the structure), CSS (the style), and JavaScript (the wiring). Pick the one that sounds most fun.

Idea What it does Why it’s great to start with
About Me page Shows your name, a photo, and things you like Simple and personal — mostly HTML and CSS
To-Do list You type a task, click a button, and it appears in a list Teaches buttons and lists
Dice roller You click a button and get a random number from 1 to 6 Fun, and teaches how “random” works
Compliment generator You click a button and get a kind message Makes people smile — very rewarding

There’s no wrong pick. Choose the one that makes you curious.

Step 2 — Make a home for your project

Everything you build lives in the my-projects/ folder. That keeps your work tidy and separate from the lessons.

Paste this to MILO (swap in your own project name):

I'm a beginner. Please make a new folder inside my-projects/ called
[your-project-name], and put an empty index.html file inside it. Then
show me the file so I can start. Explain what you did in one or two
sentences.

See the new folder inside my-projects/? That’s your project’s home. There’s a short note about this folder in my-projects/README.md if you want to peek.

Step 3 — Describe your idea to MILO in plain words

Here’s the most important skill in this whole repo: you don’t need to know how to build it. You just need to describe it.

Tell MILO what you want in plain words, like you’d tell a friend. For example:

I'm a beginner building a dice roller in my-projects/dice-roller/. I
want a button that says "Roll". When I click it, show a random number
from 1 to 6 in big text on the page. Let's build it ONE small piece at
a time, and explain each piece. Start with just the button, nothing
else yet.

Notice the magic words: “one small piece at a time.” That’s the secret. Don’t ask for the whole thing at once. Build the button. Get it working. Then make it show a number. Then make it look nice. One brick at a time builds a strong wall.

Step 4 — Build, test, tweak — again and again

Here’s your loop. You’ll do it over and over, and it never really changes — not even for professional programmers:

  1. Ask MILO for one small piece.
  2. Type the code into your file yourself.
  3. Open index.html in your browser and see if it works.
  4. If it breaks, paste your file to MILO and ask what’s wrong.
  5. If it works, ask for the next small piece.

When you get stuck (everyone does), this prompt always helps:

Here is my file: [paste it]. It's not doing what I expected. I wanted
[what you wanted], but I got [what happened] instead. What's wrong, and
how do I fix it? Keep it simple.

Step 5 — Make it look and feel like yours

Once it works, spend a little time making it you. Change the colors. Change the words. Add your name. Ask MILO:

My project works! Now help me make it look nicer and more personal.
I like [your favorite colors / style]. Suggest small changes and
explain them one at a time.

This is your project. There’s no rule for how it should look. If you like it, it’s right.

A note for you

This lesson is different from the earlier ones on purpose. Nobody handed you the answer. You picked an idea, described it, and built it piece by piece. That is exactly what real software work feels like — including the work behind GetAdvice, MILO’s friendly face, a public app real people use. Every button and screen in it started as someone describing an idea and building it one small piece at a time, just like you did here. When you get to feedback-getadvice/README.md, you’ll bring that same eye to it.

You own this project. Be proud of it. 🎉

🎉 Milestone: your first project is yours

Your milestone: you built a real, working thing from your own idea, using HTML, CSS, and JavaScript together. That’s a genuine first project. Not a copy — yours.

Next up

Right now your project only lives on your computer. What if it disappeared? Next you’ll learn to save your work safely so it can never be lost — using a tool called Git.

Go to lessons/06-saving-work-with-git.md.