Interactive Lessons
Complete build challenges and interactive quizzes to lock in core concept knowledge.
1. Your First Web Page
Understand the skeleton of a web page, learn the anatomy of HTML elements, and configure the mandatory document structure.
Start Lesson →2. Semantic HTML
Ditch generic nested containers and learn tags that define structure, optimize for accessibility, and boost search engine ranking (SEO).
Start Lesson →3. HTML Forms & Tables
Build contact forms, collect user data, and display structured information. Covers inputs, labels, validation, and table anatomy.
Start Lesson →4. CSS Foundations
Make pages look professional. Covers selectors, the box model, colors, units, typography, specificity, and live CSS playgrounds.
Start Lesson →5. CSS in Action
Display property, positioning (relative/absolute/fixed/sticky), hover effects, CSS transitions, shadows, gradients, and CSS variables.
Start Lesson →6. CSS Layout with Flexbox
The most important layout tool in CSS. Axes model, justify-content, align-items, gap, flex-wrap, item properties, and real-world patterns.
Start Lesson →7. CSS Grid
Two-dimensional layout mastery. Columns + rows simultaneously. The fr unit, repeat(), minmax(), item placement, and real-world patterns like dashboards and holy grail layouts.
Start Lesson →8. Responsive Design
Build for every screen. Viewport meta tag, mobile-first thinking, media queries, clamp() fluid typography, responsive images, and universal container patterns.
Start Lesson →9. JavaScript Foundations
Phase 3 begins. Deep dive edition: variables (let/const), 5 primitive types, string vs number trap, explicit type conversion, strict equality (===), logical operators (&&/||), if/else if decision chains, string methods, and injecting HTML into the page.
Start Lesson →10. Functions & Events
Reusable code blocks (function declarations, expressions, arrow functions), parameters & return values, scope, the call stack, addEventListener, the event object, and form handling with e.preventDefault().
Start Lesson →11. Conditionals & Logic
Control flow, strict equality (===), 8 falsy values, truthy coercion, logical operators (&&, ||, !), short-circuit evaluation, nullish coalescing (??), ternary operator, switch statements, and guard clauses.
Start Lesson →12. Arrays & Objects
Written in plain, simple English. Arrays (ordered lists, zero-based indexing, .length, push/pop), objects (keys, values, dot vs bracket notation, nesting), the array-of-objects pattern behind real APIs, and the for...of loop.
Start Lesson →Quick Reference Guides
Keep these reference documents handy during build tasks and freelance project creation.
HTML Essential Tags
A categorized guide of fundamental tags including headings, text grouping, inline elements, list configurations, and structural elements.
Open Reference Guide →HTML Forms & Tables
Cheat sheet for form elements, input types, validation attributes, and table structure. Quick reference for build tasks.
Open Reference Guide →CSS Foundations
Selectors with specificity scores, box model layers, units, color formats, typography properties, and the essential CSS reset.
Open Reference Guide →Flexbox Cheatsheet
All container and item properties, the axis rule, gap syntax, and 5 copy-paste patterns for the most common layout scenarios.
Open Reference Guide →CSS Grid Cheatsheet
Container and item properties, fr unit, repeat()/minmax(), grid line numbers, alignment, 5 copy-paste patterns, and Grid vs Flexbox decision table.
Open Reference Guide →JavaScript Foundations
Variables (let/const), primitive types, type conversion, operators, strict equality (===), logical operators, if/else branch flow, string methods, and data → template → inject DOM pattern.
Open Reference Guide →Functions & Events
Three function syntaxes, parameters vs arguments, return rules, scope, addEventListener pattern, common event types, event object properties, and form submit pattern.
Open Reference Guide →Arrays & Objects
Array creation, indexing, .length, push/pop, object keys and properties, dot vs bracket notation, nested objects, the array-of-objects pattern, and for...of looping.
Open Reference Guide →Course Materials
Global files governing your learning goals and resources in this workspace.
Mission Document
Review the primary 3-month goals, success parameters, constraints, and full-stack roadmap milestones.
Open MISSION.md →Learning Resources
A list of verified high-quality documentation, textbooks, blogs, and community forums for help.
Open RESOURCES.md →Teaching & Session Notes
The record of lessons, focus areas, and session-by-session history for reference.
Open NOTES.md →