Converge
Open the app

Week 5 · Season 2 · Face and hands

A face

You can read and fix a simple web page, make it readable and accessible, react to clicks, and stream a model reply onto the page as it arrives.

Open week 5 in the app

This week

  • HTML, CSS and JavaScript as a house
  • Layout, spacing, readable design and accessibility
  • Events, the DOM, and reading the JS an AI writes
  • Streaming: words that appear as you wait
  • Frameworks, and when a simple Python UI is enough
  • Go deeper: TypeScript, components and performance

How you learn

Write a page by hand with no framework: HTML for the frame, CSS for the paint, a few lines of JavaScript for the wiring. Then stream a reply into it yourself before any tool does it for you.

What you build

A chat page for FRIDAY in the browser: a text box, a Send button and replies that stream in word by word, with thinking dots and a real Stop button, readable on a phone. Start with a one-page plan and a mock-up.

Stretch: Rewrite the page script in TypeScript, split it into small components, and keep the page under a 500 KB performance budget.

What you ship

Project 1: FRIDAY goes online. A chat page, your own server and database, real tools and sign-in, reachable from your phone.

  • A one-page plan, a mock-up and a drawing of FRIDAY's chat page
  • index.html, style.css and app.js that stream a reply, committed to GitHub
  • tests/test_page.py checking the page's frame and accessibility, green on GitHub

Lessons

  1. What a web page is made of

    After this deck you can name the three parts of every web page, HTML (the frame), CSS (the paint) and JavaScript (the wiring), read simple tags, and fix a page whose tags are broken.

    11 minFull access

  2. Make it look right

    After this deck you can explain layout (pages as boxes in rows and columns, with space between), check text contrast, and name the basic accessibility checks every page should pass.

    11 minFull access

  3. Make it react

    After this deck you can explain events (the page's doorbells) and the DOM (the tree the browser builds), predict what simple JavaScript does when you click, and read AI-written wiring for the three things that usually go wrong.

    12 minFull access

  4. Words that appear as you wait

    After this deck you can explain streaming (sending an answer piece by piece as it's written), measure time to first token and total time, and design a chat that feels fast while it waits.

    12 minFull access

  5. Frameworks, briefly

    After this deck you can say what a framework like React solves (keeping a big page in step with its data, built from reusable pieces), and choose between a Python UI library, plain HTML/CSS/JavaScript and a framework for a given job.

    10 minFull access

  6. Go deeper: labels, pieces and speed

    After this deck you can explain what TypeScript adds to JavaScript, split a page into components with clear inputs, and keep a page fast with a performance budget.

    12 minFull accessGo deeper · optional

Labs

Python in the browser, next to the lessons.

Weekend build

Skills you prove

Web pages
Build a web page with HTML, CSS and JavaScript that reacts to the user

Hand-picked official docs, papers and talks.