Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/NarendraKoya999/Frontend-Resources-List

This Repository contains List of Frontend Development Interview Questions
https://github.com/NarendraKoya999/Frontend-Resources-List

List: Frontend-Resources-List

awesome awesome-list computer-science css3 es6 html5 javascript learning nodejs reactjs

Last synced: 16 days ago
JSON representation

This Repository contains List of Frontend Development Interview Questions

Awesome Lists containing this project

README

        

# 🚀 Frontend Development Learning Resources 👁‍🗨

Welcome to the world of front-end development! Whether you're just starting your journey or looking to expand your skills, this curated list of resources will help you master HTML, CSS, JavaScript, and various frontend frameworks and tools. Explore these platforms, courses, tutorials, books, YouTube channels, and more to enhance your front-end development skills.

## 📚 Online Courses and Certificates
- [Coursera Front-End Developer Professional Certificate](https://www.coursera.org/professional-certificates/meta-front-end-developer) 🎓
- [Scrimba Interactive Courses](https://scrimba.com/) 📺
- [Scaler Academy Topics](https://www.scaler.com/topics/) 🎓
- [The Odin Project Free Curriculum](https://www.theodinproject.com/paths) 🌐
- [Frontend Masters High-quality Courses](https://frontendmasters.com/) 📺
- [edX Online Courses](https://www.edx.org/) 🎓
- [Platzi Frontend Development Courses](https://platzi.com/cursos/frontend/) 🎓
- [Coursera Web Design for Everybody Specialization](https://www.coursera.org/specializations/web-design) 🎓
- [edX Front-End Web Development MicroBachelors Program](https://www.edx.org/micromasters/front-end-web-developer) 🎓

## 📖 JavaScript Learning
- [JavaScript.info Tutorial](https://javascript.info/) 📚
- [Codewars Coding Challenges](https://www.codewars.com/join?language=javascript) 🌐
- [JS Hero JavaScript Exercises](https://www.jshero.net/en/success.html) 🎮
- [30 Seconds of Code Code Snippets](https://www.30secondsofcode.org/list/p/1/) 📦
- [JS Tips JavaScript Tips](https://www.jstips.co/) 💡
- [Codecademy Interactive Learning](https://www.codecademy.com/learn/introduction-to-javascript) 📺
- [MDN Web Docs JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) 📚
- [Egghead.io JavaScript Courses](https://egghead.io/courses) 📺

## ⚛️ React.js Resources
- [React.dev Official Docs](https://react.dev/learn) 📚
- [Zero to Mastery React.js Course](https://zerotomastery.io/courses/) 🎓
- [BFE.dev Challenges](https://bigfrontend.dev/) 💪
- [Frontend Mentor Real-world Projects](https://www.frontendmentor.io/challenges?difficulties=1,2&types=free,free-plus) 🌐
- [React Training Workshops](https://reacttraining.com/workshops/) 🎓
- [React Podcast](https://reactpodcast.com/) 🎙️
- [Reactiflux Discord Community](https://www.reactiflux.com/) 💬

## 🎨 CSS and Design
- [CSS Tricks Articles and Tutorials](https://css-tricks.com/archives/) 📚
- [DevDocs Documentation](https://devdocs.io/) 📚
- [CSSBattle CSS Challenges](https://cssbattle.dev/) 💻
- [The Front End Checklist Best Practices](https://frontendchecklist.io/#section-html) 📝
- [CodePen Challenges Creative Coding](https://codepen.io/challenges) 💡
- [Awwwards Web Design Inspiration](https://www.awwwards.com/) 🏆
- [Smashing Magazine Web Design Articles](https://www.smashingmagazine.com/) 📚
- [Dribbble Design Inspiration](https://dribbble.com/) 🎨
- [UI/UX Design Daily Inspiration](https://www.uplabs.com/) 🎨

## 🔄 Version Control and Collaboration
- [Git Official Docs](https://git-scm.com/) 📚
- [GitHub Collaborative Development](https://github.com/) 💼
- [Bitbucket Version Control](https://bitbucket.org/) 💼
- [Git and GitHub Learning Lab](https://lab.github.com/) 🎓
- [GitKraken Git Client](https://www.gitkraken.com/) 📟

## 🌐 Additional Resources
- [Devchallenges Real-life Projects](https://devchallenges.io/) 💼
- [Codewell Web Development Projects](https://www.codewell.cc/) 💻
- [CodingGame Coding Challenges](https://www.codingame.com/start) 🎮
- [FrontendPro Resources and Projects](https://www.frontendpro.dev/) 💼
- [Coursera Full Stack Web Development](https://www.coursera.org/specializations/full-stack-web-development) 🎓
- [Front-End Developer Handbook](https://frontendmasters.com/books/front-end-handbook/2019/) 📚
- [Web Design Weekly Newsletter](https://web-design-weekly.com/) 📧

## 🚀 Community and Practice
- [Edabit Coding Challenges](https://edabit.com/challenges/javascript) 🎮
- [JS Challenger Practice Platform](https://www.jschallenger.com/) 🎮
- [Codementor.io Projects](https://www.codementor.io/projects/javascript) 💼
- [Frontend Mentor Challenges](https://www.frontendmentor.io/challenges) 💪
- [CodeWars JavaScript Kata](https://www.codewars.com/) 🥋
- [LeetCode Front-End Challenges](https://leetcode.com/problemset/all/?topic=front-end) 🏆

## 📦 Frameworks and Libraries
- [Node.js Official Docs](https://nodejs.org/) 📚
- [Material UI React UI Framework](https://material-ui.com/) 📚
- [SASS CSS Preprocessor](https://sass-lang.com/) 📚
- [LESS CSS Preprocessor](http://lesscss.org/) 📚
- [Bootstrap CSS Framework](https://getbootstrap.com/) 📚
- [Redux Official Docs](https://redux.js.org/) 📚
- [Webpack Module Bundler](https://webpack.js.org/) 📚
- [Gatsby.js - Blazing-Fast Static Site Generator](https://www.gatsbyjs.com/) 📚
- [Emotion - CSS in JavaScript](https://emotion.sh/docs/introduction) 📚
- [Vue.js Official Docs](https://v3.vuejs.org/) 📚
- [Angular Official Docs](https://angular.io/) 📚
- [Tailwind CSS Utility-First Framework](https://tailwindcss.com/) 📚

## 🔧 Tools and References
- [OverAPI.com Cheat Sheets](https://overapi.com/) 📚
- [web.dev Web Development Tools](https://web.dev/) 📚
- [Showcase Beautiful Websites](https://www.showwcase.com/) 🌟
- [Sitepoint Articles and Tutorials](https://www.sitepoint.com/) 📚
- [StopStalk Competitive Coding](https://www.stopstalk.com/contests) 💪
- [Studytonight Learning Platform](https://www.studytonight.com/login.php) 💻
- [CodeSandbox Online IDE](https://codesandbox.io/) 💻
- [Can I use...? Browser Support Tables](https://caniuse.com/) 📚
- [Favicon Generator](https://favicon.io/) 🎨
- [Lighthouse - Website Auditing Tool](https://developers.google.com/web/tools/lighthouse) 🕵️
- [JSONLint - JSON Validator](https://jsonlint.com/) ✅

## 🎓 Additional Learning Platforms
- [Treehouse Tech Education](https://teamtreehouse.com/) 🎓
- [freeCodeCamp Learn to Code](https://www.freecodecamp.org/) 🌟
- [Cisco Networking Academy Networking Courses](https://www.netacad.com/) 🎓
- [Programiz Tutorials and Exercises](https://www.programiz.com/) 📚
- [Exercism Practice Coding](https://exercism.org/) 🎮
- [Coursera Web Design and Development Specialization](https://www.coursera.org/specializations/web-design) 🎓
- [Udacity Front-End Web Developer Nanodegree](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd0011) 🎓
- [edX Front-End Web Development MicroBachelors Program](https://www.edx.org/micromasters/front-end-web-developer) 🎓

## 📚 Books
- [Eloquent JavaScript](https://eloquentjavascript.net/) 📚
- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) 📚
- [React Up and Running](https://learning.oreilly.com/library/view/react-up-and/9781491931793/) 📚
- [CSS Secrets](https://www.amazon.com/CSS-Secrets-Uncovering-Real-Working-Developers/dp/1449372635) 📚
- [Clean Code](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882) 📚
- [Design Patterns](https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612) 📚
- [Effective TypeScript](https://www.oreilly.com/library/view/effective-typescript/9781492053736/) 📚
- [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) 📚
- [Smashing Book 6: New Frontiers in Web Design](https://www.smashingmagazine.com/smashing-book-6/) 📚

## 🌟 Top GitHub Repositories for Frontend Development
- [awesome-react - Curated List](https://github.com/enaqx/awesome-react) 🌟
- [freeCodeCamp - Open Source Curriculum](https://github.com/freeCodeCamp/freeCodeCamp) 🌟
- [JavaScript Algorithms - Algorithms and Data Structures](https://github.com/trekhleb/javascript-algorithms) 🌟
- [Reactiflux React Resources](https://github.com/reactiflux/reactiflux.com) 🌟
- [Front-End-Checklist - Web Development Checklist](https://github.com/thedaviddias/Front-End-Checklist) 🌟

## 🎥 YouTube Channels
- [Traversy Media - Web Development](https://www.youtube.com/user/TechGuyWeb) 📺
- [The Net Ninja - Web Development](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) 📺
- [Academind - Web Development](https://www.youtube.com/c/Academind) 📺
- [Dev Ed - Web Development](https://www.youtube.com/c/DevEd) 📺
- [The Coding Train - Creative Coding](https://www.youtube.com/c/TheCodingTrain) 📺
- [DesignCourse - Design and UI/UX](https://www.youtube.com/c/DesignCourse) 📺
- [The Coding Garden with CJ - Live Coding](https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw) 📺

## 💻 Code Editors Resources
- [Visual Studio Code](https://code.visualstudio.com/) 📝
- [Sublime Text](https://www.sublimetext.com/) 📝
- [Atom](https://atom.io/) 📝
- [WebStorm](https://www.jetbrains.com/webstorm/) 📝
- [Brackets](http://brackets.io/) 📝
- [Notepad++](https://notepad-plus-plus.org/downloads/) 📝
- [Visual Studio Code Extensions (VSCode Marketplace)](https://marketplace.visualstudio.com/VSCode) 📝
- [VSCode Themes (VSCodeThemes)](https://vscodethemes.com/) 🌈

Happy learning, and may your journey in front-end development be filled with creativity and innovation!