Skip to content

README.md

Latest commit

 

History

History
79 lines (64 loc) · 5.16 KB

README.md

File metadata and controls

79 lines (64 loc) · 5.16 KB
Raw

SWEXP Module 03 — Web Platform & JavaScript Foundations

Theme: Understanding the platform you build on.

You are a Frontend Engineer on Project Forge (continuing from Module 02). This module turns the browser from a black box into an inspectable platform you can investigate, measure, and reason about. Across 13 ticket-driven lessons you learn how a page loads, how the DOM and CSS produce a layout, how the JavaScript runtime and event loop actually behave, how to make data and algorithms scale, how the network delivers your app, and how the browser paints pixels — then you integrate it all in a web-diagnostics capstone.

The ethos, in every lesson: investigate first, optimize second, and never claim a cause you haven't observed.

How You Work Here

Step What it means
Pick up a ticket Each lesson is an engineering ticket (WEB-1010, PERF-4015, …) with acceptance criteria
Investigate first Open the right instrument (DevTools panel, Node, curl) and gather evidence before changing code
Localize the layer Pin the problem to load / document / language / performance / network / rendering
Fix the cause Address the root cause, not the symptom
Measure Prove the result with before/after evidence
Verify AI Draft → verify-against-the-instruments → log

Learning Outcomes

By the end you will be able to:

  • Drive the browser's developer tools as investigation instruments.
  • Explain the critical rendering path and read a Network waterfall and load metrics.
  • Debug DOM/event/form bugs and repair responsive layouts from box-model evidence.
  • Reason about the JavaScript runtime (types, scope, closures, this) and write modern ES6+.
  • Explain the single-threaded event loop and convert callbacks to async/await without freezing the UI.
  • Choose data structures and algorithms that scale, and prove improvements by measurement.
  • Read HTTP exchanges, design RESTful calls, and trace the network journey from URL to first byte.
  • Explain the rendering pipeline and eliminate jank.
  • Integrate all of the above into an evidence-based diagnosis of a real web app.

Lesson Index

# Lesson Competency Ticket
0 Welcome to the Frontend Engineering Team Environment & Developer Tools WEB-1000
1 Investigate How a Website Loads Page Load & the Critical Rendering Path WEB-1010
2 Debug a Broken Login Form DOM, Events & Forms DOM-2001
3 Repair a Broken Layout CSS Layout CSS-2010
4 Investigate the JavaScript Runtime Runtime Fundamentals JS-3001
5 Modernize the Codebase Modern JavaScript (ES6+) JS-3015
6 The Website Freezes Async JavaScript & the Event Loop JS-3030
7 Optimize Customer Data Data Structures PERF-4001
8 The Search Is Too Slow Algorithms & Complexity PERF-4015
9 Investigate the Network HTTP & REST NET-5001
10 The Website Cannot Be Found Networking Fundamentals (DNS/TCP/IP) NET-5015
11 Investigate the Browser Rendering Engine Browser Rendering Engine RENDER-6001
12 Project Forge Web Diagnostics Capstone Integrated Web Diagnostics FORGE-9100

The module flows through phases: Platform & Page Load (0–1) → Document & Presentation (2–3) → The JavaScript Language (4–6) → Performance: Data & Algorithms (7–8) → The Network (9–10) → Rendering (11) → Capstone (12).

Repository Layout

.
├── README.md                      # this file
├── MODULE_SYLLABUS.md             # pacing, structure, deliverables
├── LEARNER_GUIDE.md               # how to operate as a frontend engineer here
├── INSTRUCTOR_GUIDE.md            # facilitation and assessment
├── COMPETENCY_MATRIX.md           # lesson → competency → skills
├── ASSESSMENT_RUBRIC.md           # grading weights and performance levels
├── dashboard.html                 # interactive progress dashboard (open in a browser)
├── Lesson_00.md … Lesson_12.md    # the 13 lessons
├── labs/                          # hands-on labs (Node generators + browser pages)
├── solutions/                     # worked solutions / answer keys
├── resources/                     # DevTools, runtime, async, perf, HTTP, networking, rendering guides + templates
├── assignments/                   # submission templates + capstone brief
└── instructor-notes/              # per-lesson facilitation notes

Getting Started

  1. Read resources/devtools-guide.md and get a browser+DevTools, Node, an editor, and a local static server working (Lesson 0 / labs/lab-00-environment.md).
  2. Start your engineering notebook from resources/engineering-notebook-template.md.
  3. Open dashboard.html in your browser to track progress through the lessons and phases.
  4. Open Lesson_00.md and pick up your first ticket. Keep resources/debugging-playbook.md and the cheatsheets open as you work.

Always serve pages over http://localhost, not file:// — modules, fetch, and many browser APIs require it (npx serve . or python3 -m http.server 8000). The Node labs run anywhere node does.