Frontend EngineerBeginner8 modules~4.0 hours hands-on3 learning modes
JavaScript for the Browser
Build CityScope, a searchable city and weather explorer, while mastering modern JavaScript, the DOM, modules, async data, storage, and defensive debugging.
// What you'll be able to do- The browser-JavaScript bridge and the road ahead
- Create CityScope's semantic shell and module entry point
- Transform city data with pure functions and closures
- Turn search input into an accessible interactive interface
8 modules, built to run
Every module ships runnable code. Expand any one to see what's inside.
00IntroductionWhat we're building and why30 min
Questions this module answers
- How do you see the complete CityScope experience you will build?
- How do you choose the learning path that fits your goals?
Start moduleFree preview
01OrientationThe browser-JavaScript bridge and the road ahead30 min
Questions this module answers
- How do you confirm the tools and HTML/CSS baseline required for the project?
- How do you trace one user action through data, DOM, and storage boundaries?
02Project SetupCreate CityScope's semantic shell and module entry point30 min
Questions this module answers
- How do you create the complete CityScope folder structure?
- How do you build an accessible search and results shell?
03Data, Functions & ScopeTransform city data with pure functions and closures30 min
Questions this module answers
- How do you transform arrays with map, filter, and sort without mutating source data?
- How do you write small pure functions with explicit inputs and return values?
04DOM, Events & FormsTurn search input into an accessible interactive interface30 min
Questions this module answers
- How do you select and update DOM nodes without unsafe HTML interpolation?
- How do you handle form submission and delegated button clicks?
05Modules & Asynchronous DataLoad local JSON with fetch, promises, and explicit UI states30 min
Questions this module answers
- How do you use ES module imports and exports to enforce project boundaries?
- How do you explain promises and async/await as eventual values rather than blocking calls?
06Storage & Defensive DebuggingPersist favorites and recover safely from bad data30 min
Questions this module answers
- How do you serialize and restore favorite ids through localStorage?
- How do you debug failures by locating the boundary that violated its contract?
07See It RunVerify the complete explorer and prove what you can build30 min
Questions this module answers
- How do you run the complete CityScope application through its critical user journey?
- How do you verify pure modules and browser integration boundaries?
Ready to start JavaScript for the Browser?
Start with the free Module 0, then unlock the full course on a Pro plan.