Your first app

You've learned what apps are, how AI works, and the describe-critique-iterate approach of vibe coding. Now it's time to put it all together and build something real - a portfolio website using Design Mode.

Getting started on Replit

If you haven't already, head to replit.com and create an account. Once you're in, you'll see the Replit homepage - your launchpad for building.

Describe: Your first prompt

Remember the vibe coding approach from the last lesson? It starts with describe - telling the AI what you want. Let's put that into practice by building a portfolio website.

Before you start, take a moment to think about what you actually want. Good prompts come from clear thinking - not templates.

Ask yourself:

• Who are you? A designer? A student? Someone switching careers?
• What's the goal? Showcase projects? Land a job? Share your work with friends?
• What style fits you? Minimal and clean? Bold and colorful? Professional and polished?

Write your prompt in your own words. Be specific about what matters to you. The more thought you put in, the better your result will be.

Think critically about the instructions you give AI. Make sure they align with your goals and are specific enough to get the outcome you want.

Once you have your prompt, head to replit.com, select the Design tab, paste your prompt into the input box, and click Start. Agent will take it from there.

Design Mode vs. Build Mode

On Replit, there are two ways to start building - each suited to a different type of app:

• Design Mode creates static apps - sites that run entirely in the browser. Perfect for portfolios, landing pages, and simple tools. Everything happens on the user's device, no server needed.
• Build Mode creates fullstack apps - with both a frontend (what users see) and a backend (a server that handles data). Use Build Mode when you need user accounts, databases, or connections to external services.

The Workspace

Once Agent starts building, you'll enter the Workspace - your all-in-one environment for creating, editing, and publishing apps. Everything runs in the cloud on Replit. There's nothing to install, nothing to configure. Just open your browser and start building.

The URL you see in the Preview pane is a live page - you can open it on your desktop, scan a QR code and view it on your phone, or share it with someone else. Your app is already running on the internet, even while you're still building it. We'll explore more about this environment throughout the course.

Here's what you'll find in the Workspace:

• Chat: Your ongoing conversation with Agent. Ask questions, request changes, or give feedback here.
• Preview: A live view of your app as it's being built. Interact with it just like a real website - because it is one.
• Visual Editor: Select elements directly in Preview to modify text, images, colors, and spacing - no code required.
• Files: The code and assets that power your app. You don't need to touch these, but they're there if you want to explore.

Critique and iterate: Polishing your design

Your first result probably won't be perfect - and that's expected. This is where the next two steps of vibe coding come in: critique and iterate.

Look at what Agent created with fresh eyes. What works? What doesn't? Be specific about what you want changed - use Visual Editor to click on elements and adjust them directly, or chat with Agent to describe the changes.

Think like a builder when giving feedback:

• "Make the heading larger and add more space below it"
• "Change the background to a lighter shade of gray"
• "The font feels too formal - try something more modern"

Each round of feedback is one cycle through describe-critique-iterate. The more cycles you do, the closer you get to what you envisioned. Don't expect perfection on the first try - expect progress with each iteration.

Publishing your app

When your portfolio looks the way you want, it's time to share it with the world. Select the Publish button in the upper-right corner of the Workspace. Replit handles all the technical details - servers, security, and scaling.

Within seconds, your app will be live at a unique URL that you can share with anyone. That's it - you've built and published your first app.

What's next?

You've just gone from idea to live app. In the next lesson, we'll explore Build Mode and learn how to add real functionality - like databases and user accounts - to your projects.