MODULE 0: What Can I Really Build?

In 30 seconds

Coding assistants are super smart translators that transform your ideas into code. They’re not magic, but with them you can create real apps without knowing how to program. For example, to begin: a study timer, a personal diary, an expense calculator. Concrete things, not Facebook 2.0. At least for now… by the end of this manual you’ll have clearer ideas, you’ll have built small apps and experiments, and a complete app in the final exercise of Module 12, plus you’ll have the tools to evaluate what level of complexity to aim for in your future projects.

The jargon of this module (in brief)

• Coding Assistant = AI that transforms your ideas into working code (ChatGPT, Claude, Copilot, and many others)
• Setup = Preparing your computer and programs before starting (like organizing your desk before studying)
• Prompt = The instructions you give to the AI (the more precise they are, the better it helps you)
• Code Editor = The software where you write and modify code (like Word, but for programmers)
• HTML/CSS/JavaScript = The three languages of the web that work together (structure + style + interaction)
• CodePen/JSFiddle = Sites where you write code and see results immediately (zero installations)

🧠 Don’t worry if these terms seem difficult, they’ll become clearer along the way!

The Truth About Coding Assistants

Alright, let’s be realistic from the start. A coding assistant (Claude, ChatGPT, Bolt.New…) is not:

• 🧙‍♂️ A wizard that reads your mind
• 🤖 A robot that does everything by itself (getting there?)
• 💰 A million-dollar app printer

It is instead:

• 🗣️ A brilliant translator between “human” and “computer”
• 👨‍🏫 A patient tutor available 24/7
• 🔧 An assistant that writes code following your directions

The Translator Metaphor

Imagine having to communicate with a foreign builder to construct your house. You only speak English, they only speak their language. The coding assistant is your highly skilled interpreter who:

• Understands what you want (“a big window here”)
• Translates it into precise technical terms
• Verifies that the builder understood correctly
• Explains what the builder is doing

Except instead of their language, it translates into JavaScript, Python, or whatever programming language is needed.

What You Can REALLY Build (Concrete Examples)

✅ Doable right away

• Custom Pomodoro Timer: 25 min work, 5 break, with sounds
• Monthly Expense Calculator: input expenses, see graphs, export PDFs
• Quiz Game: questions, scores, local leaderboards
• Smart Todo List: tasks, priorities, reminders
• Personal Portfolio: your showcase website
• Unit Converter: km→miles, €→$, etc.

⚠️ Doable with more experience

• Little e-commerce: product catalog, basic cart
• Blog with comments: articles, categories, moderation
• Data Dashboard: graphs from Excel/CSV files
• Booking System: calendar, reservations
• Local Chat App: real-time messages between browsers

❌ Better not (for now.. later who knows)

• The next Instagram
• Apps with millions of users
• Trading bot that makes you rich
• Netflix clone with video streaming
• Apps requiring advanced AI (like face recognition)

The (Honest) Limits of Technology

The coding assistant doesn’t know what you want if you don’t explain it

• ❌ “Make me a nice app”
• ✅ “Make me a timer that rings every 25 minutes”

It doesn’t handle infinite complexity

• ❌ “I want to build a social network”
• ✅ “I want a page where I post photos and comments”

It doesn’t solve business problems

• ❌ “Make me an app that makes money”
• ✅ “Make me a form to collect emails for newsletter”

Basic Setup: The Toolbox

The Coding Assistant (choose one to start)

🤖 Claude (Anthropic)

• Pro: Great for explanations, appreciated for coding
• Con: Sometimes too cautious, sometimes overly enthusiastic
• Cost: Free with limits, paid plans for more usage

💬 ChatGPT (OpenAI)

• Pro: Versatile, great capabilities
• Con: Sometimes makes things up
• Cost: Free with limits, paid plans for more usage

🚀 Cursor

• Pro: Editor with several integrated AI
• Con: Takes a bit to learn
• Cost: Free with limits, paid plans for more usage

Where to Write Code

To start immediately (zero setup):

• CodePen.io: Perfect for web
• JSFiddle.net: Fast for experiments

For serious projects (requires installation):

• VS Code: The most popular editor (free)
• Cursor: VS Code + integrated AI
• Notepad++ / Sublime Text: Light and fast code editors

Your First “Dialogue” with AI

Prompt Magic

🚫 WRONG

"hi can u make me an app?"
"I want like instagram but better"
"it doesn't work, fix it"

✅ RIGHT

"Hi! I'm a complete beginner. I'd like to create
a simple timer that:
- Shows a 25-minute countdown
- When it finishes, plays an alarm
- Has a start/stop button
Can you guide me step by step?"

The Response You’ll Get

The coding assistant will give you:

1. The complete code
2. Explanations of each part
3. Instructions on how to make it work
4. Suggestions for improvements

🚩 Red Flag! – Classic First Day Mistakes

Starting too big

• “I want to make a complete management system” → Start with a todo list

Not reading the explanations

• Code isn’t magic, you need to understand what it does (at least broadly)

Copying without trying

• Every piece of code should be tested immediately

Giving up at the first error

• Errors are normal! The AI will help you solve them

Try It Yourself!

Exercise

Open Claude or ChatGPT and copy this prompt:

Hi! I'm new to programming.
Can you create me a simple web page with:
- A title that says "My first code!"
- A button that changes color when clicked
- Use only HTML and JavaScript inline (in the same file)
Please explain each line!

Then:

1. Copy the code to CodePen.io if your AI can’t display it directly
2. Look at the result
3. Try changing the title
4. Change the button colors

The Right Mindset

Vibe coding is not:

• 🏃‍♂️ A race (take it slow, understand everything)
• 🎯 Aiming for perfection (does it work? great, move on!)
• 🤯 Understanding everything immediately (you learn by doing)

It is instead:

• 🧩 Building LEGO following instructions
• 🗣️ Having conversations with a patient tutor
• 🔄 Iterating: try → error → fix → works!

Checkpoint: Did you do the exercise? Did you see your first code work?

If yes → Great, you’re ready!
If no → Go back and try it, it takes 5 minutes

Next Step

In Module 1 we’ll discover how a website or webapp really works. Spoiler: it’s much simpler than you think, it’s like a house with rooms, furniture, and systems.

Remember: even programmers with 20 years of experience were googling “how to center an image” until yesterday. With coding assistants, you already have a head start!