Halfway through the curriculum deck, with foundational stack basics complete and a transition into advanced topics plus repetition reminders for retention.

You have used a coding agent for months, mostly to learn and to get advice. From here on the agent writes most of your code while you direct and review. This lesson covers how to do that well: how to align on a plan before code is written, how to shape the agent's behavior, how to make it verify its own work, and how to keep a session productive.

Important

Work on this lesson in builder mode.

Learning goals

• You can explain when planning with an agent pays off and when it is overhead, and align on a plan before implementation....

ES6+ JavaScript requires solid understanding of prototypes, modules, equality, closures, and let/const to read and write more complex code correctly.

Asynchronous JavaScript avoids blocking the event loop and is essential for network requests, animations, and error handling; Promises, async/await, and callbacks shape control flow.

Browser apps often need third-party UI and utility libraries; choosing maintained, lightweight packages with compatible dependencies avoids bloat and integration problems.

Sass variables disappear when the stylesheet is compiled. CSS custom properties stay in the browser: they follow the cascade, can be changed at runtime, and let one value drive a whole theme. This card teaches you when to reach for which, and how to turn scattered CSS values into a small set of named variables.

Important

Work on this lesson in teacher mode.

Learning goals

• You can explain what a CSS custom property is and how it differs from a Sass variable, in particular that it lives in the browser and follows the cascade.
  -...

Every web application splits its work between server and browser somewhere. Where you draw that line decides how much JavaScript you write, how the app feels to use, and how hard it is to keep working. This card walks the spectrum from classic multi-page apps to full single-page apps, explains where we usually land and why — and prepares you for the JavaScript cards that follow.

Important

Work on this lesson in teacher mode.

Learning goals

• You can explain the three main web architectures — multi-page app (MPA), progressively ...

Unpoly adds SPA-like interactions with far less JavaScript by swapping page fragments, handling links and forms, and using built-in overlays and autosubmit features.

Real forms are rarely static. A field is only shown when another has a certain value, a title is checked for duplicates while the user types, a price is recalculated on the server as options change, and nothing must be submitted twice. Unpoly lets you build all of this without writing a client-side copy of your business logic. This card teaches the patterns.

Important

Work on this lesson in advisor mode.

Learning goals

• You can explain how server-side validation of single fields works while the user is still filling out the fo...

Ruby metaprogramming and DSL design for readable configuration, dynamic methods, and parameterized modules; weighs flexibility against maintainability and scope limitations.

Ruby method lookup, prepend, extend, and ActiveSupport::Concern shape monkey patches and virtual attribute APIs; argument forwarding and source lookup help with metaprogramming.

Movie submissions need moderation before publication: drafts can be reviewed, declined, or published, with visibility and validation rules changing by state.

You work with agents every day, and in an upcoming card you will build features on top of an LLM API. Both come with a security story — and it's the same word, prompt injection, describing two different attacks. This card gives you the balanced 2026 view: real risks, workable mitigations.

Important

Work on this lesson in advisor mode.

Learning goals

• You can distinguish the two threat models: your agent being attacked through content it reads (websites, READMEs, issues), and your application being attacked through user inp...

Build JavaScript integrations for map geocoding and gender lookup, then verify them with end-to-end tests using real or fake external APIs.

Add external movie data to MovieDB: show a random upcoming title from an XML feed and fetch new film years from The Movie Database automatically.

Many applications now call an LLM for features that would otherwise be impossible or expensive: summarizing, extracting data from images, recommendations. In this card you build such features into MovieDB with the RubyLLM gem. Your mentors provide an API key.

Important

Work on this lesson in builder mode.

Learning goals

• You can explain how a chat-completion API works — messages with roles, a model, a response — and what tokens and context windows mean for cost and limits.
• You keep instructions and user input in separate mes...

Jasmine enables fast unit tests for JavaScript components without browser-end-to-end workflows, using mocked DOM events, timers, and HTTP requests.

Some of the people using your app can't see the screen, can't use a mouse, or rely on assistive technology to read the page. Accessibility is a spectrum of support, and nobody expects a junior developer to master all of it. We do expect the basics: markup that says what things are, focus that behaves, and a keyboard that works everywhere. This card teaches those basics and lets you experience your own MovieDB the way a screen-reader user does.

Important

Work on this lesson in teacher mode.

Learning goals

• You can explain that ...

Secure file attachments need access control and upload validation to prevent unauthorized downloads and malicious content.

UI design basics help create clearer, more polished interfaces with better color, typography, spacing, and visual hierarchy.

Grid layouts suit two-dimensional page structures, while Flexbox fits one-dimensional flows. display: grid can simplify card and gallery layouts and reduce wrapper elements.

Requirements analysis for a web app with incomplete UI design, focused on deriving CRUD models, ER diagrams, mockups, and role-based screens from client prose.

Top-down and bottom-up estimates differ in effort and accuracy, and software estimates often need extra factors beyond development time.

Choosing web technologies shapes long-term maintainability, upgrade effort, and team productivity. Balancing proven tools against new trends helps avoid costly stack changes.