FrontendArena/ 01 Build mode

Personal frontend learning system

Learn less.
Build more.

A mission-based learning environment built while learning HTML, CSS and JavaScript—one practical feature at a time.

Explore learning path View capstone

What this project demonstrates

Fundamentals connected into real features.

The project moves from meaningful page structure to live API data. Every stage has a practical outcome that can be opened, tested and explained.

01 / Structure

Semantic HTML

Landmarks, heading order, forms, tables, labels and accessible native controls.

02 / Interface

Responsive CSS

Variables, Flexbox, Grid, reusable components, focus states and mobile layouts.

03 / Interaction

DOM and events

Selectors, event listeners, dynamic elements, feedback and form handling.

04 / Data

Arrays and objects

Rendering, filtering and sorting interface data with readable functions.

05 / Persistence

localStorage

Saving progress, preferences and useful articles across browser visits.

06 / Network

Async JavaScript

Fetch API, async/await and visible loading, empty, success and error states.

Mission preview

A deliberate progression.

Early missions establish structure and interaction. Later missions combine state, browser storage and external data.

01
HTML Foundations

Build a correct document and understand its parts.

→ 04
Responsive Layout

Use Grid and a breakpoint to adapt a dashboard.

→ 08
Search, Sort and Storage

Derive a live view from an array of mission objects.

→ 09
Live API Data

Fetch developer articles and handle every UI state.

→

Mission 10 / capstone

Developer Article Hub

Search live developer articles, sort results, save useful resources and persist them with localStorage. It combines the main JavaScript patterns from the journey.

Open the capstone
  1. 01User submits a search
  2. 02Fetch requests API data
  3. 03State stores the response
  4. 04Array methods create the view
  5. 05DOM renders usable results