Stuck? Module 5 Starter

Starter Prompts

If your build session isn't going well, start fresh with one of these. Copy the prompt for your track, paste it into a brand-new Repl's AI panel, and you'll get a working baseline you can iterate from.

How to Use a Starter Prompt

  1. Don't try to fix the broken Repl. When a project is tangled up, starting fresh is almost always faster than untangling.
  2. Create a brand-new Repl in Replit (HTML/CSS/JS template). Name it something like habit-tracker-v2.
  3. Copy the prompt below for your track and paste it into the AI / Agent panel. Send it.
  4. Wait for AI to build and check the preview. You should have a working baseline.
  5. Now make it yours. Use a follow-up prompt to swap in your real content (your habits, your portfolio items, your data) and tweak the design.

Then keep going from where you left off. If the still-broken Repl had something useful, you can always copy specific pieces from it manually.

Find Your Track

Track 1: Productivity Tool Track 2: Portfolio / Community Site Track 3: Data Dashboard

Track 1 — Habit Tracker Starter Prompt

This prompt builds a complete, working habit tracker with checkboxes, an "add habit" input, a streak counter, a progress display, localStorage persistence, and mobile-friendly styling. Paste it into a fresh Repl's AI panel.

Build a complete, working habit tracker as a single-page web app. Use HTML, CSS, and JavaScript. Put everything in index.html (you can split into separate files if you prefer — your call). Features I need: 1. A title at the top: "My Daily Habits" 2. A progress display directly under the title that says "X of Y habits done today" and updates live as I check boxes 3. A list of habits, each shown as a card with: a checkbox, the habit name, a streak counter ("Day 3", "Day 12", etc.), and a small "×" delete button 4. An "Add Habit" input field at the bottom with an "Add" button — typing a habit name and clicking Add adds it to the list with a checkbox starting unchecked and streak at Day 0 5. Clicking the checkbox marks the habit done for today: visually dim the card or strikethrough the text. Unchecking reverses it. 6. localStorage to persist everything: habit list, today's checked status, streak counts, and the date of the last visit. When I reopen the page, my data is still there. 7. Daily reset behavior: if it's a new day since the last visit, automatically reset all today's checkmarks to unchecked. For each habit that was completed yesterday, increase its streak by 1. For each habit that wasn't, reset its streak to 0. 8. Delete confirmation: clicking "×" asks "Delete this habit?" before removing. 9. Empty state: if there are no habits, show a friendly message like "No habits yet — add one below to start tracking." Design: - Dark navy background, soft purple accent color - Clean modern sans-serif font, comfortable spacing between cards - Mobile-friendly: works well on a phone screen, big tappable buttons, readable text - Subtle smooth transitions when checking, adding, or deleting Start with these 3 sample habits already in the list so I can see how it looks immediately: "Drink 8 glasses of water", "Read 10 pages", "20-minute walk". I'll replace them with my real habits later. Once it's running, briefly explain in plain English what each file does so I know what's where.

After you get the baseline working, customize with your real habits:

Replace the sample habits with my real list: [paste your 3-7 real habits, one per line] Also change the title at the top to: [your preferred title]

Track 2 — Portfolio / Community Site Starter Prompt

This prompt builds a complete portfolio-style site with a homepage, navigation, a content gallery with category filters, and an About page. Pick the variation that fits your project.

Variation A: Personal portfolio (art, photography, writing, music, etc.)

Build a complete personal portfolio website. Use HTML, CSS, and JavaScript. I want multiple pages connected by a shared navigation bar. Pages I need: 1. index.html — Homepage with a hero section (big title, short tagline, brief description), a navigation bar linking to all pages, a "Featured work" preview grid showing 3 cards with placeholder images and titles, and a footer. 2. gallery.html — A page showing 8-12 work items in a grid. Each item has a placeholder image, title, short description, and a category tag. Above the grid, filter buttons for the categories that let you narrow down what's shown. Smooth animation when items filter in/out. 3. about.html — A page with a 2-3 paragraph bio, the story of why I made this site, and a simple contact form (Name, Email, Message). The form doesn't actually need to send email — just show "Message sent!" when submitted. All pages share: - The same navigation bar at the top with links to Home, Gallery, About - The same footer at the bottom - The same color scheme and font For now, fill the gallery with these 8 placeholder items (I'll swap them out for real ones later): 1. Sunset Series #3, photography, A coastal scene at golden hour 2. The Quiet Room, digital art, A minimalist interior study 3. Echo, mixed media, Texture and shadow in motion 4. Three of Cups, illustration, A character study in watercolor 5. Field Notes, photography, Rural landscapes from a road trip 6. Glass Garden, digital art, Translucent shapes in soft light 7. Midnight Reading, illustration, A character lost in a book 8. Tide, mixed media, Found-object collage on canvas Categories should be: photography, digital art, illustration, mixed media Design: - Dark background, soft accent color (purple, teal, or warm amber — your choice, just keep it consistent) - Clean sans-serif font for body text, a serif font for the hero title to feel a little more personal - Generous whitespace, comfortable spacing - Mobile-friendly throughout — navigation should collapse to a menu on phone, gallery becomes a single column Use placeholder colored rectangles where images would go (no need to find real images for now). Once it's running, tell me which file is which so I know where to make edits.

Variation B: Recommendation site (books, music, movies, recipes, etc.)

Build a complete recommendation site. Use HTML, CSS, and JavaScript. I want multiple pages connected by a shared navigation bar. Pages I need: 1. index.html — Homepage with a hero section (big title, tagline, short paragraph explaining what this site recommends and why anyone should care), navigation, a "Featured recommendations" preview grid showing 3 cards with placeholder images, titles, and one-sentence reviews, and a footer. 2. recommendations.html — A page showing 10 recommendations in a grid. Each one has placeholder image, title, category tag, and a 2-3 sentence review. Above the grid, category filter buttons that let you narrow down what's shown. Smooth animation when items filter in or out. 3. about.html — A page explaining who I am and why I'm making recommendations, plus a simple contact form (Name, Email, Message) that shows "Message sent!" when submitted (doesn't need to actually send). All pages share the same navigation, footer, color scheme, and font. For now, fill the recommendations with 10 placeholder items I can replace later. Use 3-4 categories so the filter buttons have something meaningful to do. Design: - Dark background, warm accent color - Clean modern font, comfortable spacing - Mobile-friendly throughout - Placeholder colored rectangles where images would go Once it's running, tell me which file is which so I know where to make edits.

Track 3 — Data Dashboard Starter Prompt

This prompt builds a complete, working dashboard with summary metrics, two charts, a data table, a data entry form, and category filters. Pick the variation that fits.

Variation A: Personal spending tracker

Build a complete personal spending dashboard as a single-page web app. Use HTML, CSS, and JavaScript. Use Chart.js for charts (load it from a CDN — that's a free way to load a JavaScript library from the internet without installing anything). Layout from top to bottom: 1. Header with title "My Spending Dashboard" and subtitle "Track expenses, see patterns" 2. Summary row with three big metric cards: Total Spent (this month), Average Per Day, Top Category 3. Filter row: a date range dropdown (This Week, This Month, This Year, All Time) and a category dropdown — selecting either filters everything below 4. Two charts side by side on desktop, stacked on mobile: a bar chart showing spending per category, and a doughnut chart showing percentage breakdown by category 5. A data entry form with fields: Date (date picker), Category (dropdown: Food, Transport, Entertainment, School, Other), Amount (number input), Description (text). An "Add Entry" button adds the row and updates everything live. 6. A scrollable data table below the form showing all transactions: Date, Category, Amount, Description, with a small delete button on each row. Behavior: - Data persists across page reloads using localStorage - Adding or deleting an entry recalculates the summary metrics, redraws both charts, and updates the table - Filters apply live to all charts, metrics, and the table - Entries sorted newest first by default Sample data to seed the dashboard so I can see it working immediately: 2025-09-01, Food, 12.50, Lunch with friends 2025-09-02, Transport, 5.00, Bus pass 2025-09-04, Food, 8.75, Coffee 2025-09-05, Entertainment, 15.00, Movie ticket 2025-09-07, Food, 22.00, Groceries 2025-09-09, School, 9.50, Notebook 2025-09-10, Transport, 5.00, Bus pass 2025-09-12, Food, 14.00, Pizza 2025-09-14, Entertainment, 8.00, Streaming subscription 2025-09-16, Food, 18.50, Dinner out Design: - Dark theme, soft green accent color - Big, readable numbers in the summary cards - Clean modern font, comfortable spacing - Mobile-friendly: charts and form stack vertically on phone, data table becomes scrollable - Subtle hover states on buttons Once it's running, briefly explain what each part of the code does in plain English so I know where to make changes.

Variation B: Sports stats / generic data tracker

Build a complete data dashboard as a single-page web app. Use HTML, CSS, and JavaScript with Chart.js (load from CDN, no install). The dashboard tracks: [describe your topic — e.g., "personal running stats: date, distance in miles, time in minutes, route name"] Layout from top to bottom: 1. Header with the dashboard title and a one-line description 2. Three summary metric cards showing the most useful aggregate numbers for my topic (e.g., total runs, average distance, fastest pace) 3. Filter controls: a date range dropdown and one category dropdown that fits my data 4. Two charts: one showing trends over time (line chart), one showing breakdown or comparison (bar or doughnut chart) 5. A data entry form with fields appropriate to my topic 6. A data table below the form showing every entry with a small delete button on each row Behavior: - localStorage persistence - Adding or deleting entries updates summaries, charts, and table live - Filters apply to all visualizations Seed the dashboard with 8-10 realistic sample rows so I can see it working immediately. Design: - Dark theme, soft green accent - Mobile-friendly throughout - Charts have clear titles and axis labels Once it's running, explain in plain English what each part does.

If the Prompt Didn't Work: Use the Working Starter Code

If the starter prompt above didn't get you unstuck, the next step is the working starter code — a finished, runnable version of each track's project. There are three of them:

Click the link for your track and a real, working version of the project opens in your browser. You can click around in it, add data, see how it behaves. But what are you supposed to actually do with it? Two options, in order of preference.

Option A — Use it as a reference (try this first)

Open the starter for your track in one tab and your own Repl in another. Click around in the working version. Notice what you like — the layout, the way the buttons are placed, how the streak counter works, the colors, the empty state, anything.

Then go back to your Repl's AI panel and describe one of those features at a time:

In my project, add a streak counter next to each habit name. Display it like a small badge that says "🔥 5 day streak" when there's a streak, or "No streak yet" when there isn't. Match the style of the rest of my cards.

This keeps the project yours — built through your own prompts — but you're getting unstuck by borrowing ideas from a working example. It's exactly what professional builders do all the time: look at how someone else solved a problem, then describe what you want in your own context.

Option B — Copy the code as a new starting point (last resort)

Use this only if Option A isn't getting you unstuck. This option throws away the broken Repl and starts over from a guaranteed-working baseline. You're not "cheating" — you're using a safety net so you can keep moving instead of getting stuck for an hour.

  1. Open the starter file for your track in your browser.
  2. Right-click anywhere on the page and choose "View Page Source" (some browsers call it "View source"). On a keyboard you can press Cmd+Option+U on Mac or Ctrl+U on Windows.
  3. A new tab opens showing the entire HTML, CSS, and JavaScript of the starter. Click anywhere in that tab, press Cmd+A (Mac) or Ctrl+A (Windows) to select everything, then Cmd+C / Ctrl+C to copy.
  4. Go back to Replit and create a brand-new Repl using the HTML/CSS/JS template (same as you did for the test drive in Lesson 3.3). Name it something like habit-tracker-fresh.
  5. Open the index.html file in your new Repl. Select everything that's already in there and delete it. Paste the code you copied (Cmd+V or Ctrl+V).
  6. The preview pane should now show the working starter project. You have a real, functional baseline to build on.
  7. Now use your AI panel to make it yours: "Replace the sample habits with my real ones: [list them]. Change the title at the top to [your title]. Change the accent color to [your color]." Continue from there.

If you can't find "View Page Source" or any step trips you up, ask AI: "I'm trying to copy the source code from a webpage at [paste URL] into my Repl. Walk me through how to do it on my computer." AI knows how to do this on every browser and operating system.

Still Stuck After All That?

You've tried the starter prompt, you've tried the working code, and something is still off. A few last ideas:

  • Get a parent or older sibling to look at the screen with you for 5 minutes. Fresh eyes catch what tired eyes miss. They don't need to know anything about coding — just describe what you're trying to do and what's happening instead.
  • Take a longer break and come back tomorrow. Most stuck moments resolve themselves overnight. Stuck-and-frustrated rarely solves anything; stuck-and-rested usually does.
  • Drop the scope. If a feature is fighting you, ask yourself: do I really need it for this version? Cut it. Ship a simpler project and add it back later. Done is better than perfect.
Back to Dashboard →