Guided Build: Your Core Screen

Today You Actually Build

This isn't a lesson about building. This IS the building. You're going to open your tools, open an AI assistant, and build the core screen of your project step by step. By the end of this session, you'll have something visible and functional — not finished, but real.

Set aside 45–60 minutes of uninterrupted time. Close other tabs. Get your project plan from Lesson 2.5 and your track package open beside you. This is a work session.

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: Define your main screen. Open AI and use this prompt (customize the bracketed parts):

"I'm building a [habit tracker / study planner / fitness log / budget tracker]. The main screen needs to show: (1) a list of [habits/tasks/exercises/expenses] the user is tracking, (2) a way to mark items as complete or log new entries for today, and (3) a simple visual showing progress (like a streak count or completion percentage). Generate the complete HTML, CSS, and JavaScript for this main screen. Use a clean, modern design with a dark background (#1a1a2e) and accent color (#6366f1). Make it mobile-friendly. Include sample data so I can see how it looks immediately."

Expected result: A complete HTML file with a working interface. Open it in your browser — you should see a styled screen with sample data visible. It won't be connected to real data yet — that's Session 2.

Step 2: Evaluate what AI gave you. Open the HTML file in your browser and ask yourself: 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 3: Direct the first revision. Almost nobody gets a perfect result on the first prompt. Pick the MOST important thing to fix first:

If the layout is wrong: "Reorganize the layout. Put [the habit list] at the top, [the add button] below it, and [the streak counter] at the bottom. Keep everything in a single centered column, max width 500px."

If it's ugly: "Improve the visual design. Add more spacing between elements, round the corners of cards, use a subtle shadow on the main container, and make the font larger and more readable."

If it's missing something: "Add [a streak counter that shows how many consecutive days each habit has been completed]. Display it next to each habit name as a small badge."

Step 4: Make it yours. Replace the sample data with your real habits/tasks/exercises. Change the title. Adjust the color if you want:

"Update this code: change the title to '[Your App Name]', replace the sample habits with [list your 3–5 real habits], and change the accent color to [your preferred color or keep the current one]."

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: Generate your homepage. Open AI and use this prompt:

"I'm building a [personal art portfolio / book recommendation site / volunteer opportunities guide / study resource hub]. Create a complete homepage in HTML, CSS, and JavaScript. Include: (1) a hero section with a title, subtitle, and brief description of what this site is, (2) a navigation bar with links to [Gallery, About, Contact / Recommendations, Categories, Submit / Opportunities, Filters, About], (3) a preview section showing 3–4 featured items in a grid with images and titles, and (4) a footer. Use a clean, modern design with background color [#0f0f1a] and accent color [#a78bfa]. Make it fully responsive for mobile."

Expected result: A complete HTML page with a professional-looking homepage. When you open it in your browser, you should see a hero section, navigation, a grid of placeholder content, and a footer.

Step 2: Evaluate and iterate. Open it in your browser. Check: Does the hero section clearly communicate what the site is about? Does the navigation make sense for my content? Does the grid section look like a preview of my actual content? Does it look good on mobile? (Resize your browser window to check.)

Step 3: Customize with your content. Replace all placeholder text with your real content:

"Update this page: change the title to '[Your Site Name]', update the subtitle to '[Your tagline]', and replace the 3 preview cards with: Card 1: [title, brief description], Card 2: [title, brief description], Card 3: [title, brief description]. Use placeholder images for now (colored rectangles are fine)."

Step 4: Set up your page structure. Your site will have multiple pages. For now, create empty pages that the nav links to:

"Create separate HTML files for my [Gallery/About/Contact] pages. Each should use the same navigation bar and footer as the homepage, but with a simple heading that says '[Page Name] — Coming Soon' as the main content. This way I can build out each page in the next session."

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. Before building the dashboard, make sure you have data to display. If you're using Google Sheets, your data should already be organized from Module 4. If you're using a CSV or JSON file, have it ready.

Step 2: Generate your dashboard.

"I'm building a [personal finance tracker / sustainability dashboard / sports stats tool / quiz app]. Create a dashboard page in HTML, CSS, and JavaScript using Chart.js (load from CDN). Include: (1) a header with the dashboard title, (2) a summary row showing 3–4 key metrics as large numbers with labels (e.g., Total Spent, Average Per Day, Top Category), (3) a bar chart showing [describe what the chart should display], and (4) a data table below showing the raw data. Use this sample data: [paste 5–10 rows of your data]. Dark theme, accent color #34d399."

Expected result: A dashboard page with summary metrics, a Chart.js bar chart with your data, and a data table. The chart should actually render with your sample data visible.

Step 3: Evaluate and iterate. Does the chart render correctly with your data? Do the summary metrics make sense for your topic? Is the data table readable? Does it work on mobile? (Chart.js charts are responsive by default.)

Step 4: Add a second visualization. One chart is a start. A real dashboard needs at least two different views of the data:

"Add a second chart below the first one. This should be a [pie chart / line chart / doughnut chart] showing [a different aspect of the data — e.g., spending by category, trend over time, completion rates]. Use the same data source. Make sure both charts have clear titles and labels."

When Things Go Wrong (And They Will)

Here's what to do when AI gives you something that doesn't work:

The code doesn't run at all. Most likely cause: a syntax error (missing bracket, typo in a function name). Don't try to read all the code yourself yet.

"This code isn't working. When I open it in my browser, I see [describe what you see — blank page, error message, etc.]. Here's the code: [paste the full code]. Find and fix the errors. Explain what was wrong."

It works but looks completely different from what I asked for. This usually means your prompt wasn't specific enough. Don't start over. Instead:

"This isn't what I wanted. I need [describe exactly what you expected]. Here's what you gave me: [paste the relevant section]. Revise it to match my description. Keep everything else the same."

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

"Everything works except [the progress counter / the navigation bar / the chart]. It shows [what it shows] but it should show [what you want]. Here's the relevant section of code: [paste just that section]. Fix this part without changing anything else."

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 the most important thing first when iterating. Don't try to change everything in one prompt.

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

5. Save your work as index.html — this is the foundation everything else builds on.