Career Learning Roadmaps

Structured, step-by-step career pathways designed to take you from your first line of HTML code to a confident, production-grade frontend engineer or modern web designer.

---

1. The Beginner Foundations Roadmap (30 Days)

Target: Complete novices entering web development.

[ Day 1–5: Web & HTML Foundations ]
  └── What is HTTP/DNS? Client vs Server
  └── HTML5 Skeleton (<!DOCTYPE>, html, head, body)
  └── Text tags, Headings h1–h6, Lists, Links, Images

[ Day 6–10: Forms & Basic Semantics ]
  └── Semantic structure (header, nav, main, section, footer)
  └── Accessible HTML Forms (input types, label binding, required)
  └── Accessible Tables (thead, tbody, scope="col/row")

[ Day 11–18: CSS Styling & The Box Model ]
  └── CSS Syntax, Element/Class/ID Selectors
  └── The Box Model & Universal border-box Reset
  └── Typography, Colors (HEX/RGB/HSL), Dimensions (rem, px, %)
  └── Display (block, inline, inline-block) & Positioning

[ Day 19–25: JavaScript Foundations ]
  └── Variables (const vs let) & Primitive Data Types
  └── Operators, Conditionals (if/else, switch), Loops
  └── Functions, Arrow Functions, Arrays & Objects

[ Day 26–30: The DOM & Interactivity ]
  └── Selecting DOM nodes (querySelector, querySelectorAll)
  └── textContent vs innerHTML, modifying classList
  └── Event listeners (click, submit, input) & preventDefault()
  └── Milestone: Build Project 01 (Personal Portfolio)

---

2. The Modern Web Designer Roadmap (60 Days)

Target: Designers aiming to build responsive, accessible, pixel-perfect web interfaces.

[ Stage 1: Design Tokens & Typography ]
  └── CSS Custom Properties (--vars) & Color Palette Architecture
  └── System Font Stacks, Unitless line-height, text-wrap: balance
  └── Contrast Ratios (WCAG AA 4.5:1 / AAA 7:1)

[ Stage 2: Master 1D & 2D Layouts ]
  └── Flexbox Deep Dive: Main vs Cross Axes, Space Distribution
  └── CSS Grid Deep Dive: Tracks, fr units, minmax(), auto-fit vs auto-fill
  └── Grid Template Areas for Magazine & Dashboard Layouts

[ Stage 3: Modern Fluid Responsive Systems ]
  └── Mathematical CSS: clamp(), min(), max() for fluid type & padding
  └── Container Queries (@container) for modular component adaptability
  └── Responsive Images: <picture> art-direction & <img srcset sizes>

[ Stage 4: Micro-Interactions & Motion ]
  └── GPU-accelerated Transitions (transform & opacity)
  └── Keyframe Animations (@keyframes) & Cubic-bezier curves
  └── prefers-reduced-motion media query for vestibular accessibility

[ Stage 5: Portfolio Milestones ]
  └── Milestone 1: Build Project 02 (Responsive Restaurant Website)
  └── Milestone 2: Build Project 03 (E-Commerce Product Page)

---

3. The Frontend Engineer Roadmap (90 Days)

Target: Engineers aiming for professional frontend software engineering roles.

[ Stage 1: Advanced HTML & Accessibility Standards ]
  └── WAI-ARIA Deep Dive: Landmark roles, aria-label, aria-describedby
  └── Native <dialog> Modals with focus trapping & ESC handling
  └── HTML5 Constraint Validation API (pattern, validity, checkValidity)
  └── SEO Optimization: Open Graph, Twitter Cards, Canonical URLs, JSON-LD

[ Stage 2: CSS Architecture at Scale ]
  └── The Cascade Algorithm, Specificity Calculations & Mitigation
  └── CSS Cascade Layers (@layer) to eliminate !important wars
  └── BEM (Block, Element, Modifier) & Utility-first token design

[ Stage 3: JavaScript Runtime Internals ]
  └── Execution Context, Lexical Scoping & Closures
  └── Call Stack, Hoisting & Temporal Dead Zone (TDZ)
  └── The 4 Rules of 'this' Binding (Implicit, Explicit, Arrow lexical)
  └── Functional Array Pipelines (map, filter, reduce, sort)

[ Stage 4: Asynchronous Architecture & APIs ]
  └── The Event Loop Concurrency: Call Stack, Web APIs, Microtasks vs Macrotasks
  └── Promises State Machine & Promise Combinators (all, allSettled, race, any)
  └── Production Fetch API: HTTP status checks, abort timeouts, JSON parsing
  └── Client Storage (localStorage, sessionStorage, HttpOnly cookies)

[ Stage 5: Performance, Security & Production ]
  └── Event Delegation & DocumentFragment batch DOM injection
  └── Debouncing vs Throttling execution modifiers
  └── Web Security: XSS Prevention, CORS preflight requests, CSP
  └── Milestone: Build Project 04 (SaaS Dashboard), Project 05 (Expense Tracker), Project 06 (Weather API App)