Guided Build: Your Core Screen

Today You Actually Build

This isn't a lesson about building. This IS the building. By the end of this session, you'll have a real, visible main screen for your project running in Replit. Not finished — but real.

This is going to take longer than the earlier lessons, and that's expected. Building a real thing is harder than reading about building. If AI gives you something weird and you have to iterate a few times, that's normal — Lesson 5.2 told you nothing works the first time. Don't panic if it takes a while. Take breaks when you need them.

Track 1: Personal Productivity Tool — Build Session 1

Only follow this step if you're on Track 1. If you're on Track 2 or 3, click "Next" to find your track.

What you're building today: The main screen of your productivity tool — the screen users see first and use most.

Step 1: Create a new Repl for your real project. Go to your Replit dashboard and create a new Repl using the HTML/CSS/JS template (same way you did the test drive in Lesson 3.3). Name it something like habit-tracker or whatever fits your project. This is the Repl your final deployed project will live in.

Step 2: Send the build prompt to the AI panel. Below is the template, then a fully filled-in example you can adapt. Paste your version into Replit's AI / Agent panel.

Template (copy this and replace the bold parts with your own info):

Fully filled-in example (use this exactly as-is if you want — it works):

Expected result: Replit's preview pane (the right side of your screen) updates to show a styled screen with the sample habits visible. It won't save your data between sessions yet — that's Session 2. If the preview looks broken or the page is blank, scroll down to the troubleshooting section.

Step 3: Evaluate what you got. Look at the preview and ask: Does it show the list of items I want to track? Can I see where I'd mark things complete? Is there a progress indicator? Does it look decent (not beautiful yet — just organized and readable)?

Step 4: Direct one revision. Almost nobody gets a perfect result on the first prompt. Pick the single most important thing to fix and tell AI. Examples — pick the one that matches your problem:

Step 5: Make it yours. Replace the sample habits with your actual habits and update the title. Send this prompt:

Track 2: Creative Portfolio or Community Site — Build Session 1

Only follow this step if you're on Track 2. If you're on a different track, click "Next" to continue.

What you're building today: Your homepage — the first page visitors see, including navigation to other sections.

Step 1: Create a new Repl. From your Replit dashboard, create a new HTML/CSS/JS Repl. Name it for your project — art-portfolio, book-recs, etc.

Step 2: Generate your homepage. Below is the template, then a fully filled-in example. Pick one and paste into Replit's AI / Agent panel.

Template (replace bold parts):

Fully filled-in example (works as-is for a book recommendation site):

Expected result: The Replit preview pane shows a homepage with hero, navigation, a 3-card grid, and footer.

Step 3: Evaluate. Does the hero clearly say what the site is? Does the navigation make sense? Does the grid look like a preview of your real content? To check mobile, click Replit's Share button to get a URL, then open it on your phone.

Step 4: Customize with your content.

Step 5: Add the other pages.

Track 3: Data Explorer Dashboard — Build Session 1

Only follow this step if you're on Track 3. If you're on a different track, click "Next" to continue.

What you're building today: Your dashboard layout with at least one working chart and your data connected.

Step 1: Prepare your data. Have your dataset ready — at least 5–10 rows of real or realistic sample data. It can be from a Google Sheet, a CSV, or just typed out. AI will use whatever you paste in.

Step 2: Create a new Repl. From your Replit dashboard, create a new HTML/CSS/JS Repl. Name it for your project — spending-dash, sports-stats, etc.

Step 3: Generate your dashboard. Below is the template, then a fully filled-in example.

Template (replace bold parts):

Fully filled-in example (works as-is for a personal spending tracker):

Expected result: Replit's preview pane shows a dashboard with summary metrics at the top, a working bar chart in the middle, and a data table below.

Step 4: Evaluate. Does the chart actually render (not just an empty box)? Do the summary numbers make sense? Is the data table readable? To test mobile, click Replit's Share button and open the URL on your phone.

Step 5: Add a second chart. A real dashboard tells a story with multiple views.

When Things Go Wrong (And They Will)

Three common problems and the prompts that fix them. In Replit you don't need to "paste the code" — the AI panel can already see your project. Just describe the problem.

The preview is blank or shows an error. Most likely cause: a typo in the code AI generated.

It works but looks completely different from what I asked for. Your prompt wasn't specific enough. Don't start over — describe the gap.

It partially works but one section is broken. Isolate the problem area.

KEY CONCEPTS

KEY CONCEPTS — LESSON 5.3

1. Your first AI-generated code is a starting point, not a finished product. Evaluate it, then iterate.

2. Be specific in your prompts: describe layout, features, colors, and include sample data so you can see results immediately.

3. Fix one thing per prompt. Don't try to change five things at once — you won't be able to tell what worked.

4. Replace sample data with your real project content before ending the session.

5. Replit auto-saves your Repl as you work — there's no "save the file" step. Just keep working until your checkpoint is met.