FrontendArena/ 01Build mode

Builder log / project story

Built to understand the work.

Frontend Arena started as my personal frontend learning project. Instead of only watching tutorials, I turned the concepts I was learning into missions and working interfaces.

Why I built it

From individual lessons to one connected system.

The earliest missions focused on page structure and semantic HTML. Later missions introduced CSS layouts, DOM manipulation, forms, arrays of objects, filtering, localStorage and data from a public API.

The current version reorganizes those exercises into a path where each feature prepares for the next one. It uses plain HTML, CSS and JavaScript so the architecture stays visible and explainable.

I use AI as a mentor and reviewer, but a feature only counts as learned when I can trace its data, explain its functions, test its behavior and identify its limitations.

How it evolved

Simple pages became interactive features.

  1. Structure and meaningSemantic sections, headings, text elements and browser parsing.
  2. Layout and feedbackReusable CSS, responsive Grid and clear interaction states.
  3. Data-driven pagesObjects, arrays, forms, map(), filter(), sort() and DOM rendering.
  4. PersistenceJSON and localStorage for progress, preferences and saved content.
  5. Live dataFetch API, async/await and loading, empty and error states.

What I learned

The decisions around code matter too.

HTML communicates meaningI choose elements for their purpose and start with native accessible controls.
CSS needs a systemVariables and shared components make ten missions feel like one product.
State drives the interfaceArrays and objects hold the data; rendering functions translate it into DOM.
Async work has several statesA request needs loading, success, empty and error feedback—not only a happy path.
Ownership requires explanationIf I cannot explain why a function exists, that part still needs study or simplification.

Architecture

Small files with clear jobs.

HTML gives every page its content, landmarks and controls. style.css contains the shared product design, while mission.css contains learning-page patterns. data.js holds the roadmap. script.js handles navigation and practice progress. Feature scripts contain the logic for the mission that uses them.

A future version can move repeated page markup into React components. For this stage, static pages keep the browser behavior easy to inspect and explain.

Explore the roadmap