Course Summary: Web Apps

You just built and deployed an interactive web application.

This is a significant step. Everything before this course was display. This is the first thing you built that actually does something.

What you learned

Web app vs website. Websites display information. Web apps respond to user input, process it, and return a personalised result. The difference is JavaScript, the layer that gives web pages a brain.

What you can build in one session. Four types of apps are buildable by non-developers without a backend. Calculators take inputs and return a number. Quizzes take answers and return a score and result. Trackers let users add and manage items with localStorage. Generators take inputs and produce formatted text output.

How to plan before prompting. Define your inputs, outputs, behaviour as a step-by-step list, and data storage needs. Planning the behaviour as a numbered list of events and responses is the language Claude understands best for building interactive apps.

How web apps actually work. HTML is structure. CSS is appearance. JavaScript is behaviour. JavaScript listens for events like clicks and typing, reads values from fields, calculates, updates the display, and optionally saves to localStorage. You describe the behaviour and Claude writes the code.

The master build prompt. A comprehensive prompt that specifies every input, every output, the exact formula or scoring logic, the step-by-step behaviour, error handling, design rules, technical requirements, and a self-check. This level of detail is what separates a working app from a broken one.

localStorage for data persistence. The browser's notebook. Free, requires no server, and persists between sessions on the same device. Used for trackers and anything where users build up data over time. Always include a Clear All Data function so users can reset.

Building a calculator app. One calculation, specific inputs, specific outputs. Test the formula manually before testing in the app. Currency formatting with toLocaleString. Business calculators are among the highest-converting lead tools that exist.

Building a quiz app. Questions with scored answers, result tiers with labels and descriptions. Validate that all questions are answered before showing the result. Gate the result behind an email for lead generation.

Test and debug. Three layers: core function test, edge case test covering empty submissions, zero values, negative numbers, and mobile view, and display test. Read console errors and paste them to Claude with context. Describe behaviour, not code.

Deploy the app. Same Netlify Drop approach as websites. Static JavaScript apps deploy perfectly this way. Test on a real phone after deployment. Connect to a landing page for lead capture.

The repeatable system

For every web app you build from here, follow this order.

Define the app type and scope. Plan inputs, outputs, behaviour, and storage. Write the master build prompt with exact behaviour described. Add localStorage if needed. Build and then test the core function with a manual math check. Run edge case tests covering empty inputs, zero values, and mobile view. Debug using console errors and behaviour descriptions. Deploy to Netlify Drop. Test the live version on a real phone. Connect to a landing page.

What you have now

A complete deployed web application. A system for planning any app before prompting. Working prompts for calculators and quizzes that are adaptable for any niche. A testing methodology that catches problems before users do. And a debugging approach that works without knowing any code.

What is coming next

Track 6 is Games.

You have built tools that help people. Now you build things that people play.

Games are a completely different type of web app. They run in real time, respond to keyboard and mouse input, keep score, and create an experience rather than a result.

Track 6 takes you from web apps into game development. You do not need to understand game engines because Claude builds everything. But you do need to understand how games think, how to describe game mechanics, and how to balance gameplay.

Do the homework before moving on. The homework is in the next lesson.