Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sadanandpai/frontend-learning-kit
Frontend tech guide and curated collection of frontend materials
https://github.com/sadanandpai/frontend-learning-kit
angular css frontend interview interview-preparation javascript react reactjs vuejs webdev webdevelopment
Last synced: 29 days ago
JSON representation
Frontend tech guide and curated collection of frontend materials
- Host: GitHub
- URL: https://github.com/sadanandpai/frontend-learning-kit
- Owner: sadanandpai
- License: mit
- Created: 2021-06-05T04:17:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T16:24:05.000Z (9 months ago)
- Last Synced: 2024-04-13T21:57:18.782Z (7 months ago)
- Topics: angular, css, frontend, interview, interview-preparation, javascript, react, reactjs, vuejs, webdev, webdevelopment
- Homepage:
- Size: 9.23 MB
- Stars: 4,078
- Watchers: 80
- Forks: 805
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-hacktoberfest - Frontend Learning Kit
README
Frontend Learning Kit
Frontend tech guide and curated collection of frontend materials
2024 Frontend Dev Roadmap & checklist
Frontend Role Guide to know about different frontend roles and their criterion
Frontend Interview Guide to know about different frontend interview rounds
Frontend projects for Practice & interviews (beginners to intermediates)
FAQs to clarify common doubts---
> [!NOTE]
> Ace your Frontend UI coding interview rounds with [Frontend Mini Challenges](https://github.com/sadanandpai/frontend-mini-challenges) for free
## Frontend resources/materials
Roadmaps
- 📍 [Road Map (Beginner Version)](https://roadmap.sh/frontend?r=frontend-beginner)
- 📍 [Road Map (Advanced Version)](https://roadmap.sh/frontend)
HTML
- 📗 [MDN HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
- 📗 [W3 Schools](https://www.w3schools.com/html/)
- 📗 [HTML Tutorial](https://www.scaler.com/topics/html/)
- 🎥 [Complete Guide to HTML](https://www.udemy.com/course/the-complete-guide-to-html/)
CSS
- 📗 [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- 📗 [Web Dev](https://web.dev/learn/css/)
- 🎥 [CSS Complete Guide - Udemy](https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/)
- 📘 [CSS for JS developers](https://css-for-js.dev/)
Advanced CSS
- 📘 [Debugging CSS](https://debuggingcss.com/)
- 🎥 [CSS Demystified](https://cssdemystified.com/)
- 🎥 [Advanced CSS](https://www.udemy.com/course/advanced-css-and-sass/)
JavaScript
- 📗 [Eloquent JavaScript](https://eloquentjavascript.net/)
- 📗 [JavaScript Info](https://javascript.info/)
- 📗 [MDN JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- 📗 [JavaScript Tutorial](https://www.javascripttutorial.net/)
- 📘 [JavaScript for Impatient Programmers](https://exploringjs.com/impatient-js/toc.html)
- 📘 [Just Javascript](https://justjavascript.com/)
- 🎥 [Complete JavaScript](https://www.udemy.com/course/the-complete-javascript-course/)
- 🎥 [Javascript Complete Guide](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/)
Advanced JavaScript
- 📗 [You don't know JS](https://github.com/getify/You-Dont-Know-JS)
- 📗 [Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition)
- 📘 [Deep JavaScript](https://exploringjs.com/deep-js/toc.html)
- 📘 [Professional JavaScript for Web developers](https://www.oreilly.com/library/view/professional-javascript-for/9781119366447/)
- 🎥 [Deep JavaScript Foundations](https://frontendmasters.com/courses/deep-javascript-v3/)
- 🎥 [JavaScript Hard Parts](https://frontendmasters.com/courses/javascript-hard-parts-v2/)
- 🎥 [JavaScript: Understanding the Weird Parts](https://www.udemy.com/course/understand-javascript/)
TypeScript
- 📗 [TypeScript Deepdive](https://basarat.gitbook.io/typescript/)
- 📗 [Tackling TypeScript](https://exploringjs.com/tackling-ts/index.html)
- 📗 [TypeScript Tutorial](https://www.typescripttutorial.net/)
- 📗 [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
- 📘 [Programming TypeScript](https://www.oreilly.com/library/view/programming-typescript/9781492037644/)
- 🎥 [Understanding typescript](https://www.udemy.com/course/understanding-typescript/)
- 🎥 [TypeScript Course by ui.dev](https://ui.dev/typescript/)
React
- 📗 [React Dev](https://react.dev/)
- 🎥 [React - The Complete Guide](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)
- 🎥 [Ultimate React](https://www.udemy.com/course/the-ultimate-react-course/)
- 🎥 [Joy of React](https://www.joyofreact.com/)
- 🎥 [Scrimba - Learn React for free interactively](https://scrimba.com/learn/learnreact)
React Repos
- 📁 [React TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react)
- 📁 [Entire React code base explanation by visual block](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS)
- 📁 [Bulletproof React](https://github.com/alan2207/bulletproof-react)
Other frameworks
- 🎥 [NextJS](https://www.udemy.com/course/nextjs-react-the-complete-guide/)
- 🎥 [Angular](https://www.udemy.com/course/the-complete-guide-to-angular-2/)
- 🎥 [Vue:Complete guide](https://www.udemy.com/course/vuejs-2-the-complete-guide/)
- 🎥 [Sveltejs: Complete Guide](https://www.udemy.com/course/sveltejs-the-complete-guide/)
GraphQL
- 🎥 [Apollo GraphQL](https://www.apollographql.com/tutorials/browse?certifications=apollo-graph-associate)
- 🎥 [GraphQL Course for Beginners](https://www.youtube.com/watch?v=5199E50O7SI)
HTTP
- 📗 [MDN HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
- 📘 [HTTP2 in Action](https://livebook.manning.com/book/http2-in-action/about-this-book/)
Git
- 📗 [Become a git guru](https://www.atlassian.com/git/tutorials)
- 📗 [Pro Git](https://git-scm.com/book/en/v2)
- 📗 [Git Explorer](https://gitexplorer.com/)
- 📁 [Practical Git Guide](https://github.com/sadanandpai/git-guide)
Web Performance
- 📗 [MDN Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance)
- 📗 [Web Dev Performance](https://web.dev/learn/#performance)
- 📗 [Google Dev - Performance](https://developers.google.com/web/fundamentals/performance/get-started)
- 📗 [Smashing Magezine - Performance](https://www.smashingmagazine.com/guides/performance/)
- 🎥 [Web Performance Fundamentals](https://frontendmasters.com/courses/web-perf/)
Web Security
- 🎥 [Web Security](https://frontendmasters.com/courses/web-security/)
Accessibility
- 🎥 [Accessibility in JavaScript Applications](https://frontendmasters.com/courses/javascript-accessibility/)
- 🎥 [Develop Accessible Web Apps with React](https://egghead.io/courses/develop-accessible-web-apps-with-react)
JS Design Patterns
- 📗 [Modern Web App Design Patterns](https://www.patterns.dev/)
- 📘 [JS Design Patterns](https://patterns.addy.ie/)
- 📁 [Design Patterns for Humans](https://github.com/kamranahmedse/design-patterns-for-humans)
JS Best practices
- 📘 [Refactoring JavaScript](https://refactoringjs.com/files/refactoring-javascript.pdf)
- 🎥 [Writing Clean Code](https://www.udemy.com/course/writing-clean-code/)
- 🎥 [JavaScript unit testing](https://www.udemy.com/course/javascript-unit-testing-the-practical-guide/)
- 📘 [The art of unit testing](https://www.manning.com/books/the-art-of-unit-testing-third-edition)
- 🎥 [MicroFrontends](https://www.udemy.com/course/microfrontend-course)
Functional JavaScript
- 📗 [Mostly adequate Guide](https://mostly-adequate.gitbook.io/mostly-adequate-guide/)
- 📗 [Functional Light JavaScript](https://aguru.gitbooks.io/functional-light-javascript/content/)
- 🎥 [Functional JavaScript](https://frontendmasters.com/courses/functional-javascript-v3/)
Frontend youtube channels
- 🎥 [Traversy Media](https://www.youtube.com/c/TraversyMedia)
- 🎥 [Clever Programmer](https://www.youtube.com/c/CleverProgrammer)
- 🎥 [Net Ninja](https://www.youtube.com/c/TheNetNinja)
- 🎥 [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified)
- 🎥 [Academind](https://www.youtube.com/c/Academind)
- 🎥 [Dev Ed](https://www.youtube.com/c/DevEd)
- 🎥 [Kevin Powell](https://www.youtube.com/kepowob)
- 🎥 [Codevolution](https://www.youtube.com/c/Codevolution)
- 🎥 [JavaScript Mastery](https://www.youtube.com/@javascriptmastery)
- 🎥 [Code With Antonio](https://www.youtube.com/@codewithantonio)
Frontend System Design
- 📁 [Awesome Frontend System Design](https://github.com/greatfrontend/awesome-front-end-system-design)
- 📁 [Frontend System Design](https://github.com/devkodeio/frontend-system-design)
- 🎥 [Front-End Engineer](https://www.youtube.com/c/FrontEndEngineer)
- 🎥 [Designing Scalable Frontend Systems](https://www.udemy.com/course/designing-scalable-frontend-systems/)
- 🎥 [Namaste System Design](https://namastedev.com/learn/namaste-frontend-system-design)
- 🎥 [Chakde System Design](https://www.youtube.com/watch?v=sV_4pOGosnU&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU)
- 🎥 [Frontend System Design Course](https://alpha.learnersbucket.com/)
- 📗 [Frontend Geek](https://www.frontendgeek.com/frontend-interview/system-design)
Interview Prep Resources
- 📁 [Front End Interview Handbook](https://github.com/yangshun/front-end-interview-handbook)
- 📁 [JavaScript Interview Questions](https://github.com/sudheerj/javascript-interview-questions)
- 📁 [JavaScript Code Challenges](https://github.com/sadanandpai/javascript-code-challenges)
- 📁 [React Interview Questions](https://github.com/sudheerj/reactjs-interview-questions)
- 📁 [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook)
- 📁 [JavaScript Questions MCQ](https://github.com/lydiahallie/javascript-questions)
- 📁 [Frontend Mini Challenges](https://github.com/sadanandpai/frontend-mini-challenges)
- 📁 [FreeCodeCamp Interview Prep](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/curriculum/challenges/english/10-coding-interview-prep)
- 📗 [Interview Ant](https://www.interviewant.com/)
- 📁 [The DOM Challenge](https://github.com/devkodeio/the-dom-challenge)
Interview Prep channels
- 🎥 [Namaste JavaScript](https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP)
- 🎥 [Devtools Tech Frontend Interview Series](https://www.youtube.com/watch?v=qMkUziVZvzs&list=PL4ruoTJ8LTT96O258zzjRwdiNxzDoas-G&index=2)
- 🎥 [RoadsideCoder](https://www.youtube.com/@RoadsideCoder)
- 🎥 [JS Cafe](https://www.youtube.com/@js_cafe)
- 🎥 [Uncommon Geeks](https://www.youtube.com/watch?v=qcixpy3HQ9s&list=PLmcRO0ZwQv4QMslGJQg7N8AzaHkC5pJ4t)
Coding challenges
- 🚉 [Big Frontend Dev](https://bigfrontend.dev/)
- 🚉 [Great Frontend Dev](https://www.greatfrontend.com?fpr=sadanand83)
- 🚉 [Leetcode](https://leetcode.com/problemset/javascript/)
- 🚉 [Frontend Expert](https://algoexpert.io/frontend/coding-questions)
- 🚉 [JS Challenger](https://www.jschallenger.com/)
- 🚉 [Codedamn](https://codedamn.com/problems)
- 🚉 [Devtools Tech](https://www.devtools.tech/?ref=frontend-learning-kit)
- 🚉 [Frontend Mentor](https://www.frontendmentor.io/)
- 🚉 [Exercism](https://exercism.org/tracks/javascript)
- 🚉 [Learners Bucket](https://practice.learnersbucket.com/)
- 🚉 [FrontendPro](https://www.frontendpro.dev/)
- 🚉 [Frontend Lead](https://frontendlead.com/)
- 🚉 [CSS Battle](https://cssbattle.dev/)
- 🚉 [Frontend Hire](https://www.frontendhire.com/)
- 🚉 [Clientside Dev](https://www.clientside.dev/)
- 🚉 [Frontend Churn](https://www.algochurn.com/frontend)
- 🚉 [Reacterry](https://www.reacterry.com/)
- 🚉 [Edabit](https://edabit.com/challenges)
- 🚉 [Dev Challenges](https://devchallenges.io/)
- 🚉 [Codewell](https://www.codewell.cc/)
- 🚉 [I Code This](https://icodethis.com/)
- 🚉 [Mister DA](https://www.misterda.com/javascript-exercises)
- 🚉 [React Challenges](https://reactchallenges.live/)
- 🚉 [Daily React Problems](https://dailyreactproblem.vercel.app/)
- 🚉 [Prepare Frontend](https://preparefrontend.com/)---
DSA resources
- 📘 [Grokking Algorithms](https://www.manning.com/books/grokking-algorithms)
- 📘 [The Algorithm Design Manual](https://www.amazon.com/gp/product/3030542556/)
- 📘 [Cracking Coding Interview](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850)
- 📁 [Javascript Algo](https://github.com/trekhleb/javascript-algorithms)
- 📗 [DSA Interview Challenges](https://dsa-interview-challenges.vercel.app/)
- 🎥 [Practical Algorithms](https://frontendmasters.com/courses/practical-algorithms/)
- 🎥 [JavaScript Algorithms fundamentals](https://pro.academind.com/p/javascript-algorithms-the-fundamentals)
- 🎥 [JS algorithms and data structures masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/)
DSA youtube
- 🎥 [Adbul Bari](https://www.youtube.com/watch?v=0IAPZzGSbME&list=PLDN4rrl48XKpZkf03iYFl-O29szjTrs_O)
- 🎥 [Take U Forward](https://www.youtube.com/@takeUforward/)
- 🎥 [JavaScript Algorithms and Data Structures](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjPxNAKvZpdnsr41E0fCMMP)
- 🎥 [Jenny's Lectures](https://www.youtube.com/watch?v=AT14lCXuMKI&list=PLdo5W4Nhv31bbKJzrsKfMpo_grxuLl8LU)
- 🎥 [Gaurav Sen](https://www.youtube.com/channel/UCRPMAqdtSgd0Ipeef7iFsKw)
- 🎥 [Tushar Roy - Coding Made Simple](https://www.youtube.com/channel/UCZLJf_R2sWyUtXSKiKlyvAw)
Coding platforms
- 🚉 [Leetcode](https://leetcode.com/)
- 🚉 [Hackerrank](https://www.hackerrank.com/)
- 🚉 [Interviewbit](https://www.interviewbit.com/practice/)
Additional Resources
- 🎙 [JS Party podcast](https://jsparty.fm/)
- 📗 [JavaScript 30](https://javascript30.com/)
- 📗 [React Basics](https://learning-zone.github.io/react-basics/)
- 📗 [FreeCodeCamp React Challange](https://www.freecodecamp.org/learn/front-end-development-libraries/react/)
- 📗 [React Coding Challange](https://github.com/alexgurr/react-coding-challenges/)
- 📗 [React by Example](https://reactbyexample.github.io/)
- 📗 [React Cheatsheet](https://devhints.io/react)
- 📗 [React Patterns](https://reactpatterns.com/)
- 📗 [Tao Of React](https://alexkondov.com/tao-of-react/)
- 📗 [MDN - Front-end Web Dev pathway](https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer)
- 📗 [The React Handbook](https://reacthandbook.com/)
- 📗 [Vue CheatSheet](https://vue-cheatsheet.themeselection.com/)
---
### License
This repository is MIT licensed. [Read more](./LICENSE)