Building Web Apps with AI
- Description
- Curriculum
A web app is the most satisfying thing to build first: it is visual, it runs in any browser, and you can share it with a link the moment it is done. With an AI assistant, you can build one without learning a framework or wrestling with a complicated setup. This course takes you from a blank screen to a live site, one clear step at a time.
Building Web Apps with AI is hands-on and beginner-friendly. You will learn what a web page is actually made of, add real interactivity and state so your app does things and remembers them, style it so it looks designed rather than default, and then put it on the internet where anyone can use it. You finish by planning, building and launching a small real site of your own.
No frameworks, no jargon, no prior coding. Everything is taught in plain language with clear diagrams, and it is tool-agnostic, so it works with whatever AI assistant you use. Each module blends a short video overview, illustrated lessons, a knowledge-check quiz, and a hands-on interactive activity.
What you will be able to do:
- Understand the three layers of a web page: structure, style and behaviour.
- Add interactivity with buttons, inputs and events, guided by AI.
- Work with state: what your app remembers and shows right now.
- Style an app so it looks intentional, not generic.
- Deploy your app to the internet and share it with a link.
- Plan, build and launch a small real site end to end.
Who it is for: Beginners and non-programmers who have a little experience describing things to an AI and are ready to build and ship a real web app.
Course outline: Orientation · Frontend Basics via AI · Adding Logic and State · Styling That Looks Intentional · Going Live · Capstone: Launch a Real Site.
-
9Module 2 Video: Adding Logic and State6m 21s
-
10Lesson 2.1 · Making It InteractiveText lesson
-
11Lesson 2.2 · State: What the App RemembersText lesson
-
12Lesson 2.3 · Keeping Screen and Data in SyncText lesson
-
13Activity · Watch State in ActionText lesson
-
14Module 2 · Knowledge Check5 questions
-
15Module 3 Video: Styling That Looks Intentional8m 05s
-
16Lesson 3.1 · Why Default Looks GenericText lesson
-
17Lesson 3.2 · The Four Design LeversText lesson
-
18Lesson 3.3 · Asking AI for Good DesignText lesson
-
19Activity · Which Lever Fixes It?Text lesson
-
20Module 3 · Knowledge Check5 questions