Frontend tech guide and curated collection of frontend materials
Show your support by giving a ⭐ to this repo
Important
Explore our curated collection of AI resources and start your journey into AI Engineering with the AI Learning Kit
Become a better software engineer by working on projects that actually challenge you at CodeCrafters
💡 How to use this guide
This is a curated toolkit, not a rigid curriculum. While structured in a logical sequence, feel free to jump to any topic that fits your goals. Explore resources that match your background and learning style — one may be enough, or you might need to combine several based on your objectives.
Resource Types:
📍 Roadmap 📗 Free Text/Book 📘 Paid Text/Book 🎥 Free/Paid Video/Course 📁 Repository 🚉 Practice Platform
- 📍 Road Map - Comprehensive visual guide to frontend paths
- 📗 MDN HTML - The authoritative reference for HTML elements and attributes
- 📗 W3 Schools - Beginner-friendly, interactive HTML tutorials and examples
- 📗 HTML Tutorial - Structured lessons on HTML fundamentals
- 🎥 Complete Guide to HTML - Comprehensive course covering HTML from scratch
- 📗 MDN CSS - The official and exhaustive reference documentation for CSS
- 📗 Web Dev - An evergreen CSS course and reference by Google
- 🎥 CSS Complete Guide - Udemy - Top-rated course covering CSS, Flexbox, Grid, and Sass
- 📘 CSS for JS developers - A premium course to help JS devs master CSS deeply
- 📘 Debugging CSS - Learn how to systematically diagnose and fix CSS issues
- 🎥 CSS Demystified - A course to demystify complex CSS concepts and behaviors
- 🎥 Advanced CSS - Deep dive into advanced CSS, Sass, Flexbox, Grid, and animations
- 🎥 Complete JavaScript - One of the best-selling comprehensive JS courses
- 📗 Eloquent JavaScript - A deeply respected, free online book on JavaScript programming
- 📗 JavaScript Info - The modern JavaScript tutorial, from basics to advanced topics
- 📗 MDN JavaScript - The ultimate canonical reference documentation for JavaScript
- 📗 JavaScript Tutorial - Step-by-step tutorials to master modern JavaScript
- 📘 JavaScript for Impatient Programmers - A quick, deep guide to JS for those who already know how to code
- 📘 Just Javascript - A mental model approach to understanding JavaScript deeply by Dan Abramov
- 📗 You don't know JS - An iconic book series diving deep into core JS mechanisms
- 📗 Secrets of the JavaScript Ninja - Advanced techniques and best practices for JS mastery
- 📘 Deep JavaScript - Exploring advanced JS concepts and edge cases
- 📘 Professional JavaScript for Web developers - A comprehensive guide to building robust web applications
- 🎥 Deep JavaScript Foundations - Kyle Simpson's thorough exploration of core JS behavior
- 🎥 JavaScript Hard Parts - Master callbacks, closures, and the event loop with Will Sentance
- 🎥 JavaScript: Understanding the Weird Parts - Learn how JavaScript works under the hood
- 📗 TypeScript Deepdive - A free, open-source advanced guide to TypeScript
- 📗 Tackling TypeScript - A comprehensive book on upgrading from JavaScript to TypeScript
- 📗 TypeScript Tutorial - Step-by-step TS tutorials from basics to advanced
- 📗 TypeScript Handbook - The official starting point for learning TypeScript
- 📘 Programming TypeScript - O'Reilly's definitive guide to building complex apps with TS
- 🎥 Understanding TypeScript - A top-rated Udemy course by Maximilian Schwarzmüller
- 🎥 TypeScript Course by ui.dev - An interactive course to master TypeScript conceptually
- 🎥 Total TypeScript - The ultimate, interactive masterclass for TypeScript by Matt Pocock
- 📗 React Dev - Official, modern documentation and interactive guides for React
- 🎥 React - The Complete Guide - Max's comprehensive guide covering Hooks, Redux, Next.js
- 🎥 Ultimate React - A massive, project-based React course by Jonas Schmedtmann
- 🎥 Joy of React - Interactive, premium course to learn React visually by Josh W. Comeau
- 🎥 Scrimba - Learn React for free interactively - An excellent interactive environment for learning React basics
- 📁 React TypeScript Cheatsheet - Essential cheatsheets for migrating and using React with TypeScript
- 📁 React code base as visual block - Deep dive into React's internal architecture visually
- 📁 Bulletproof React - Scalable patterns and best practices for enterprise React apps
- 🎥 NextJS - Comprehensive course for React's most popular full-stack framework
- 🎥 Angular - Maximilian's top-rated, complete guide to Angular
- 🎥 Vue:Complete guide - Master Vue.js and the composition API
- 🎥 Sveltejs: Complete Guide - Build highly reactive, compiled frontend applications
- 🎥 Apollo GraphQL - Official tutorials to master the Apollo GraphQL ecosystem
- 🎥 GraphQL Course for Beginners - A free crash course on using GraphQL APIs
- 📗 MDN HTTP - Comprehensive reference for HTTP concepts and headers
- 📘 HTTP2 in Action - Practical guide to optimizing speed using HTTP/2
- 📗 Become a git guru - Atlassian's thorough tutorials on Git workflows
- 📗 Pro Git - The official, complete reference book for everything Git
- 📁 Practical Git Guide - A concise, practical cheat sheet and guide for Git
- 📗 MDN Performance - Mozilla's guides on measuring and improving web performance
- 📗 Web Dev Performance - Google's deep dive into core web vitals and fast loading
- 📗 Google Dev - Performance - Best practices for performant web experiences
- 📗 Smashing Magazine - Performance - Curated articles and insights on frontline performance tuning
- 🎥 Web Performance Fundamentals - Learn how to trace, audit, and fix performance bottlenecks
- 🎥 Web Security - Learn to protect your web apps from common vulnerabilities
- 📗 Google Web Fundamentals: Security - Guidelines for building safe and secure web properties
- 📗 MDN Web Docs: Security - Documentation covering web security features like CSP and CORS
- 🎥 Accessibility in JavaScript Applications - Interactive course dealing with modern a11y challenges
- 🎥 Develop Accessible Web Apps with React - Learn to build accessible components in React
- 🎥 Practical Accessibility - Fast and comprehensive course strictly focused on accessibility
- 📗 Web Accessibility Guidelines (WCAG) - The official global standard for web accessibility
- 📗 Vitest - A blazing fast unit test framework powered by Vite
- 📗 Jest Docs - Official documentation for the popular JavaScript testing framework
- 📗 Cypress - Reliable, fast end-to-end testing for browser applications
- 🎥 JavaScript unit testing - A practical guide to testing JavaScript codebases
- 📘 The art of unit testing - Essential principles for writing maintainable robust unit tests
- 📗 MDN Guide to PWAs - Build apps that offer native-like experiences on the web
- 📗 Google Developers: PWAs - Google's best practices and patterns for reliable PWAs
- 🎥 PWA - The Complete Guide - Course to convert web apps to PWAs
- 📗 Modern Web App Design Patterns - Free resource for frontend and Node.js design patterns
- 📘 JS Design Patterns - Addy Osmani's classic book on learning JS design patterns
- 📁 Design Patterns for Humans - An ultra-simplified explanation of design patterns
- 📘 Refactoring JavaScript - Techniques to turn bad code into good code safely
- 🎥 Writing Clean Code - Principles constraints, and techniques for writing clean JavaScript
- 🎥 MicroFrontends - Architecture guide to scaling frontend apps with Microfrontends
- 📗 Mostly adequate Guide - A highly acclaimed free book on functional programming in JS
- 📗 Functional Light JavaScript - Kyle Simpson's pragmatic approach to functional programming
- 🎥 Functional JavaScript - Learn compose, currying, and monads clearly
- 📁 Awesome Frontend System Design - Curated materials and resources for frontend system design
- 📁 Frontend System Design - A repository compiling essential concepts and examples
- 🎥 Front-End Engineer - YouTube channel deeply focused on frontend architecture
- 🎥 Designing Scalable Frontend Systems - Complete guide to designing large-scale frontend solutions
- 🎥 Namaste System Design - Detailed breakdown of frontend system design principles
- 🎥 Chakde System Design - High-level frontend estimations and design
- 🎥 Frontend System Design Course - Structured course by LearnersBucket for cracking design rounds
- 📗 Frontend Geek - Collection of reading materials on system design principles
- 📁 Front End Interview Handbook - Comprehensive checklist and answers to common interview questions
- 📁 JavaScript Interview Questions - 1000+ most frequently asked JS questions
- 📁 JavaScript Code Challenges - Curated set of JS algorithms and polyfills
- 📁 React Interview Questions - A massive list of React-specific interview questions
- 📁 Tech Interview Handbook - Generic SWE interview materials curated by an ex-Meta engineer
- 📁 JavaScript Questions MCQ - A long list of advanced JavaScript multiple choice questions
- 📁 Frontend Mini Challenges - Build bite-sized frontend projects to hone your UI skills
- 📁 FreeCodeCamp Interview Prep - Curated coding challenges across algorithms, JS, and more
- 📗 Interview Ant - A collaborative, flashcard-based interview prep platform
- 📁 The DOM Challenge - A repository filled with practical DOM manipulation tasks
- 📁 FrontendAtlas - Comprehensive roadmap and challenges for UI interviews
- 📗 JavaScript 30 - 30 days of building vanilla JS projects, without frameworks
- 📁 Web-Dev-For-Beginners - by Microsoft - A free, 12-week comprehensive web development curriculum
- 📁 React Coding Challenges - Series of exercises focused on testing React knowledge
- 🎥 Namaste JavaScript - Deep dive into JS core concepts, ideal for interviews
- 🎥 Devtools Tech Frontend Interview Series - Actual machine coding and problem-solving sessions
- 🎥 RoadsideCoder - Excellent mock interviews and practical react coding challenges
- 🎥 JS Cafe - In-depth breakdown of machine coding problems and JS internals
- 🎥 Uncommon Geeks - Covers frontend interview topics and system design questions
- 🎥 Traversy Media - Crash courses and practical tutorials on major web technologies
- 🎥 Net Ninja - Structured tutorial playlists for frontend frameworks
- 🎥 Web Dev Simplified - Complex web concepts broken down and simplified
- 🎥 Academind - Thorough tech tutorials by Udemy favorite Max Schwarzmüller
- 🎥 Dev Ed - Fun, design-focused frontend tutorials and animations
- 🎥 Kevin Powell - The ultimate channel for mastering all things CSS
- 🎥 Codevolution - Complete tutorial series for React, NextJS, and more
- 🎥 JavaScript Mastery - Huge project-based tutorials using modern stacks like Next.js
- 🎥 Code With Antonio - Modern full-stack clone builds and massive Next.js projects
- 🎥 Clever Programmer - High-energy clone builds and full-stack integration projects
- 🚉 Big Frontend Dev - Essential platform simulating real frontend machine coding rounds
- 🚉 Great Frontend Dev - Premium platform for comprehensive frontend interview preparation
- 🚉 Leetcode - The canonical home for testing core algorithm skills via JavaScript
- 🚉 Frontend Expert - High-quality frontend and logic questions created by AlgoExpert
- 🚉 JS Challenger - Learn JavaScript by solving coding exercises
- 🚉 Codedamn - Hands-on frontend and backend interactive practice environment
- 🚉 Devtools Tech - Highly specific frontend machine coding challenges
- 🚉 Frontend Mentor - Build functional responsive sites from professional Figma designs
- 🚉 Exercism - Mentor-guided problem solving track to master JS fundamentals
- 🚉 FrontendPro - Real-world frontend coding challenges for your portfolio
- 🚉 Frontend Lead - Curated questions heavily targeting senior UI roles
- 🚉 CSS Battle - Gamified, competitive CSS-only drawing challenges
- 🚉 Kode Karma - Practical web development problem-solving exercises
- 🚉 Namaste Dev - Practice platform to test JavaScript basics
- 🚉 Clientside Dev - Platform specifically made to test client-side application logic
- 🚉 Frontend Churn - A curated list of frontend interview assessments
- 🚉 Reacterry - Enhance your React skills through specialized challenges
- 🚉 Edabit - Bite-sized JS coding challenges spanning all difficulty levels
- 🚉 Dev Challenges - Complete web developer challenges to solve
- 🚉 ICodeThis - Daily practical web development challenges
- 🚉 Prepare Frontend - Simulated frontend challenges aligned with top tech company bars
- 🚉 Ebat Dev - Designed for developers to practice real frontend interview questions
- 📗 Chrome DevTools - Official documentation for diagnosing web pages in Chrome
- 📗 Firefox Developer Tools - Extensive tools and reference for Mozilla's Firefox browser
- 🎥 Mastering Dev Tools - Demystifies advanced browser debugging and performance profiling
- 🎥 JavaScript Algorithms fundamentals - Intro course to JS patterns and complexity analysis
- 🎥 Practical Algorithms - Engaging DSA course taught with JavaScript
- 🎥 JavaScript Algorithms & Data Structures - Codevolution's thorough ongoing playlist for JS logic
- 🎥 JS algorithms and data structures masterclass - Colt Steele's legendary mega-course for DSA on JS
- 🎥 The last algorithms course you'll need - The Primeagen's incredible fast-paced DSA course using TS
- 📗 DSA Interview Challenges - Interactive platform covering common interview DSA prompts
- 📁 Javascript Algo - The massive open-source library of algorithms implemented in JS
This repository is MIT-licensed. Read more