Courses built from the ground up.
Web Development Learning Path
A project-based sequence for building modern web development capability from foundational browser skills through backend development, modern interface architecture, testing, deployment, and AI-assisted development.
Four phases · eight months
Each course pairs core competencies with a practical deliverable so that
learning produces something tangible.
Foundational Literacy & The Client Canvas
Build strong browser-native fundamentals before adding frameworks and production tooling.
01Semantic HTML5 & Accessibility
Course overview
The web’s foundational structure dictates both search engine visibility and assistive technology usability. Move beyond generic div-heavy markup toward intentional, machine-readable documents that meet WCAG 2.2 expectations from the start.
Core competencies
Page landmarks, heading hierarchy, accessible form controls, keyboard navigation, focus management, and knowing when native HTML should be used instead of custom ARIA.
Practical deliverable
Build a multi-step checkout form and content layout fully operable by screen reader and keyboard, with a perfect automated accessibility audit score before styling.
02Modern CSS Layouts & Responsive Systems
Course overview
Develop fluid layout systems that adapt smoothly across viewport and device constraints without relying on heavy interface frameworks for basic layout.
Core competencies
Flexbox, CSS Grid, container queries, rem and ch units, clamp(), custom properties, and mobile-first media query architecture.
Practical deliverable
Recreate a responsive editorial layout with dynamic hero sections, sticky sidebars, and fluid card grids that scale from mobile to ultrawide screens without horizontal overflow.
03Modern Vanilla JavaScript (ES6+)
Course overview
Master the browser’s native scripting engine before relying on frameworks, with emphasis on execution context, data manipulation, asynchronous behavior, and the Document Object Model.
Core competencies
let and const, closures, map/filter/reduce, event bubbling and delegation, DOM traversal and mutation, ES Modules, Promises, and async/await.
Practical deliverable
Build an interactive client-side application such as a Kanban board or habit tracker using native JavaScript, localStorage persistence, and dynamic drag-and-drop or modal interactions.
04Git, Terminal & Local Environment Fundamentals
Course overview
Build command-line confidence and disciplined version-control habits for professional engineering workflows.
Core competencies
Command-line navigation, file manipulation, repository initialization, staged versus working changes, meaningful commits, branching, SSH remotes, and GitHub repository management.
Practical deliverable
Configure a developer environment from scratch and manage a local project through multiple feature branches, merges, and remote pushes.
05Browser DevTools & Runtime Debugging
Course overview
Treat debugging as a core engineering skill and use browser developer tools as an interactive diagnostic suite rather than relying only on console output.
Core competencies
Element and style mutation, box-model debugging, breakpoints, call-stack stepping, Network tab analysis, request inspection, latency/waterfalls, and rendering diagnostics.
Practical deliverable
Diagnose and repair a deliberately broken demo site containing CSS cascade conflicts, an infinite JavaScript loop, and failed asset requests using DevTools alone.
Relational Data, Backend Basics & PHP
Move from browser-only development into persistent data, server-side processing, security, and practical application architecture.
06Relational Database Modeling & SQL (MySQL)
Course overview
Develop a durable understanding of persistent data storage, schema design, relational structure, and clean querying.
Core competencies
Relational theory, data types, table creation, primary and foreign keys, one-to-one, one-to-many and many-to-many relationships, indexing, SELECT, WHERE, JOIN, GROUP BY, HAVING, and transactions.
Practical deliverable
Design and implement a normalized multi-table e-commerce inventory schema with products, categories, customers, order history, and referential integrity constraints.
07Modern Server-Side Scripting with PHP 8+
Course overview
Explore how servers process requests, interface with databases, and return rendered responses using modern PHP practices.
Core competencies
Strict typing, functions, object-oriented programming, interfaces, inheritance, namespaces, superglobals, Composer, and Model-View-Controller fundamentals.
Practical deliverable
Build a basic custom MVC application such as a content directory or booking system with routing, controllers, and view templates on a local server.
08Database & Web Security Hygiene (OWASP Fundamentals)
Course overview
Practice defensive programming by preventing common vulnerabilities in dynamic web applications.
Core competencies
Prepared statements with PDO, SQL injection prevention, XSS output encoding, CSRF tokens, secure sessions, HTTP-only cookies, and password hashing with bcrypt or Argon2.
Practical deliverable
Audit and patch an insecure legacy PHP/MySQL login and comments application, remediating exploitable SQL injection and reflected or stored XSS vulnerabilities.
09Practical Agency & CMS Architecture
Course overview
Bridge raw coding skills into real-world business application ecosystems using custom WordPress engineering or introductory Laravel.
Core competencies
Template hierarchy, loops, hooks, custom post types and fields, Gutenberg blocks/templates, or Laravel routing, Blade templating, and Eloquent ORM basics.
Practical deliverable
Build a lightweight custom WordPress theme without third-party page builders, registering custom post types and cleanly rendering structured data.
Modern UI Architecture & Type Safety
Shift from browser fundamentals toward scalable component systems, typed code, external data, and design-system implementation.
10Applied TypeScript for Web Development
Course overview
Use types as documentation and compile-time safeguards to reduce runtime errors and make code more predictable.
Core competencies
Primitive and object typing, interfaces, type aliases, unions, intersections, literals, generics, third-party library typing, and tsconfig configuration without falling back on any.
Practical deliverable
Refactor a dynamic JavaScript utility library into strict TypeScript with no type-checker warnings or bypasses.
11Modern Component Frameworks
Course overview
Learn how modern frameworks structure large interfaces through declarative components, state lifecycles, and controlled rendering updates.
Core competencies
Component composition, properties, controlled and uncontrolled inputs, state lifting, unidirectional data flow, side effects, custom hooks or composables, and render-performance awareness.
Practical deliverable
Build a multi-view dashboard with global filtering, URL-synced search parameters, and dynamic modal interactions using React, Next.js, or Vue.
12API Integration, State & Asynchronous Data Fetching
Course overview
Connect client applications to backend services while handling loading, errors, mutations, and unpredictable network conditions gracefully.
Core competencies
REST principles, HTTP status codes, loading/error/success states, optimistic updates, mutations, CORS troubleshooting, caching, and background refetching.
Practical deliverable
Build an application consuming a public API with loading skeletons, comprehensive error handling, and offline retry behavior.
13Design System Translation & Figma Workflow
Course overview
Strengthen the handoff between design and engineering by translating visual systems into robust implementation details.
Core competencies
Design tokens, typography and spacing scales, translating auto-layout to CSS, vector export, and handling edge states such as overflow, missing images, and broken media.
Practical deliverable
Translate a multi-page Figma design system into a reusable component library for buttons, inputs, cards, and dialogs using exact design tokens.
Production Quality, Testing & Deployment
Develop the practices that turn working code into reliable, reviewable, deployable software.
14Automated Testing: Unit & Integration
Course overview
Use automated verification so new features can be added with confidence instead of relying only on repeated manual browser testing.
Core competencies
Test-driven fundamentals, unit tests for pure functions, API mocking, and component-level integration testing that mirrors realistic user behavior.
Practical deliverable
Write a test suite for a cart-and-checkout workflow covering discount logic, item addition, invalid coupons, and out-of-stock behavior.
15Modern Build Tooling & Bundlers
Course overview
Understand the production pipeline that turns development source code into optimized browser-ready assets.
Core competencies
npm and pnpm, dependencies versus devDependencies, lockfiles, Vite or Turbopack, transpilation, minification, tree-shaking, linting, formatting, and vulnerability checks.
Practical deliverable
Set up a clean production-ready build environment from an empty directory without relying on a starter boilerplate.
16CI/CD, Secrets Management & Cloud Deployment
Course overview
Automate validation and deployment so applications move reliably from development into production environments.
Core competencies
Cloud deployment, environment variables, public versus private secrets, and GitHub Actions workflows that block merges when builds or tests fail.
Practical deliverable
Create a GitHub Actions pipeline that runs linting, type checks, and tests on pull requests, then produces preview and production deployments.
17Collaborative Git, Code Reviews & Team Workflows
Course overview
Practice the communication and version-control habits needed to work productively in shared repositories.
Core competencies
Branching strategies, interactive rebasing, merge-conflict resolution, structured commit history, and well-documented pull requests with context and reproduction steps.
Practical deliverable
Participate in a simulated sprint with multi-commit pull requests, peer review, and deliberately induced multi-file merge conflicts.
18Pragmatic AI Tooling & Assisted Development
Course overview
Use AI coding assistants productively while maintaining human responsibility for security, maintainability, performance, and system design.
Core competencies
AI-assisted boilerplate, regex and test scaffolding, reviewing generated code for security and outdated APIs, detecting performance issues, and recognizing limits in AI-supported system design.
Practical deliverable
Build a feature with an AI pair-programming assistant, document prompt iterations and weak suggestions, and show how human review improved the final implementation.