Web interfaces
Every program in the other courses prints to the console. People, though, see a program through a screen: a list of products, a "Buy" button, a form that says what is wrong, a page that loads without freezing. This course teaches how to make such a screen: first the platform of the browser, then the components a big interface is built from.
What you learn
Section titled "What you learn"The course has two parts.
Part 1: the platform
Section titled "Part 1: the platform"- The structure of the page: the elements and the tree the browser builds from them, text, links and tables, forms, accessibility.
- How it looks: the cascade and specificity, the boxes, flexbox, grid and a page that works on a phone.
- JavaScript in the page: the DOM, events, a list from data and data from an API, with loading, error and empty.
Part 2: components with React or Vue
Section titled "Part 2: components with React or Vue"- Components: the interface as a function of the data, props, lists and keys, conditions.
- State: drawing again, immutable updates, derived and shared state.
- Effects, data and forms: effects and cleanup, requests that race, forms with checks, shared state.
- A whole app: routing, speed, component tests and what a real project looks like.
- Project: the shop window: a catalog, a cart, an order and an API in one app.
How you learn here
Section titled "How you learn here"Every lesson starts from a problem in an online shop: a price that is suddenly a link, a button off the phone screen, a list that shows old data. Then a scene shows the idea: the tree the browser builds, the rule that wins the cascade, the event that bubbles up, the component that draws again.
The code runs right in the page, in a sandbox with no network and a pretend API of the shop. Tasks are checked by behavior: the check presses the buttons and finds the elements by role and name, the way a screen reader finds them. The first part is the same for React and Vue, and in the second you pick the library and can change it any time.
What you need to know
Section titled "What you need to know"JavaScript up to "Modern JavaScript": functions, objects, arrays with map and filter, modules and async/await. In the browser you need to install nothing.