Pythonᴬᴵ: Build AI-Powered Web Apps

Everything students have built so far runs in a terminal. This lesson blows the door open: they discover that Python can output directly into a web browser, with colors, fonts, and real layout. They get a crash course on how the web works (browsers, HTML, CSS) and see their first Python variable rendered on a real web page.

Students learn the core HTML elements that make up every website: headings, paragraphs, images, video, and audio. They hand-write HTML to build a real page, then ask AI to make it beautiful. The lesson establishes the pattern: students build the structure, AI helps with the polish.

Students create their first external CSS file and discover how to control the look of their pages: colors, sizes, backgrounds, and shadows. They link CSS to HTML and watch their plain pages transform. AI generates a custom image for their page, and they style everything around it.

Students learn how to group elements into containers using divs and structure pages with layouts. This is where web pages stop looking like documents and start looking like apps. The big addition: data coming from Python code appears inside their layout — connecting the backend to the frontend for the first time. When things break, AI helps debug visually.

Students go deep on typography — the CSS properties that control how text looks and feels on a page. Font families, sizes, weights, spacing, alignment, decoration, and transformation. They style Python-generated text content and see how typography alone can completely change the mood of a page. No AI this lesson — students need to feel CSS in their fingers.

Students learn how CSS actually targets specific elements — the selection system that makes real styling possible. Without this, everything gets the same style. With classes, IDs, and selectors, students can style individual elements differently, create reusable style patterns, and build pages that look intentional instead of accidental.

Students learn how web pages collect information from users: text fields, dropdowns, checkboxes, buttons. They build a real form, then ask AI to make it beautiful and add animations. The form doesn’t just look good — it collects data that will power the interactive features in the next lesson.

Students bring their pages to life with events: when a user clicks a button, submits a form, or interacts with the page, code runs in response. This is where everything connects — form data gets submitted, Python processes it, AI enhances it, and the result appears on screen. Students take their projects from course 2 and give them a real visual interface. The terminal is gone. The GUI is here.

The big unlock: students learn what an API is and how web pages talk to AI services. They make their first API call from a web page, send data to an AI, and display the response right on screen. This is how every AI-powered website actually works — and now students can do it too.

Students learn CSS positioning — the system for placing elements exactly where they want on the page. Static, relative, absolute, fixed, and sticky. This is one of the trickiest parts of CSS, and students need to feel it through experimentation. No AI this lesson — just students, CSS, and a lot of moving things around until it clicks.

Students begin building a complete web application called “Homework Wizard” — a project that brings together every skill from the course. The app has a real HTML structure, CSS styling, form inputs, event handling, Python processing, and AI-powered features. It’s the full stack: what the user sees (HTML/CSS), what happens when they interact (events), and what runs behind the scenes (Python + AI).

Students finish, polish, and present their web apps to the class. They add pages, refine styling, improve the user experience, and add personality. The class then tries each other’s apps live in the browser. The course closes with the full arc: in course 1 they wrote Python in a terminal. In course 2 they built intelligent systems. Now they’ve built something anyone can open in a browser and use.