The Road

Faster, faster, until the thrill of speed overcomes the fear of death.

— Hunter S. Thompson

Level 1 — Core JavaScript + DOM + Semantic HTML/CSS

01 Completed

Data Types Playground

A single-page "Data Lab" where you add/remove/update items in each structure.

Array.isArray()Object.keys/values/entriesSetMapfor…in vs for…of
Repo ↗ Live Demo ↗
02 Completed

Semantic UI Components: Tabs + Accordion

Build accessible, semantic UI components — no frameworks. Keyboard support, focus states, CSS transitions.

Semantic HTMLKeyboard a11yCSS transitions
Repo ↗ Live Demo ↗
03 Completed

Array Methods Catalog

Mini product catalog with search, filters, and sorting using array methods.

filtermapfindreducesort/toSorteddebounce
Repo ↗ Live Demo ↗
04

Object Transformations Dashboard

Transform object datasets into UI-friendly forms. Covers entries, fromEntries, freeze.

Object.entries()Object.fromEntries()Object.freeze()
05

Storage-Based Preferences App

Settings panel that persists preferences and drafts using browser storage.

localStoragesessionStorageJSONtheme toggle

Level 2 — Browser APIs + Async/Await + Real UI Patterns

06

Fetch API Resource Explorer

Search and display results from a real API. Async/await, loading states, error handling.

fetchasync/awaitPromisesURL API
07

Intersection Observer: Scroll Spy

Sections highlight in nav as you scroll; elements animate when visible.

IntersectionObserverCSS keyframesclass toggling
08

Mutation Observer: Live DOM Watcher

Changing attributes or DOM nodes triggers logs and UI updates.

MutationObserverattributeschildList
09

CustomEvent Messaging

Modules communicate via events without direct imports. Cart, theme, notifications.

CustomEventdispatchEventaddEventListener
10

Web Components

Create reusable <product-card> and <toast-message> custom elements.

Custom Elementslifecycle callbackstemplates
11

Animation Toolkit

Build a small animation library and demo page. CSS + JS motion techniques.

CSS transitionskeyframesrequestAnimationFrame

Level 3 — React Fundamentals

12

React Data Catalog Rewrite

Rebuild the Level 1 catalog in React. Components, props, state, rendering lists.

Reactcomponentspropsstatekeys
13

React Hooks + Async Search

Fetch data, cache responses, handle loading/errors. URL param sync.

useEffectuseStatedebouncingrequest cancellation

Level 4 — Next.js

14

Next.js Dashboard with Routes

Multi-page app with shared layout, navigation, file-based routing.

App Routerlayoutsserver/client components
15

Next.js Observer + Components Showcase

Portfolio-grade capstone combining Observers, Web Components, events, storage.

IntersectionObserverMutationObserverCustomEventcapstone

Bonus — Experimental

16

Invoker Command API Demo

Tiny demo using the Invoker pattern with fallbacks. Learn to adopt new browser APIs safely.

Invoker APIprogressive enhancement

Concept → Project Mapping

  • Arrays / Objects / Sets / Maps + methods: Projects 1, 3, 4 (reused everywhere)
  • for…in vs for…of vs forEach: Project 1 drills + used repeatedly
  • Semantic HTML / CSS: Projects 2, 5, plus every project
  • Animation (CSS + JS): Projects 2, 7, 11
  • Fetch + async/await: Projects 6, 13
  • Intersection Observer: Projects 7, 15
  • Mutation Observer: Projects 8, 15
  • CustomEvent: Projects 9, 10, 15
  • Web Components: Projects 10, 15
  • URL API: Projects 6, 13
  • Local / Session Storage: Projects 5, 15
  • Invoker Command API: Project 16
  • React + Next.js: Projects 12–15

Michael Kelly — Web Developer