Course Contract · L3 LPECMN — Fall 2026
The course contract for the 18-hour JavaScript full-stack web development course: prerequisites, the one-app spine, the review-layer capstone, the 6-session schedule, the 10/60/30 assessment, and the 1-month home stretch. Consult this reference document throughout the course.
→The Course, the One App, and the Spine
Orientation for the course: we anchor everything to a single working full-stack app, `fullstack-minimal-app` — a React + Vite + Tailwind frontend, a Node.js/Express REST backend, and a MySQL database. The 18-hour spine is understand → extend layer-by-layer → capstone (the review layer); a compact web-architecture refresher and a Docker Compose / devcontainer environment round out the session.
→The generate → verify → integrate → commit loop for AI-assisted development
A hands-on introduction to AI-assisted full-stack development. You will set up an AI assistant — any editor-based or chat tool you prefer — learn the CRISP prompting framework, and run every change through one uniform loop — Concept → AI generates → You verify → You integrate (checkpoint + git commit) — demonstrated on a review-card example built beside the real fullstack-minimal-app. The session also covers agentic AI and the harnesses that run it (Claude Code, OpenCode, GitHub Copilot agents), and states our stance: S0–S2 fundamentals are built by hand, and agents are deferred to an optional accelerator from S3 onward.
→Deep Dive into AI-Assisted Development (Optional)
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→Produce a static review card (HTML/CSS) and ship it in one commit
Your first hands-on in the course. You create a small static mini-project (HTML + CSS, no framework, no programming language), then you run the uniform generate → verify → integrate → commit loop exactly once: you ask a chat assistant (a CRISP prompt) to produce a small styled review card, you verify the rendering in the browser, you integrate it into your files, and you commit it. The deliverable is the card rendering correctly and a clean commit.
→Semantic HTML, the Box Model, Flexbox, Grid & Responsive — the static foundation
The static foundation of the presentation layer. You refresh semantic HTML (document structure, landmarks, text, lists, links, images, tables, forms, SEO, accessibility) and CSS fundamentals (the box model, selectors, the cascade and specificity, Flexbox, Grid, responsive / mobile-first). Every example builds one artifact: a fully static review card — one featured card laid out with Flexbox and a responsive grid of review cards in CSS Grid — in plain HTML and CSS. No scripting, no framework. The app's real styling approach (Tailwind 3.4) is referenced throughout.
→A static review card in semantic HTML + CSS, prompted with CRISP in an AI chat
Build the static review card — the S1 milestone of the WebLang capstone — as a 100% static page (semantic HTML + CSS, no JS, no framework): one featured review card laid out with Flexbox and a responsive grid of review cards (CSS Grid, mobile-first). You drive a chat assistant with the CRISP prompting pattern to generate and understand the CSS; you are the quality gate: you write the code, you verify it in the browser, and you iterate. The app's real styling approach — Tailwind 3.4 utility classes — is referenced throughout.
→Optional Deep Dive Material for Session 2 (Optional)
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→The async + data foundation that turns a static card into a live app
You built a static review card in Session 1. This session hands you the JavaScript that makes it *live*: modern JS in practice, async/await + Promises + fetch, and a clear answer to *why React exists* — so you can walk into Session 3 (a React component fed with sample data) with confidence.
→Vanilla JS + fetch of local JSON review data, AI-assisted (Session 2)
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→Building the Multi-Source Review Aggregator UI in React
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→Convert the vanilla-JS review list into sample-data-fed React review components, ready for the backend (Session 3)
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→The Product Catalog REST API — and the Review Routes that Extend It
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows. This session takes you from the React frontend (Session 3) to the backend that powers it: the Express product‑catalog REST API, the MySQL data layer, and the review routes that turn a plain catalog into a multi‑source review aggregator.
→Build the review routes on an in-memory store (Session 4)
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→Swap the in-memory store for a MySQL reviews table (Session 5)
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→Full-Stack Web Application Project
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.
→Make the review routes persistent with MySQL (Session 5)
Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.