← Code

Web

Build pages, then make them draw, move and react.

Foundations

Structure and style a page13 lessonsBuild your own web pages and watch them change as you type.◆ 2 projectsConsole bridge: text in, text outPython pathwayMake programs that ask questions and answer back.Layout and components10 lessonsAfter Structure and style a pageLay out a page like a real website, on a laptop and on a phone.◆ 2 projectsDrawing and animation with p5.js7 lessonsAfter Structure and style a pageDraw and animate with JavaScript.Web apps with Flask5 lessonsAfter Structure and style a page and Console bridgePut Python behind your own web pages.

Extensions

Pages with Bootstrap3 lessonsAfter Layout and componentsMake a page look polished in minutes with ready-made parts.Your site, for real2 lessonsAfter Layout and componentsMake your page work for everyone, then put it online.The DOM and the browser console7 lessonsAfter Drawing and animation with p5.js and Layout and componentsMake a web page react when people click and type.Apps with Vue6 lessonsAfter The DOM and the browser consoleBuild apps where the page keeps up with your data by itself.

Start with Structure and style a page: how a page is built from tags and given colour with CSS rules. Layout and components then lays the same page out with boxes, Flexbox and cards. The extensions bring in JavaScript, first drawing and animating with p5.js (the same ideas as turtle), then changing a real page when people click and type. Pages with Bootstrap rebuilds the club page from ready-made parts (with a look at Bulma, Tailwind, daisyUI and Pico). Apps with Vue follows the DOM course: the page keeps up with the data by itself, ending in a to-do app and the same app in Vue, Preact and Svelte. Every route ends with Your site, for real: make your page work for everyone, then put it online.

Foundations

Structure and style a pageBuild your own web pages and watch them change as you type.Build web pages by typing HTML and CSS and watching the page change.Layout and componentsLay out a page like a real website, on a laptop and on a phone.Control how a page is laid out, with boxes, Flexbox, Grid and components that repeat.After: Structure and style a page

Extensions

Pages with BootstrapMake a page look polished in minutes with ready-made parts.Rebuild the club page with Bootstrap's ready-made parts: buttons, a navbar, cards, a grid and a form, styled by class names instead of your own CSS. Then compare it with the hand-built page and make Bootstrap look like yours.After: Layout and componentsDrawing and animation with p5.jsDraw and animate with JavaScript.Draw and animate with JavaScript and p5.js: shapes, movement, decisions, lists, objects and functions, ending in a small game you build yourself.After: Structure and style a pageThe DOM and the browser consoleMake a web page react when people click and type.Make a real web page react with JavaScript: find elements, change them, listen for clicks and typing, and keep a list and a score, ending in a quiz page you build.After: Drawing and animation with p5.js and Layout and componentsApps with VueBuild apps where the page keeps up with your data by itself.Build pages that keep up with their data by themselves: data shown with {{ }}, lists with v-for, choices with v-if, events and inputs, computed values and components, ending in a to-do app. An optional last lesson builds the same app in Vue, Preact and Svelte.After: The DOM and the browser consoleYour site, for realMake your page work for everyone, then put it online.Bring any page you have made (hand-built, Bootstrap or Vue) and get it ready for real people: check it works for everyone, then put it online. No new framework: it works the same on every page.After: Layout and componentsWeb apps with FlaskPut Python behind your own web pages.Your own HTML pages with Python behind them: routes, pages built from data, forms, saving to a file and JSON, ending with the same API in FastAPI.After: Structure and style a page and Console bridge: text in, text out

Other pathways: Python · MakeCode