Awesome
<h1 align="center">Frontend Learning Kit</h1> <h4 align="center">Frontend tech guide and curated collection of frontend materials</h3> <div align="center"> <img src="./public/frontend.svg" height="300px" /> <br> Show your support by giving a ⭐ to this repo <br><br> <p> <a name="stars"><img src="https://img.shields.io/github/stars/sadanandpai/frontend-learning-kit?style=for-the-badge"></a> <a name="forks"><img src="https://img.shields.io/github/forks/sadanandpai/frontend-learning-kit?logoColor=green&style=for-the-badge"></a> <a name="contributions"><img src="https://img.shields.io/github/contributors/sadanandpai/frontend-learning-kit?logoColor=green&style=for-the-badge"></a> <a name="license"><img src="https://img.shields.io/github/license/sadanandpai/frontend-learning-kit?style=for-the-badge"></a> </p> </div> <div align="center"> <h4><a href="./public/2024_FE_roadmap.pdf">2024 Frontend Dev Roadmap & checklist</a></h4> <h4><a href="./public/role-guide.md">Frontend Role Guide</a> to know about different frontend roles and their criterion</h4> <h4><a href="./public/interview-guide.md">Frontend Interview Guide</a> to know about different frontend interview rounds</h4> <h4><a href="./public/frontend_projects.pdf">Frontend projects for Practice & interviews</a> (beginners to intermediates)</h4> <h4><a href="./public/faq.md">FAQs</a> to clarify common doubts</h4> </div><br>
<br>[!NOTE]
Ace your Frontend UI coding interview rounds with Frontend Mini Challenges for free
Frontend resources/materials
<strong>Roadmaps</strong>
<br><strong>HTML</strong>
<br><strong>CSS</strong>
<br><strong>Advanced CSS</strong>
<br><strong>JavaScript</strong>
- 📗 Eloquent JavaScript
- 📗 JavaScript Info
- 📗 MDN JavaScript
- 📗 JavaScript Tutorial
- 📘 JavaScript for Impatient Programmers
- 📘 Just Javascript
- 🎥 Complete JavaScript
- 🎥 Javascript Complete Guide
<strong>Advanced JavaScript</strong>
- 📗 You don't know JS
- 📗 Secrets of the JavaScript Ninja
- 📘 Deep JavaScript
- 📘 Professional JavaScript for Web developers
- 🎥 Deep JavaScript Foundations
- 🎥 JavaScript Hard Parts
- 🎥 JavaScript: Understanding the Weird Parts
<strong>TypeScript</strong>
- 📗 TypeScript Deepdive
- 📗 Tackling TypeScript
- 📗 TypeScript Tutorial
- 📗 TypeScript Handbook
- 📘 Programming TypeScript
- 🎥 Understanding typescript
- 🎥 TypeScript Course by ui.dev
<strong>React</strong>
- 📗 React Dev
- 🎥 React - The Complete Guide
- 🎥 Ultimate React
- 🎥 Joy of React
- 🎥 Scrimba - Learn React for free interactively
<strong>React Repos</strong>
- 📁 React TypeScript Cheatsheet
- 📁 Entire React code base explanation by visual block
- 📁 Bulletproof React
<strong>Other frameworks</strong>
<br><strong>GraphQL</strong>
<br><strong>HTTP</strong>
<br><strong>Git</strong>
<br><strong>Web Performance</strong>
- 📗 MDN Performance
- 📗 Core Web Vitals
- 📗 Web Dev Performance
- 📗 Google Dev - Performance
- 📗 Smashing Magezine - Performance
- 🎥 Web Performance Fundamentals
<strong>Web Security</strong>
<br><strong>Accessibility</strong>
- 🎥 Accessibility in JavaScript Applications
- 🎥 Develop Accessible Web Apps with React
- 📗 Web Accessibility Guidelines (WCAG)
<strong>Frontend Testing</strong>
<br><strong>Progressive Web Apps (PWAs)</strong>
<br><strong>Frontend Deployment Platforms</strong>
- 📗 Netlify
- 📗 Vercel
- 📗 Firebase Hosting
- 📗 AWS Amplify
- 📗 GitHub Pages
<strong>JS Design Patterns</strong>
<br><strong>JS Best practices</strong>
<br><strong>Functional JavaScript</strong>
<br><strong>Frontend youtube channels</strong>
- 🎥 Traversy Media
- 🎥 Clever Programmer
- 🎥 Net Ninja
- 🎥 Web Dev Simplified
- 🎥 Academind
- 🎥 Dev Ed
- 🎥 Kevin Powell
- 🎥 Codevolution
- 🎥 JavaScript Mastery
- 🎥 Code With Antonio
<strong>Frontend System Design</strong>
- 📁 Awesome Frontend System Design
- 📁 Frontend System Design
- 🎥 Front-End Engineer
- 🎥 Designing Scalable Frontend Systems
- 🎥 Namaste System Design
- 🎥 Chakde System Design
- 🎥 Frontend System Design Course
- 📗 Frontend Geek
<strong>Interview Prep Resources</strong>
- 📁 Front End Interview Handbook
- 📁 JavaScript Interview Questions
- 📁 JavaScript Code Challenges
- 📁 React Interview Questions
- 📁 Tech Interview Handbook
- 📁 JavaScript Questions MCQ
- 📁 Frontend Mini Challenges
- 📁 FreeCodeCamp Interview Prep
- 📗 Interview Ant
- 📁 The DOM Challenge
<strong>Interview Prep channels</strong>
- 🎥 Namaste JavaScript
- 🎥 Devtools Tech Frontend Interview Series
- 🎥 RoadsideCoder
- 🎥 JS Cafe
- 🎥 Uncommon Geeks
<strong>Coding challenges</strong>
- 🚉 Big Frontend Dev
- 🚉 Great Frontend Dev
- 🚉 Leetcode
- 🚉 Frontend Expert
- 🚉 JS Challenger
- 🚉 Codedamn
- 🚉 Devtools Tech
- 🚉 Frontend Mentor
- 🚉 Exercism
- 🚉 Learners Bucket
- 🚉 FrontendPro
- 🚉 Frontend Lead
- 🚉 CSS Battle
- 🚉 Frontend Hire
- 🚉 Clientside Dev
- 🚉 Frontend Churn
- 🚉 Reacterry
- 🚉 Edabit
- 🚉 Dev Challenges
- 🚉 Codewell
- 🚉 ICodeThis
- 🚉 Mister DA
- 🚉 React Challenges
- 🚉 Daily React Problems
- 🚉 Prepare Frontend
<strong>DSA resources</strong>
- 📘 Grokking Algorithms
- 📘 The Algorithm Design Manual
- 📘 Cracking Coding Interview
- 📁 Javascript Algo
- 📗 DSA Interview Challenges
- 🎥 Practical Algorithms
- 🎥 JavaScript Algorithms fundamentals
- 🎥 JS algorithms and data structures masterclass
<strong>DSA youtube</strong>
- 🎥 Adbul Bari
- 🎥 Take U Forward
- 🎥 JavaScript Algorithms and Data Structures
- 🎥 Jenny's Lectures
- 🎥 Gaurav Sen
- 🎥 Tushar Roy - Coding Made Simple
<strong>Coding platforms</strong>
- 🚉 Leetcode
- 🚉 Hackerrank
- 🚉 Interviewbit
<strong>Browser DevTools</strong>
<br><strong>Additional Resources</strong>
- <br>
License
This repository is MIT licensed. Read more