Frontend Application FoundationsPublished

Course 04

Frontend Application Foundations: From JavaScript to Structured Applications

Continue Course 03 by rebuilding the frontend data flow one small step at a time. Learn how data, state, rendering, events, asynchronous loading and modules work together before moving to TypeScript or a framework.

After Web ProgrammingEstimated 8 to 10 hours including practice13 lessonsUpdated October 2026

Learning outcomes

Trace data from its source through state and processing to the DOM
Explain why application state starts empty and changes over time
Distinguish initialization from repeatable rendering
Choose map, filter, find or forEach from the result an operation must produce
Update state before rendering after a user interaction
Load JSON asynchronously and represent loading, ready, empty and error states
Separate orchestration, state, data access and DOM rendering into focused modules
Debug a frontend application by locating the first incorrect step in its data flow
Explain which problems TypeScript and frontend frameworks can help solve next

Prerequisites

Web Programming with JavaScript: From DOM to APIs
Comfort with arrays, objects, functions, DOM events and ES modules
A desktop browser with developer tools, a text editor and a local web server

Curriculum

A guided path, lesson by lesson

8 modules · 13 lessons

Module 1

See the Whole Application

Reconnect with Course 03 and build a visible path from one JavaScript value to a list in the DOM.

From a Web Page to a Data Flow

See the small set of responsibilities inside an interactive frontend

From One Value to a List

Represent several resources and display them safely

Module 2

Render from Data

Give DOM updates one clear entry point and learn what rendering does and does not own.

Give render() One Job

Rebuild the visible list from the current data

Module 3

State Changes over Time

Treat state as the application's current memory, then connect one user action to a predictable update.

State Is the Application's Current Memory

Describe what the application knows at a particular moment

Events Update State First

Connect one user action to a predictable interface update

Module 4

Derive What the User Sees

Keep the complete list intact while search, filters and selection decide what the user sees.

Filter What the User Sees without Losing Data

Add search and filters while keeping the complete loaded list

Choose the Array Method from the Result

Use map, filter, find and forEach for distinct application intentions

Module 5

Start the Application Deliberately

Separate one-time initialization from rendering that may happen many times.

init() Is Not render()

Separate one-time startup work from repeatable interface updates

Module 6

Data Arrives Later

Replace local data with JSON loaded through fetch while preserving the same state and rendering model.

Replace Local Data with fetch()

Change where data comes from without changing the rendering model

Make Asynchronous States Visible

Represent loading, ready, empty and error without hiding uncertainty

Module 7

Separate Responsibilities

Split a working application into modules because its responsibilities are now understood.

Split the Working Application

Create modules from responsibilities you can already explain

Module 8

Explain, Debug and Continue

Trace failures step by step, check conceptual understanding and prepare for typed, framework-based development.

Trace and Debug the Data Flow

Find the first step where the value becomes wrong

Check Your Understanding and Continue

Explain the complete application before adding new tools