Frontend Learning Kit

Frontend tech guide and curated collection of frontend materials

[!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

🗺️ Roadmaps

• 📍  Road Map - Comprehensive visual guide to frontend paths

🧱 HTML

• 📗  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

🎨 CSS

• 📗  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

✨ Advanced CSS

• 📘  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

🟡 JavaScript

• 🎥  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

🧠 Advanced JavaScript

• 📗  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

• 📗  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

• 📗  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 Repositories

• 📁  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

🛠️ Frameworks & Libraries

• 🎥  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

🕸️ GraphQL

• 🎥  Apollo GraphQL - Official tutorials to master the Apollo GraphQL ecosystem
• 🎥  GraphQL Course for Beginners - A free crash course on using GraphQL APIs

🌐 HTTP & Web Standards

• 📗  MDN HTTP - Comprehensive reference for HTTP concepts and headers
• 📘  HTTP2 in Action - Practical guide to optimizing speed using HTTP/2

🌳 Git & Version Control

• 📗  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

⚡ Web Performance

• 📗  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

• 🎥  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

• 🎥  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

🧪 Frontend Testing

• 📗  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

📱 Progressive Web Apps (PWAs)

• 📗  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

📐 JS Design Patterns

• 📗  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

🧹 JS Best Practices

• 📘  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

🔧 Functional JavaScript

• 📗  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

🏗️ Frontend System Design

• 📁  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

📚 Interview Prep Resources

• 📁  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

🎬 Interview Prep Channels

• 🎥  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

📺 Frontend YouTube Channels

• 🎥  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

🏁 Coding Challenges

• 🚉  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

🛠️ Browser DevTools

• 📗  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

🔢 DSA for JS Devs

• 🎥  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

---

License

This repository is MIT-licensed. Read more