FrontendArena/ 01Build mode

Learning map / 7 stages / 10 missions

A route with a reason.

Each stage adds one useful capability, then reuses it in the next feature. Your practice progress is stored only in this browser.

Practice progress0 of 10 complete · 0%
Stage 01

HTML foundations

Give content correct structure and meaning before adding behavior.

01

HTML Foundations

Document structure, headings and page landmarks.

Open mission 02

Meaningful HTML

Choose elements by purpose and make content understandable.

Open mission
Stage 02

Browser foundations

Understand how HTML becomes the DOM that JavaScript can use.

03

Browser to DOM

Parsing, DOM creation and the purpose of defer.

Open mission
Stage 03

CSS layout

Organize content clearly across desktop and mobile screens.

04

Responsive Layout

Grid, spacing, cards and a practical breakpoint.

Open mission
Stage 04

DOM and interaction

Connect user actions to visible, accessible page updates.

05

DOM Interaction

Selection, events and an ordered DOM update.

Open mission 06

Forms and Data

Validate input, create objects and update a list.

Open mission
Stage 05

Data-driven UI

Keep data in arrays and derive the interface from it.

07

Arrays to Tables

Render structured rows with map() and join().

Open mission 08

Search, Sort and Storage

Filter live data and remember control choices.

Open mission
Stage 06

Async JavaScript

Request live data and design for every possible result.

09

Live API Data

Fetch, async/await and loading, empty and error states.

Open mission
Stage 07

Capstone

Combine forms, API data, arrays, state and localStorage.

10

Developer Article Hub

Search, sort and save useful developer reading.

Open mission
Next

Next in Frontend Arena

Planned growth after the current vanilla JavaScript foundation.

Deeper JavaScript

Scope, closures, event loop and reusable functions.

Accessibility audits

Keyboard, screen reader and repeatable Lighthouse checks.

Testing basics

Verify important UI behavior with focused tests.

React later

Components and state after the JavaScript base is explainable.