...number of different versions for Ruby, Rails and many gems. To be able to switch between projects easily, we must control every dependency our applications has. Important
...gem is and where installed gems live, and you can read a gem's source locally (e.g. with bundle open) or on GitHub. You can explain why we need a...
...which records a user sees, which transitions they may trigger — to the state. You test state-dependent behavior at the right level: end-to-end for the business process, unit...
...as it's getting reviewed. This could be a typical state flow for a movie: stateDiagram-v2 [*] --> draft draft --> pending pending --> declined: Reason declined --> pending pending --> published Changes to the...
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...
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...
...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...
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
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...
...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 script placement, defer and DOMContentLoaded decide when...
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...
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...
Migrations change your database schema in a controlled, repeatable way. This lesson covers how migrations work, how to write complex ones, and how to deal with existing data. Important
...in advisor mode. Learning goals You can explain what migrations are for, and why schema changes go through migrations instead of manual changes on a server. You can write migrations...
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...
...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...
Many applications let users upload files. This lesson covers storing uploads as model attributes with CarrierWave, generating image versions, and testing uploads. Important Work on this lesson in advisor mode...
You can explain how an uploaded file travels from the browser to the server (a multipart form post) and where a Rails app can store it. You can explain...
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...
...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...
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...
...and Capybara::Node::Matchers — the API reference 📄 The two drivers as gems: rack-test and selenium-webdriver Flaky tests and our toolbox 📄 Fixing flaky E2E tests — our card on why...
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...
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...
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...