A comprehensive, hands-on learning path from HTML fundamentals to production-ready Next.js applications, testing, and deployment.
This course is designed to take you from absolute beginner to advanced web developer through a structured, practical approach. Each module builds upon the previous one, ensuring a solid foundation while introducing tasks and challenges for every lesson.
To assist in your professional transition, refer to these reference guides:
- Frontend Career & Job Search Guide: Strategies for resume writing (Google XYZ format), GitHub/LinkedIn profile optimization, freelancing, and salary negotiation.
- Frontend Developer Interview Prep Guide: 50+ interview questions, code challenges (debounce, deep clone), and system design templates.
- Developer Cheat Sheets: Quick syntax references for Git, CSS Flexbox, CSS Grid, and JavaScript Array methods.
To tie the entire curriculum together, students can choose to build one (or both) of these comprehensive projects incrementally from Module 1 to Module 26:
- Project A: DevConnect (Developer Social Hub): A social network for developers that grows from a static page into a real-time, AI-integrated Web & Mobile application.
- Project B: FitTrack (Collaborative Fitness Planner): A physical training logging dashboard featuring offline access (PWA), 3D body models (Three.js), and AI-generated coaching logs.
In addition to the longitudinal tracks, you can choose from these 20 standalone projects to expand your developer portfolio:
- Live Markdown Editor (Easy - HTML/CSS/JS)
- Spoonacular Recipe Discovery (Easy - React/API)
- Real-Time Chat Lounge (Medium - WebSockets/Next.js)
- Finance Tracker & Charts (Medium - React/Charts)
- Typing Speed Test (Easy - Vanilla JS)
- Kanban Tasks Board (Medium - Drag-and-Drop)
- Movie Watchlist Explorer (Easy - React/API)
- GitHub Profile Metrics (Medium - API/Charts)
- URL Shortener & Log (Medium - Next.js/SQL)
- Multi-Step Checkout Form (Medium - React/Validation)
- Glassmorphism CSS Builder (Easy - CSS variables)
- Audio Player & Visualizer (Hard - Canvas/Audio API)
- Offline Notes PWA (Hard - PWA/IndexedDB)
- Custom Storybook Components (Medium - React/Storybook)
- Type-Safe Inventory Board (Medium - TypeScript)
- Three.js Planet Simulator (Hard - WebGL/Three.js)
- AI Code Companion (Hard - AI/Streaming)
- CI/CD Build Monitor (Medium - GitHub API)
- Playwright Form Tester (Medium - Playwright)
- Mobile Todo React Native (Medium - React Native)
Master the building blocks of the web with semantic HTML5 and accessibility.
Learn to style beautiful layouts using Flexbox, Grid, variables, and animations.
Adopt a mobile-first design process to make web layouts fluid across any physical screen.
Acquire core programming fundamentals, DOM selectors, variables, functions, and loops.
Deep dive into OOP, scope, closures, design patterns, and memory profiles.
Learn async/await patterns, JSON parsing, API calls, and retry strategies.
Version your code, manage branching strategies, resolve merge conflicts, and collaborate on GitHub.
Build custom component trees utilizing JSX elements, hooks, state, and props.
Learn how to manage state (Context, Redux Toolkit, Zustand) and configure SPA routes (React Router).
Understand packaging tools, build workflows with Vite, and deploy applications to production.
Learn Jest unit test syntax and how to test React components with React Testing Library.
Build type-safe applications using interfaces, generic utility scopes, and React TS component definitions.
Develop server-side rendered (SSR) web applications using layouts, RSC boundary concepts, and dynamic caching configurations.
Synchronize server API responses seamlessly using TanStack Query queries, mutations, dynamic paging, and optimistic updates.
Fine-tune Core Web Vitals (LCP, INP, CLS) and configure frontend security boundaries (XSS, CSRF, CSP).
Mutate database resources with Server Actions, guard endpoints with middleware filters, and establish session handling with Auth.js.
Integrate bidirectional WebSockets and SSE streams, offline assets via Service Workers, and multithreading with Web Workers.
Automate browser events, mock server endpoints, and verify pixels with visual regression checks using Playwright.
Architect package sharing pipelines using Turborepo workspaces and document layout components in Storybook sandboxes.
Build clean stylesheets using Sass nesting syntax, scoped CSS Modules, and custom extended Tailwind themes.
Request granular datasets using Apollo Client queries, execute mutations, and inspect schema structures.
Call Gemini API models using the Vercel AI SDK, render chatbot conversation bubbles, and handle stream text responses.
Define automated testing processes, lint analysis check suites, and build validation hooks using GitHub Actions.
Implement smooth UI animation keyframes with Framer Motion and keyboard-navigable Dialog/Select elements with Radix UI and Shadcn/ui.
Create custom vector SVG layouts, dynamic canvas-rendered bouncing ball graphics, and fully interactive Three.js 3D rotating objects.
Build iOS and Android cross-platform mobile app layouts using native compiled primitives inside React Native.
- Initialize Workspace: Install VS Code and Node.js.
- Navigate Modules: Start from Module
01-html-fundamentalsand progress sequentially. - Complete Tasks: Each lesson includes a dedicated
Practice Taskssection at the end.