Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

README 

        
Frontend Learning Kit


Frontend tech guide and curated collection of frontend materials



  

  


  Show your support by giving a ⭐  to this repo

  



  


    

    

    

    

  







    
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)