SQL is the language used to talk to a database. This lesson covers reading and changing data, joins, indexes and transactions — and the craft of turning prose requirements into a...
...database schema. Important Work on this lesson in teacher mode. Learning goals You can explain what a relational database is and how an application talks to it (server, client, credentials...
Sometimes a form edits a record together with its child records, like a movie with its showtimes. This lesson covers Rails' nested attributes and how to build and test such...
...in advisor mode. Learning goals You can explain how nested attributes let one form save a record together with its child records in a single transaction — all of it or...
...you know how to make it prove its answers. This lesson teaches both, and shows where the canonical documentation lives when you want to learn instead of look up.
You can make the agent back up an uncertain answer, e.g. by citing sources, searching the web or running an experiment in the app — and you prefer the experiment...
...Work on this lesson in builder mode. Learning goals You can explain why JavaScript is single-threaded and non-blocking, and what the event loop does with tasks and microtasks...
...You can explain the difference between synchronous and asynchronous APIs, and why a network request cannot simply return its response. You can work with callbacks, Promises and async/await, and translate...
Browsers differ in which HTML, CSS and JavaScript features they support. This lesson covers how to find out what you can use, which browsers we support, and how transpilation, polyfills...
...lesson in advisor mode. Learning goals You can explain why browsers differ in feature support and look up whether a feature is safe to use, e.g. on Can I Use...
...clean and are easy to use. This lesson covers the basics of color, typography, spacing and visual hierarchy. Important Work on this lesson in builder mode. Learning goals
...explain the principles that make an interface look clean: visual hierarchy, consistent spacing, alignment, restrained color and readable typography. You can choose a small color palette and use contrast deliberately...
We use Selenium WebDriver with Capybara for end-to-end tests that need a real browser. Important Work on this lesson in advisor mode. Learning goals You can explain how...
...the source you read in the exercise 📄 The two drivers as gems: rack-test and selenium-webdriver Flaky tests and our toolbox 📄 Fixing flaky E2E tests — our card on why...
Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ code. Important Work on this lesson in...
...explain JavaScript's object model — objects, prototypes and the prototype chain — and how class syntax maps onto it. You can explain what a module is and structure code with import/export...
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...
...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
CSS controls how your HTML looks. This lesson covers selectors, the box model, basic layout, the browser's inspector, and the Sass basics we use in all projects. Important
...this lesson in teacher mode. Learning goals You can explain how the cascade and specificity decide which CSS rule applies to an element. You can explain the box model and...
...can explain what the DOM is and how it relates to the HTML the server sent. You can select elements by CSS selector, on the whole document or within a...
...can apply a change to many elements at once. You can explain why a script may run before the DOM exists, and how to wait for it. You keep JavaScript...
...this lesson in builder mode. Learning goals You can explain what Bootstrap provides — base styles, a responsive grid, ready-made components and utility classes — and when a project benefits from...
...screen using only utility classes for spacing, display and text — no custom CSS. Build a side-by-side layout with the grid utilities: two content areas next to each other...
Views grow. The same card, button or navigation shows up on ten screens, and soon the same twelve lines of HTML live in ten places. Rails partials are the first...
...tool against this; ViewComponent is the second, for components that carry logic, helpers, CSS and JavaScript of their own. This card teaches you to give your views a small, readable...
Page-specific JavaScript quickly becomes brittle. This lesson teaches you to structure JavaScript as reusable components that attach to HTML elements, support multiple instances, and clean up after themselves.
...JavaScript for both lists? For this your JavaScript must be abstract enough to not contain screen-specific references (such as selectors or URLs). Note that it's OK for the...
Many features need data from third-party services. In this lesson you integrate geocoding, maps and a title-autocomplete API from JavaScript, and learn to test code that talks to...
...external services. Important Work on this lesson in builder mode. Learning goals You can explain what is involved when a browser talks to a third-party service: API keys, CORS...
...classes with shared example groups. You can explain the trade-off between DRY specs and self-contained examples, and when shared setup is worth its coupling. You can write end...
...shared_examples and it_behaves_like 📄 rspec-core: user-defined metadata and our card on spec-type specific setup — hooks that run only for some specs 📄 Testing shared traits or...
Just like we use gems on the server, we use third party JavaScript libraries in the browser. These typically provide functionality like: General support libraries like Lodash Frontend Frameworks like...
Wysiwyg (What You See Is What You Get) HTML editors Datepickers Sliders Tooltips Dialogs ... Important Work on this lesson in builder mode. Learning goals You can explain how a...
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...
...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...
We are using the BEM pattern ("Block, Element, Modifier") to structure our CSS in all new projects. We try to migrate legacy projects to BEM, block-by-block. Important
Learning goals You can explain why unstructured CSS becomes hard to maintain — global scope, cascading side effects, selectors coupled to markup — and what a naming convention like BEM does...
Building on Software design basics, this lesson covers more principles and code smells, technical debt, and architecture antipatterns, using real repos to find examples. Important Work on this lesson in...
Learning goals You can explain what a code smell is and recognize the common ones in Ruby code, e.g. feature envy, objects reaching deep into other objects, classes...
In some projects we use Simple Form to write boring forms more quickly. Important Work on this lesson in builder mode. Learning goals You can explain what Simple Form does...
...pays off, and where plain form helpers are the better choice. You can configure Simple Form's generated HTML to match a project's markup, e.g. with its Bootstrap wrapper...
As developers we are dealing with many tasks every week. We need a system to organize ourselves. Important Work on this lesson in advisor mode. Learning goals You can explain...
...or a todo.txt). You can break a task or project down into actionable first steps. You finish tasks before you start new ones, so your list doesn't fill up...
Much of our work is on applications that are old or were built by someone else. This lesson covers how we make such applications stable and pleasant to work on...
Learning goals You can explain how legacy applications become complex, and why keeping software simple is hard. You can explain our approach to adopting a legacy app: end-to...
...good UI design, you should always be able to come up with a default. Since the user interface makes up 70% of a typical web application, this is closely related...
...the client has none, by modelling every interaction as CRUD on a resource — index, show and forms — and placing collection-level and record-level actions where users expect them.