Homework: Your First Web App

This homework has one job: get a working web app live on the internet before you go to bed tonight.

Not a website. Not a landing page. A real interactive tool that does something when a user fills it in and clicks a button.

What you are building

Choose one of these three options.

Option A is a business calculator relevant to your niche. Freelance rate, ROI, pricing, content value, ad spend, or any specific calculation a person in your audience needs to do regularly.

Option B is an assessment or quiz relevant to your niche. AI readiness, marketing score, business health check, skill gap finder, or any topic where people want to know where they stand.

Option C is your own idea. If you have a specific tool idea from your industry or audience, build that. Follow the master build prompt structure from the build lesson.

Part 1: Plan it

Fill in the planning template from the planning lesson completely. Cover all inputs with their field names and types, the format of each output result, the numbered step-by-step behaviour, error handling for each edge case, and whether you need data storage.

Do not skip this step. Incomplete planning produces an incomplete app.

Part 2: Build it

Create a new folder and open it in Claude Code. Add your CLAUDE.md with design rules inside the folder.

Fill in the master build prompt from the build lesson with your specific app details. Include the exact formula or scoring logic written in plain English, the step-by-step behaviour, and a self-check section with a known input and the expected output.

Send the prompt and let Claude build all three files.

Part 3: Test it

Run all three testing layers from the testing lesson.

Core function test: enter known inputs and verify the output matches your manual calculation. Edge case test: try empty fields, zero values, and mobile view at 375px. Console check: press F12, go to the Console tab, and confirm there are zero red errors.

Fix anything that fails before moving to deployment.

Part 4: Deploy it

Follow the deployment steps from the deploy lesson.

Go to app.netlify.com/drop. Drag your project folder into the drop zone. Get your live URL. Create a free Netlify account and claim the site to keep it permanently. Test the live URL on a real phone.

When the app works correctly on your phone you are done with deployment.

Part 5: Post in the community

Once your app is live go to the Claude Codex Mastery community and create a post titled "Web Apps Homework." Share your live app URL. Describe in two sentences what the app does and who it is for. Share one thing that broke during the build and how you fixed it.

Sharing the debug story is the most valuable part. What broke and how you fixed it is exactly what other members are going to experience too.

Bonus: extend your app

If you finish early and want to push further, try one of these additions.

Add a results sharing button:

Below the results section add a "Copy Result" button.

When clicked, copy the following text to the clipboard:

"[APP NAME] Result: [RESULT LABEL] — [BRIEF DESCRIPTION OF RESULT]
Get your score at: [YOUR APP URL]"

Show a brief "Copied!" confirmation message for 2 seconds then reset the button text.

Use the Clipboard API: navigator.clipboard.writeText()

Add a progress indicator for quiz apps:

• For the quiz app add a progress bar at the top of the questions section.
• It should show how many questions have been answered out of the total.
• Update it in real time as the user selects answers.
• Style: thin bar with accent colour fill, positioned below the intro paragraph.

Add a print and export button:

• Add a "Save as PDF" button to the results section.
• When clicked, call window.print() which opens the browser's print dialog.

Add a print-specific CSS media query using @media print that:

• Hides the navigation, form, and all buttons except the results section
• Shows only the result label, score, description, and a footer line reading

"Generated by [APP NAME]"

You are ready for Track 6

With a live web app you have crossed from displaying information into building tools.

Move to Track 6: 3D Website when you are ready to build something people play rather than use.