Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codingknite/frontend-development
A curated list of resources for Frontend development
https://github.com/codingknite/frontend-development
List: frontend-development
awesome-list awesome-lists css3 frontend frontend-development list lists resources web-development
Last synced: about 1 hour ago
JSON representation
A curated list of resources for Frontend development
- Host: GitHub
- URL: https://github.com/codingknite/frontend-development
- Owner: codingknite
- License: mit
- Created: 2020-10-31T07:48:38.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-04T11:02:05.000Z (9 months ago)
- Last Synced: 2024-12-06T23:01:41.809Z (7 days ago)
- Topics: awesome-list, awesome-lists, css3, frontend, frontend-development, list, lists, resources, web-development
- Homepage:
- Size: 2.02 MB
- Stars: 2,183
- Watchers: 69
- Forks: 228
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.MD
- License: LICENSE
Awesome Lists containing this project
- fucking-lists - frontend-development
- ultimate-awesome - frontend-development - A curated list of resources for Frontend development. (Other Lists / PowerShell Lists)
README
![Banner](/img/Banner.jpg 'Banner')
## Introduction
[![Follow me](https://img.shields.io/twitter/follow/codingknite.svg?style=for-the-badge)](https://twitter.com/codingknite)
This is a collection of resources for Frontend development.
Most of the resources are free but we also included paid resources.
Resources labelled with π΅ indicate that the resource is a paid resource.
If you're just starting, you DON'T need to use every resource on this list. It is practically impossible. Use this as a reference. It is not a guide.
## Contributing
We Invite as many contributions as possible.
If you know of a resource that would be a great addition to this list, feel free to make a contribution.
Be sure to read [How To Contribute](CONTRIBUTING.MD)
## Table of Contents
1. [**How The Internet Works**](#how-the-internet-works)
2. [**HTML**](#html)
3. [**CSS**](#css)
4. [**JavaScript**](#javascript)
5. [**Git**](#git)
6. [**React**](#react)
7. [**Vue**](#vue)
8. [**Browser Extensions**](#browser-extensions)
9. [**Icons**](#icons)
10. [**Fonts and Typography**](#fonts-and-typography)
11. [**Illustrations**](#illustrations)
12. [**Optimization**](#optimization)
13. [**Color Inspiration**](#color-inspiration)
14. [**Images and Videos**](#images-and-videos)
15. [**Hosting Sites**](#hosting-sites)
16. [**Design Inspiration**](#design-inspiration)
17. [**Portfolio Inspiration**](#portfolio-inspiration)
18. [**Youtube Channels**](#youtube-channels)
19. [**Podcasts**](#podcasts)
20. [**Blogs**](#blogs)
21. [**Interview Prep**](#interview-prep)
22. [**Newsletters**](#newsletters)
23. [**Contributing**](#contributing)## How the Internet Works
### Documentation
- π[How does the Internet work? β MDN](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
### Articles
- π[How does the Internet Work? β HowStuffWorks](https://computer.howstuffworks.com/internet/basics/internet.htm)
- π[How the Internet Works β Medium](https://medium.com/@User3141592/how-does-the-internet-work-edc2e22e7eb8#:~:text=It%20is%20a%20network%20that,their%20source%20to%20their%20destination.)
- π[How Does the Internet Work? β Stanford](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)### Videos
- π₯[What is the Internet KhanAcademy](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:introducing-the-internet/v/what-is-the-internet)
- π₯[The Internet: Crash Course Computer Science](https://www.youtube.com/watch?v=AEaKrq3SpW8&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=30&ab_channel=CrashCourse)
- π₯[Computer Networks: Crash Course Computer Science](https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29&ab_channel=CrashCourse)
- π₯[The World Wide Web: Crash Course Computer Science](https://www.youtube.com/watch?v=guvsH5OFizE&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=31&ab_channel=CrashCourse)[π Back To Top](#table-of-contents)
## HTML
### Documentation
- π[Structuring the web with HTML MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML)
- π[HTML Reference](https://htmlreference.io/)### Cheat Sheets
- π[OverAPI](https://overapi.com/html)
- π[HTML Cheat Sheet](https://websitesetup.org/html5-cheat-sheet/)
- π[HTML Entity Refernce](https://css-tricks.com/snippets/html/glyphs/)### Articles
- π[A simple guide to HTML elements](https://htmlhead.dev/)
### Books
- π[HTML Notes for Pros](https://goalkicker.com/HTML5Book/HTML5NotesForProfessionals.pdf)
- π[Design and Build Websites π΅](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189)
- π[Head First HTML with CSS π΅](https://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X)
- π[HTML5 Pocket Reference π΅](https://www.amazon.com/HTML5-Pocket-Reference-Comprehensive-Indispensable/dp/1449363350)### Courses
- π[HTML & CSS The Odin Project](https://www.theodinproject.com/courses/html-and-css)
- π[Introduction to HTML Scrimba](https://scrimba.com/learn/html)
- π[Introduction to Basic HTML & HTML5 FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
- π[HTML5 and CSS Fundemantals EDX](https://www.edx.org/course/html5-and-css-fundamentals)
- π[Learn HTML CodeCademy π΅](https://www.codecademy.com/learn/learn-html)
- π[Introduction to HTML and CSS Team Treehouse π΅](https://teamtreehouse.com/library/introduction-to-html-and-css)
- π[Learn HTML in Detail](https://www.scaler.com/topics/html/)
### Websites- π[HTML5 Doctor - A great reference for HTML Elements](http://html5doctor.com/)
- π[HTML-5-TUTORIAL - A Great Website for everything HTML](https://www.html-5-tutorial.com/)
- π[HTML5 Up - Responsive HTML5 and CSS3 site templates](http://html5up.net/)
- π[HTML Validator - Check if your HTML markup is valid and contains no errors.](https://validator.w3.org/)
- π[Templated - A collection of 845 free CSS & HTML5 site templates.](http://templated.co/)[π Back To Top](#table-of-contents)
## CSS
### Documentation
- π[Learn to style HTML using CSS - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
### Cheat Sheets
- π[OverAPI CSS Cheat Sheet](https://overapi.com/css)
- π[Extensive CSS Reference](https://tympanus.net/codrops/css_reference/)
- π[Getting to Know CSS](https://learn.shayhowe.com/html-css/getting-to-know-css/)### Books
- π[CSS Secrets π΅](https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635)
- π[The CSS Pocket Guide π΅](https://www.amazon.com/CSS-Pocket-Guide-Peachpit/dp/0321732278)
- π[CSS: The Definitive Guide: Third Edition π΅](https://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330)
- π[Tiny CSS Projects π΅](https://www.manning.com/books/tiny-css-projects)
- π[CSS Notes for Professionals](https://books.goalkicker.com/CSSBook/)### Courses
- π[Introduction to CSS - Scrimba](https://scrimba.com/learn/introtocss)
- π[Introduction to Basic CSS - FreeCodeCamp ](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/)
- π[Learn CSS - CodeCademyπ΅](https://www.codecademy.com/learn/learn-css)
- π[CSS Basics - Team Treehouse π΅](https://teamtreehouse.com/library/css-basics)### Frameworks and Libraries
- π[Base](https://getbase.org/)
- π[Bulma](https://bulma.io/)
- π[Bootstrap](https://getbootstrap.com/)
- π[Animate.css](https://daneden.github.io/animate.css/)
- π[Dead Simple Grid](https://github.com/mourner/dead-simple-grid)
- π[Foundation](https://foundation.zurb.com/)
- π[Materialize CSS](https://materializecss.com/)
- π[Milligram](https://milligram.io/)
- π[Mustard UI](https://mustard-ui.com/)
- π[Picnic CSS](https://picnicss.com/)
- π[Pure](https://purecss.io/)
- π[Semantic UI](https://semantic-ui.com/)
- π[Spectre](https://picturepan2.github.io/spectre/)
- π[Skeleton](http://getskeleton.com/)
- π[Tachyons](https://tachyons.io/)
- π[Tailwind CSS](https://tailwindcss.com/)
- π[Tent CSS](https://css.sitetent.com/)
- π[UI Kit](https://getuikit.com/)### Practice your CSS Skills
- π[Codepen](http://codepen.io/)
- π[CodeSandbox](https://codesandbox.io/)
- π[CSS Deck](http://cssdeck.com/)
- π[Dablet](http://dabblet.com/)
- π[JS Bin](http://jsbin.com/)
- π[JSFiddle](https://jsfiddle.net/)
- π[Liveweave](http://liveweave.com/)
- π[Plunker](http://plnkr.co/)
- π[StackBlitz](https://stackblitz.com/)### Style Guides
- π[AirBnb Style Guide - CSS](https://github.com/airbnb/css)
- π[CSS Guidelines](https://cssguidelin.es/)
- π[Google Style Guide - HTML & CSS](https://google.github.io/styleguide/htmlcssguide.html)
- [Trello CSS Guide](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80)### Websites
- π[**7 Days, 7 Websites** - Build 7 websites in 7 days](https://7days7websites.glitch.me/)
- π[**Can I use** - Up-to-date browser support tables for front-end technologies](https://caniuse.com/)
- π[**Clippy** - A tool to help use the new clip-path property](https://bennettfeely.com/clippy/)
- π[**CSSBattle** - Learn CSS through a fun code-golfing game](https://cssbattle.dev)
- π[**CSS Easing functions** - A collection of easing functions used in CSS transitions and animations.](https://easings.net/)
- π[**CSS Diner** - Learn CSS Selectors through a game](https://flukeout.github.io/)
- π[**CSS for People Who Hate CSS**](https://paulcpederson.com/articles/css-for-people-who-hate-css/)
- π[**CSS Grid Garden** - Learn CSS Grid through a game](https://cssgridgarden.com/)
- π[**CSS Layout** - A collection of popular layouts and patterns made with CSS](https://csslayout.io/)
- π[**CSS reference by Codrops** - Excellent guide on how to write better, cleaner and more reusable CSS code.](http://tympanus.net/codrops/css_reference/)
- π[**CSS-tricks** - A blog site for everything CSS](https://css-tricks.com)
- π[**Cubic Berzier Function Generator**](https://cubic-bezier.com/#.17,.67,.83,.67)
- π[**Flexbox Froggy** - Learn CSS Flexbox through a game](https://flexboxfroggy.com/)
- π[**Responsinator** - Check the responsiveness of a site across different devices.](https://www.responsinator.com/)
- π[**Responsive Grid System** - Quick flexible and easy fluid grid for easy responsive web design.](http://www.responsivegridsystem.com/)
- π[**Beautiful CSS box-shadow examples** - A curated collection of 90+ free beautiful box-shadow, click to copy.](https://getcssscan.com/css-box-shadow-examples)
- π[**Beautiful CSS buttons examples** - A curated collection of 80+ free beautiful buttons, click to copy.](https://getcssscan.com/css-buttons-examples)[π Back To Top](#table-of-contents)
## JavaScript
### Documentation
- π[JavaScript β Dynamic client-side scripting - MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript)
### Reference & Cheat Sheets
- π[JavaScript Reference - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
- π[JavaScript Cheat Sheet - OverAPI](https://overapi.com/javascript)### Courses
- π[Learn JavaScript - CodeCademy](https://www.codecademy.com/learn/introduction-to-javascript)
- π[Programming the Web with JavaScript - EDX ](https://www.edx.org/course/programming-for-the-web-with-javascript)
- π[JavaScript Algorithms and Data Structures - FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/)
- π[JavaScript Tutorial - GeekforGeeks](https://www.geeksforgeeks.org/javascript-tutorial/)
- π[JavaScript30 - Wes Bos](https://javascript30.com/)
- π[The Complete JavaScript Course - Udemyπ΅ ](https://www.udemy.com/course/the-complete-javascript-course/)
- π[Learn Javascript From Scratch - Scaler](https://www.scaler.com/topics/javascript/)### Books
- π[Eloquent JavaScript ](https://eloquentjavascript.net/)
- π[You Don't Know JavaScript ](https://github.com/getify/You-Dont-Know-JS)
- π[JavaScript Notes for Pros](https://books.goalkicker.com/JavaScriptBook/)
- π[JavaScript For Cats](http://jsforcats.com/)
- π[Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
- π[Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja)
- π[Speaking JavaScript](http://speakingjs.com/es5/index.html)
- π[JavaScripts The Good Partsπ΅](https://www.amazon.com/gp/product/0596517742/ref=as_li_ss_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0596517742&linkCode=as2&tag=eldoradohills-20)
- π[JavaScrit and JQueryπ΅](http://javascriptbook.com/)### Challenge Websites
- π[AtCoder](https://atcoder.jp/)
- π[CodeChef](https://www.codechef.com/)
- π[Coderbyte](https://coderbyte.com/)
- π[Coderbyte](https://coderbyte.com/)
- π[Codewars](https://www.codewars.com/)
- π[CodinGame](https://www.codingame.com/)
- π[CodeForces](https://codeforces.com/)
- π[DevProjects - Free real-world JavaScript projects](https://www.codementor.io/projects/javascript)
- π[Exercism](https://exercism.io/)
- π[HackerEarth](https://www.hackerearth.com/)
- π[Hackerrank](https://www.hackerrank.com/)
- π[Leetcode](https://leetcode.com/)
- π[Pramp](https://www.pramp.com/#/)
- π[Project Euler](https://projecteuler.net/)
- π[SPOJ](https://www.spoj.com/)
- π[TopCoder](https://www.topcoder.com/)### Snippets and cheatsheets
- π[A ridiculous collection of cheatsheets](https://devhints.io/)
- π[Favorite JavaScript utilities in single line of code](https://1loc.dev/)
- π[Modern JavaScript Cheatsheet](https://github.com/mbeaudru/modern-js-cheatsheet)
- π[Short JavaScript code snippets for all your development needs](https://github.com/30-seconds/30-seconds-of-code)### Style Guides
- π[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
- π[Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
- π[Standardjs](https://standardjs.com/)### Visual Studio Code Extensions
- π[**Babel JavaScript** - Syntax highlighting for today's JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)
- π[**Bracket Pair Colorizer 2** - Match brackets with same color](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
- π[**Debugger for Chrome** - Debugging tool](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
- π[**ESLint** - Code Linter](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- π[**Intellisense** - Code completion and Information](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
- π[**Live Server** - Live Web Page Reload.](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- π[**NPM** - npm support for VsCode](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)
- π[**Path Intellisense** - Auto-complete path files](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
- π[**Prettier** - Code Formatting.](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- π[**Paste JSON as Code** - Copy JSON paste as JavaScript or Typescript](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)
- π[**Quokka.js** - Prototyping playground that displays the results of an operation inside your IDE](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
- π[**REST Client** - REST Client for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
- π[**Settings Sync** - Synchronise your editor settings using Github.](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
- π[**Snippets** - Snippets for JavaScript ES6 syntax and TypeScript.](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)### Websites
- π[HTML DOM](https://htmldom.dev/)
- π[this vs that](https://thisthat.dev/)### Articles
- π[70 JavaScript Interview Questions](https://dev.to/macmacky/70-javascript-interview-questions-5gfi)
- π[10 JavaScript concepts you need to know for interviews](https://codeburst.io/10-javascript-concepts-you-need-to-know-for-interviews-136df65ecce)
- π[10 Interview QuestionsEvery JavaScript Developer Should Know ](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95)
- π[A Study Plan To Cure JavaScript Fatigue](https://www.freecodecamp.org/news/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1/)
- π[How to Manage JavaScript Fatigue ](https://auth0.com/blog/how-to-manage-javascript-fatigue/)[π Back To Top](#table-of-contents)
## Git
### Courses
- π[A Guide to Git & Version Control](https://www.educative.io/courses/guide-to-git-and-version-control/)
- π[Git Cheat Sheet](http://www.ndpsoftware.com/git-cheatsheet.html)
- π[Learn Git ](https://www.codecademy.com/learn/learn-git)
- π[Version Control (Git)](https://missing.csail.mit.edu/2020/version-control/)
- π[Version Control with Git](https://www.coursera.org/learn/version-control-with-git/)
- π[Getting Started with Git π΅](https://www.pluralsight.com/courses/getting-started-git/)### Books
- π[Pro Git](https://git-scm.com/book/en/v2)
- π[Git Notes for Professionals](https://books.goalkicker.com/GitBook/)### Tools
- π[Bitbucket](https://bitbucket.org/)
- π[Github](http://github.com/)
- π[Git Extensions for Windows](https://github.com/gitextensions/gitextensions)
- π[Sourcetree](https://www.sourcetreeapp.com/)[π Back To Top](#table-of-contents)
## React
### Documentation
- π[React Official Docs ](https://reactjs.org/docs/getting-started.html)
### Cheat Sheets
- π[React Cheatsheet](https://devhints.io/react)
### Courses
- π[The Beginner's Guide to React - Egghead](https://egghead.io/courses/the-beginner-s-guide-to-react)
- π[Introduction to React - freeCodeCamp](https://www.freecodecamp.org/learn/front-end-libraries/react/)
- π[Introduction to React - FullStackOpen](https://fullstackopen.com/en/part1)
- π[React Getting Started - Pluralsight](https://www.pluralsight.com/courses/react-js-getting-started)
- π[Learn React - Scrimba](https://scrimba.com/course/glearnreact)
- π[React for Beginners - Wes Bos](https://reactforbeginners.com/)
- π[Epic React - Kent C. Doddsπ΅ ](https://epicreact.dev/)### Books
- π[Build Your Own React](https://pomb.us/build-your-own-react/)
- π[Pure React](https://daveceddia.com/pure-react/)
- π[React Explained](https://www.ostraining.com/books/react/)
- π[Under the hood ReactJS](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/)
- π[Fullstack React π΅](https://www.newline.co/fullstack-react/)
- π[React from Zero π΅](https://www.newline.co/react-from-zero/)
- π[Road to React π΅](https://www.roadtoreact.com/)
- π[Build a Frontend Web Framework (From Scratch) π΅](https://www.manning.com/books/build-a-frontend-web-framework-from-scratch)### Project Ideas
- π[Devprojects](https://www.codementor.io/projects/reactjs)
- π[DevChallenges](https://devchallenges.io/paths/front-end-developer)### Podcasts
- π€[React Round Up](https://devchat.tv/react-round-up)
- π€[The React Podcast](https://reactpodcast.com/)### Blog Sites
- π[Official React Blog ](https://reactjs.org/blog/)
- π[Kent C. Dodds' Blog ](https://blog.kentcdodds.com/)
- π[useHooks Blog](https://usehooks.com/)### Youtube Channels
- π₯[Coding Addict](https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA)
- π₯[Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw)
- π₯[freeCodeCamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
- π₯[The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- π₯[Traversy Media](https://www.youtube.com/user/TechGuyWeb)### React Tooling
- π[ESLint](https://eslint.org/)
- π[Lodash](https://lodash.com/)
- π[npm](https://www.npmjs.com/)
- π[React Sight](http://www.reactsight.com/)
- π[React Router](https://github.com/ReactTraining/react-router)
- π[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- π[Storybook](https://storybook.js.org/)### State Management
- π[Mobx](https://mobx.js.org/README.html)
- π[Recoil](https://github.com/facebookexperimental/Recoil)
- π[Redux](https://github.com/reduxjs/redux)### UI Frameworks & Libraries
- π[Grommet](https://v2.grommet.io/components)
- π[Material UI](https://material-ui.com/)
- π[Material Kit React](https://github.com/creativetimofficial/material-kit-react)
- π[Onsen UI](https://onsen.io/react/)
- π[Reactstrap](https://reactstrap.github.io/)
- π[React Bootstrap](https://react-bootstrap.github.io/)
- π[React Toolbox (Material Design)](http://react-toolbox.io/)
- π[Rebass](https://rebassjs.org/)
- π[Semantic UI React](https://react.semantic-ui.com/)
- π[Chakra UI](https://chakra-ui.com/)### Unit Testing
- π[Enzyme](https://github.com/enzymejs/enzyme)
- π[Jest](https://jestjs.io/docs/en/tutorial-react)
- π[React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
- π[Cypress](https://www.cypress.io/)### Create React App
- π[Create React App](https://github.com/facebook/create-react-app)
- π[React Boilerplate](https://github.com/react-boilerplate/react-boilerplate)
- π[Divjoy](https://divjoy.com) π΅### CSS in JS
- π[Styled Components](https://styled-components.com/)
- π[Emotion (css in js)](https://emotion.sh/)### Remote Data Fetching
- π[Axios](https://axios-http.com/)
- π[React Query](https://react-query.tanstack.com/)
- π[swr](https://swr.vercel.app/)### Server Side Rendering
- π[Gatsby](https://www.gatsbyjs.com/)
- π[Next.js](https://nextjs.org/)### Experts on Twitter
- π±[Andrew Clark](https://twitter.com/acdlite)
- π±[Brian Vaughn](https://twitter.com/brian_d_vaughn)
- π±[Dan Abramov](https://twitter.com/dan_abramov)
- π±[Kent C. Dodds](https://twitter.com/kentcdodds)
- π±[Luna Ruan](https://twitter.com/lunaruan)
- π±[Rachel Nabors](https://twitter.com/rachelnabors)
- π±[Rick Hanlon](https://twitter.com/rickhanlonii)
- π±[Sebastian MarkbΓ₯ge](https://twitter.com/sebmarkbage)
- π±[Seth Webster](https://twitter.com/sethwebster)### Conferences
- π[ReactNext](https://react-next.com/)
- π[React Rally](http://www.reactrally.com/)
- π[ReactFest](https://reactfest.uk/)
- π[React Europe](https://www.react-europe.org/)### Community
- π[React Forum](https://discuss.reactjs.org/)
- π[Reactiflux](https://www.reactiflux.com/)
- π[Reddit](https://www.reddit.com/r/reactjs/)
- π[React Spectrum](https://spectrum.chat/react)[π Back To Top](#table-of-contents)
## Vue
### Documentation
- π[Getting started with Vue - MDN](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
- π[Vue Cheatsheet](https://devhints.io/vue)
- π[Vue Cookbook](https://vuejs.org/v2/cookbook/)
- π[Vue Docs ](https://vuejs.org/v2/guide/)### Courses
- π[Learn Vue.js - Full Course for Beginners - freeCodeCamp](https://www.freecodecamp.org/news/vue-js-full-course/)
- π[Advanced Vue.js Features from the Ground Up - Frontend Masters](https://frontendmasters.com/courses/advanced-vue/)
- π[Learn Vue 2: Step By Step - Laracasts](https://laracasts.com/series/learn-vue-2-step-by-step)
- π[Getting Started with Vue.js - Scotch](https://scotch.io/courses/getting-started-with-vuejs?ref=home-start-here)
- π[Learn Vue by Building and Deploying a CRUD App - Testdriven](https://testdriven.io/courses/learn-vue/)
- π[Become a Ninja with Vue 3 - Vue-Exercises Ninja Squad](https://vue-exercises.ninja-squad.com)
- π[Intro to Vue 2 - Vuemastery](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/)
- π[Learn Vue - VueSchoolπ΅](https://vueschool.io/)
- π[Premium Beginner to Advanced Vue Course - Vuemasteryπ΅ ](https://www.vuemastery.com/courses)### Project Ideas
- π[Free Vue Projects and Community - DevProjects](https://www.codementor.io/projects/vue)
### Books
- π[Fullstack Vue π΅](https://www.fullstack.io/vue/)
- π[Full-Stack Web Development with Vue.js and Node π΅](https://www.amazon.com/Full-Stack-Web-Development-Vue-js-Node/dp/1788831144)
- π[Large Scale Apps with Vue 3 and TypeScript π΅](http://leanpub.com/vue-typescript/c/vaYXLEFWbMi7)
- π[Mastering Vue.js π΅](https://masteringvuejs.com)
- π[The Vue Handbook π΅](https://vuehandbook.com)
- π[The Mastery Of Vue.js 2 π΅](https://leanpub.com/vuejs2)
- π[Testing Vue.js components with Jest π΅](https://leanpub.com/testingvuejscomponentswithjest)
- π[Vue.js: Understanding its Tools and Ecosystem π΅](https://www.packtpub.com/business-other/vue-js-understanding-its-tools-and-ecosystem)
- π[Vue.js 2 Design Patterns and Best Practices π΅](https://www.amazon.com/dp/178883979X)
- π[Vue: Build & Deploy π΅](https://leanpub.com/vue-book)
- π[Vue.js: Up and Running π΅](http://shop.oreilly.com/product/0636920103455.do)
- π[Vue.js in Action π΅](https://www.manning.com/books/vue-js-in-action)### Podcasts
- π€[Cynical Developer Episode 99](https://cynicaldeveloper.com/podcast/99/)
- π€[Enjoy the Vue](https://enjoythevue.io/)
- π€[JavaScript Jabber Episode 276](https://devchat.tv/js-jabber/jsj-276-vue-js-with-maximilian-schwarzmuller/)
- π€[Software Engineering Daily](http://softwareengineeringdaily.com/2015/12/29/front-end-javascript-with-evan-you/)
- π€[Syntax Episode 130](https://syntax.fm/show/130/the-vuejs-show-scott-teaches-wes)
- π€[Vue News Podcast](https://news.vuejs.org/)
- π€[Views on Vue](https://devchat.tv/views-on-vue)### Youtube Channels
- π₯[freeCodeCamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
- π₯[Traversy Media](https://www.youtube.com/user/TechGuyWeb)
- π₯[Vue NYC](https://www.youtube.com/vuenyc)
- π₯[VueConf EU](https://www.youtube.com/channel/UC9dJjbYeXjirDYYVfUD3bSw)### Tools
- π[Bit](https://github.com/teambit/bit)
- π[Bootstrap Vue](https://bootstrap-vue.js.org/)
- π[Nuxt.js](https://nuxtjs.org/)
- π[Onseen UI](https://onsen.io/vue/)
- π[Quansar Framework](http://quasar-framework.org/)
- π[Vue Dev Server](https://github.com/paulpflug/vue-dev-server)
- π[Vuex](https://vuex.vuejs.org/en/)
- π[Vue Router](https://router.vuejs.org/en/)
- π[Vue Dev Tools](https://github.com/vuejs/vue-devtools)
- π[Vue CLI](https://github.com/vuejs/vue-cli)
- π[Vuetify](https://vuetifyjs.com/en/)### Blogs
- π[Aligator.io](https://alligator.io/vuejs/)
- π[CSS-Tricks - Vue ](https://css-tricks.com/guides/vue/)
- π[The Vue Point](https://medium.com/the-vue-point)
- π[Vue.js Developers](https://vuejsdevelopers.com/)### Community
- π[Reddit](https://www.reddit.com/r/vuejs/)
- π[Vuejs Forum](https://forum.vuejs.org/)
- π[Vue Land](https://vue-land.js.org/)### Conferences
- π[Vue Conf](https://conf.vuejs.org/)
- π[Vue Conf US](http://us.vuejs.org/)
- π[Vue.js London](http://vuejs.london/)
- π[Vue.js Amsterdam](https://www.vuejs.amsterdam/)[π Back To Top](#table-of-contents)
## Browser extensions
- π[CSS Spider](https://cssspider.fresalabs.com/)
- π[Check Browsers Support π΅](https://checkbrowsers.support/)
- π[CSS Inspector π΅](https://cssinspector.com/)
- π[CSS Scan π΅](https://getcssscan.com/)[π Back To Top](#table-of-contents)
## Icons
- π[BoxIcons](https://boxicons.com/)
- π[CSS.gg](https://css.gg/)
- π[Font Awesome](https://fontawesome.com/?from=io)
- π[Flaticon](https://www.flaticon.com/home)
- π[Freepik](https://www.freepik.com/)
- π[Fontastic](http://fontastic.me/)
- π[Heroicons](https://heroicons.com/)
- π[Iconfactory](https://freeware.iconfactory.com/icons)
- π[Icons8](https://icons8.com/)
- π[Icontre](https://iconstore.co/)
- π[Iconjar](https://geticonjar.com/)
- π[IconFinder](https://www.iconfinder.com/free_icons)
- π[Iconshock](https://www.iconshock.com/free-icons/)
- π[Iconmonstr](https://iconmonstr.com/)
- π[Ionicons](https://ionicons.com/)
- π[Icomoon](https://icomoon.io/)
- π[Material Icons](https://material.io/resources/icons/)
- π[Pngtree](https://pngtree.com/free-icon)
- π[Swift Icons](https://www.swifticons.com/)
- π[UXWing](https://uxwing.com/)[π Back To Top](#table-of-contents)
## Fonts and Typography
- π[1001Fonts](https://www.1001fonts.com/)
- π[Abstract Fonts](http://www.abstractfonts.com/)
- π[Befonts](https://befonts.com/)
- π[DaFont](https://www.dafont.com/)
- π[Google Fonts](https://fonts.google.com/)
- π[FFonts](https://www.ffonts.net/)
- π[FonstSpace](https://www.fontspace.com/)
- π[FontsArena](https://fontsarena.com/)
- π[Fontsquirrel](https://www.fontsquirrel.com/)
- π[Free Script Fonts](https://www.freescriptfonts.net/)
- π[FontSpace](https://www.fontspace.com/)
- π[MyFonts](https://www.myfonts.com/)
- π[PinSpiry Fonts](https://pinspiry.com/category/free-resources/fonts/)
- π[TypeTester](https://www.typetester.org/)
- π[Typo Guide](http://www.typogui.de/)
- π[Unblast](https://unblast.com/fonts/)[π Back To Top](#table-of-contents)
## Illustrations
- π[Blob maker](https://www.blobmaker.app/)
- π[Blush](https://blush.design/)
- π[Draw Kit](https://drawkit.io/)
- π[IRA Design](https://iradesign.io/gallery/illustrations)
- π[Interfacer](https://interfacer.xyz/)
- π[Icons 8](https://icons8.com/ouch)
- π[Manypixels](https://gallery.manypixels.co/)
- π[Undraw](https://undraw.co/illustrations)[π Back To Top](#table-of-contents)
## Optimization
- π[CSS Validator](https://jigsaw.w3.org/css-validator/)
- π[Google Analytics](https://marketingplatform.google.com/about/analytics/)
- π[Nibbler](https://nibbler.silktide.com/en_US)
- π[Namecheap](https://www.namecheap.com/)
- π[Optimizilla](http://optimizilla.com/)
- π[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
- π[Sizzy](https://sizzy.co/)
- π[Usability Checklist](https://stayintech.com/info/UX)
- π[Who Is](https://who.is/)
- π[Woorank](https://www.woorank.com/)[π Back To Top](#table-of-contents)
## Color Inspiration
- π[0to255](https://www.0to255.com/)
- π[Branition Colors](https://branition.com/colors/)
- π[Coolors](https://coolors.co/)
- π[Color Hex](https://www.color-hex.com/)
- π[Color Hunt](https://colorhunt.co/)
- π[Flat UI Colors](https://flatuicolors.com/)
- π[LOL Color Palettes](https://www.webdesignrankings.com/resources/lolcolors/)
- π[Material Palette](https://www.materialpalette.com/)
- π[myColor Space](https://mycolor.space/)
- π[Paletton](http://paletton.com/)
- π[UIGradients](https://uigradients.com/#Kyoto)[π Back To Top](#table-of-contents)
## Images and Videos
- π[Burst](https://burst.shopify.com/)
- π[Coverr](http://www.coverr.co/)
- π[Canva](https://www.canva.com/photos/free/)
- π[Free Images](https://www.freeimages.com/)
- π[Flickr](https://www.flickr.com/)
- π[Gratisography](https://gratisography.com/)
- π[ISO Republic](http://isorepublic.com/)
- π[Life of Pix](https://www.lifeofpix.com/)
- π[Pexels](https://www.pexels.com/)
- π[Pixabay](https://pixabay.com/en/)
- π[Reshot](https://reshot.com/)
- π[Subtle Patterns](http://subtlepatterns.com/)
- π[Startup Stock Photos](http://startupstockphotos.com/)
- π[The Stocks](http://thestocks.im/)
- π[Unsplash](https://unsplash.com/)[π Back To Top](#table-of-contents)
## Hosting Sites
- π[Amazon Web Services](https://aws.amazon.com/)
- π[Digital Ocean](https://www.digitalocean.com/)
- π[Firebase](https://firebase.google.com/)
- π[Github](https://pages.github.com/)
- π[Netlify](https://netlify.com/)
- π[Render](https://render.com/)
- π[Vercel](https://vercel.com/)[π Back To Top](#table-of-contents)
## Design Inspiration
- π[Awwwards](https://www.awwwards.com/)
- π[Behance](https://www.behance.net/)
- π[Call To idea](http://www.calltoidea.com/)
- π[Design Inspiration](https://www.designspiration.net/)
- π[Dribble](https://dribbble.com/)
- π[From Up North](http://www.fromupnorth.com/)
- π[Land Book](http://land-book.com/)
- π[Media Queries](http://mediaqueri.es/)
- π[One Page Love](https://onepagelove.com/)
- π[Pinterest](http://pinterest.com/)
- π[Site Inspire](http://www.siteinspire.com/)
- π[Site Inspire](https://www.siteinspire.com/)
- π[Template Monster](https://www.templatemonster.com/)
- π[UI Movement](https://uimovement.com/)
- π[Webdesign Inspiration](http://webdesign-inspiration.com/)[π Back To Top](#table-of-contents)
## Portfolio Inspiration
- π[Aral Tasher](https://araltasher.com/)
- π[Brittany Chiang](https://brittanychiang.com/)
- π[Fidalgo Pedro](https://fidalgo.dev/)
- π[Jack Jeznach](http://jacekjeznach.com/)
- π[Julia Johnson](https://www.juliacodes.com/)
- π[Matt Farley](http://mattfarley.ca/)
- π[Nathan Simpson](https://nathansimpson.design/)
- π[Developer Portfolios - Github Repo](https://github.com/emmabostian/developer-portfolios)[π Back To Top](#table-of-contents)
## Youtube Channels
- π₯[Academind](https://www.youtube.com/c/Academind)
- π₯[Andy Sterkowitz](https://www.youtube.com/channel/UCZ9qFEC82qM6Pk-54Q4TVWA)
- π₯[Ben Awad](https://www.youtube.com/user/99baddawg)
- π₯[Coding Phase](https://www.youtube.com/channel/UC46wWUso9H5KPQcoL9iE3Ug)
- π₯[Clever Programmer](https://www.youtube.com/c/CleverProgrammer)
- π₯[Clement Mihailescu](https://www.youtube.com/channel/UCaO6VoaYJv4kS-TQO_M-N_g)
- π₯[Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)
- π₯[freeCodeCamp](https://www.youtube.com/c/FreeCodeCamp)
- π₯[Keep On Coding](https://www.youtube.com/channel/UCsLo154Krjwhoz8W00N8ItA)
- π₯[Programming With Mosh](https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA)
- π₯[Leon Noel](https://www.youtube.com/channel/UCGiRSHBdWuCgjgmPPz_13xw)
- π₯[The Net Ninja](https://youtube.com/c/TheNetNinja)
- π₯[Traversy Media](https://www.youtube.com/c/TraversyMedia)
- π₯[Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/)[π Back To Top](#table-of-contents)
## Podcasts
- π€[codeNewbies](https://www.codenewbie.org/podcast)
- π€[Commit Your Code](https://anchor.fm/commityourcode)
- π€[Codepen Radio](https://blog.codepen.io/radio/)
- π€[DevDiscuss](https://dev.to/devdiscuss)
- π€[freeCodeCamp](https://freecodecamp.libsyn.com/)
- π€[Frontend Happy Hour](https://frontendhappyhour.com/)
- π€[Fullstack Radio](https://fullstackradio.com/)
- π€[JavaScript Jabber](https://devchat.tv/podcasts/js-jabber/)
- π€[Ladybug Podcast](https://www.ladybug.dev/)
- π€[Modern Web](https://www.thisdot.co/modern-web)
- π€[Syntax](https://syntax.fm/)
- π€[The Changelog](https://changelog.com/)[π Back To Top](#table-of-contents)
## Blogs
- β[Codrops](https://tympanus.net/codrops/)
- β[CSS-Tricks](https://www.css-tricks.com/)
- β[Dev.to](https://dev.to/)
- β[Echo.Js](https://www.echojs.com/)
- β[freeCodeCamp](https://freecodecamp.org/news)
- β[Front End Front](https://frontendfront.com/)
- β[Frontend Focus](https://frontendfoc.us/)
- β[Hacker News](https://news.ycombinator.com/)
- β[Hackernoon](http://hackernoon.com/)
- β[Hashnode](https://hashnode.com/)
- β[Medium](https://medium.com/)
- β[Stackoverflow](http://stackoverflow.com/)
- β[SitePoint](http://www.sitepoint.com/)
- β[Smashing Magazine](https://www.smashingmagazine.com/)
- β[Scotch](https://scotch.io/)
- β[Web Designer Depot](http://www.webdesignerdepot.com/)[π Back To Top](#table-of-contents)
## Interview Prep
### Resume Templates
- π[Canva](https://www.canva.com/)
- π[Creddle](http://creddle.io/)
- π[Harvard Office Of Career Services](https://ocs.fas.harvard.edu/guide-template-library)
- π[MyPerfectResume](https://www.myperfectresume.com/)
- π[ResumeWorded](https://resumeworded.com/)
- π[Resume.io](https://resume.io/)
- π[Resume Maker](https://www.resumemaker.online/)### Resume Editing
- π[Grammarly](https://www.grammarly.com/)
- π[JobScan](https://www.jobscan.co/)
- π[SkillSyncer](https://skillsyncer.com/)
- π[Top Resume](https://www.topresume.com/)### Job Sites
- π[Angel List](https://angel.co/jobs)
- π[Arc.dev - Remote Developer Jobs](https://arc.dev/)
- π[Find Remote Jobs](https://frontendremotejobs.com/)
- π[Github Jobs](https://jobs.github.com/)
- π[JavaScript Job](https://javascriptjob.xyz/)
- π[JustRemote](https://justremote.co/remote-developer-jobs)
- π[Jobspresso](https://jobspresso.co/remote-work/)
- π[JSRemotely](https://jsremotely.com/)
- π[Jr Dev Jobs](http://jrdevjobs.com/)
- π[Mashable Job Board](https://jobs.mashable.com/)
- π[Outsourcely](https://www.outsourcely.com/)
- π[Powertofly Jobs](https://powertofly.com/jobs/?location=Remote)
- π[Producthunt Jobs](https://www.producthunt.com/jobs?categories=Engineering&remote_ok=true)
- π[React Jobs Board](https://reactjobsboard.com/c/remote-react-jobs)
- π[Remoters](https://remoters.net/jobs/)
- π[Remote Hub](https://remotehub.io/)
- π[Remote Hunt](https://remotehunt.com/remote-jobs)
- π[Remoteco](https://remote.co/remote-jobs/developer/)
- π[Stackoverflow Jobs](https://stackoverflow.com/jobs)
- π[Startupers](https://www.startupers.com/)
- π[TheRemoteWork](https://theremotework.co/)
- π[We Work Remotely](https://weworkremotely.com/remote-jobs/)
- π[Women Who Code](http://womenwhocode.com/jobs)
- π[Working Nomads](https://www.workingnomads.co/remote-development-jobs)
- π[YC Startup Jobs](https://www.workatastartup.com/)
- π[Circular](https://trycircular.com)
- π[Honeypot](https://honeypot.io)### Freelance Jobs Sites
- π[Codementor](https://www.codementor.io/)
- π[Freelancer](https://www.freelancer.com/)
- π[FlexJobs](https://www.flexjobs.com/)
- π[FreelancerMap](https://www.freelancermap.com/)
- π[Gun.io](https://www.gun.io/)
- π[Guru](https://www.guru.com/d/jobs/)
- π[People Per Hour](https://www.peopleperhour.com/)
- π[Upwork](https://www.upwork.com/)### Mock Interviews
- π[Interviewing.io](https://interviewing.io/)
- π[Pramp](https://www.pramp.com/)### Project Pair Programming
- π[Chingu](https://chingu.io/)
### Open Source
- π[Github Explore](https://github.com/explore)
- π[First Contributions](https://firstcontributions.github.io/)
- π[Good First Issue](https://goodfirstissue.dev/language/javascript)
- π[Good First Issues](https://goodfirstissues.com/)
- π[Open Source Fridays](https://opensourcefriday.com/)### YouTube Series
- π₯[Get A Job Using LinkedIn - Danny Thompson](https://www.youtube.com/playlist?list=PL54X5yR8qizsMpvTCqUIEFMeEp-chvcxk)
### Articles
- π[5 things you need to know in a programming interview](https://www.freecodecamp.org/news/the-most-important-things-you-need-to-know-for-a-programming-interview-3429ac2454b/amp/)
- π[Finding your first remote job - Joshua W. Cameau](https://joshwcomeau.com/career/remote-work-pt2/)
- π[How to Write a Developer RΓ©sumΓ© Hiring Managers Will Actually Read](https://www.freecodecamp.org/news/how-to-write-a-resume-that-works/)
- π[How to Get a Software Engineer Job at Google and Other Top Tech Companies](https://www.freecodecamp.org/news/how-to-get-a-software-engineer-job-at-google-and-other-top-tech-companies-efa235a33a6d/)
- π[How to Break Into the Tech Industryβa Guide to Job Hunting and Tech Interviews](https://haseebq.com/how-to-break-into-tech-job-hunting-and-interviews/)
- π[How To Get A Programming Job Without A Degree](https://selftaught.blog/get-programming-job-without-degree/)
- π[How to Get a Remote Developer Job and Become a Digital Nomad](https://www.codementor.io/@npostolovski/how-to-get-a-remote-developer-job-and-become-a-digital-nomad-if04nmm1s)
- π[How To Get Your First Web Developer Job: The Ultimate Guide for Junior Developers](https://careerfoundry.com/en/blog/web-development/how-to-get-your-first-web-developer-job-the-ultimate-guide-for-junior-developers/#2-where-should-i-look-for-web-development-jobs)
- π[Resources that help me land a job at FANG](https://towardsdatascience.com/these-are-all-the-resources-that-help-me-land-a-fang-job-452341dd6bed)
- π[Tips to get a job as a Developer](https://dev.to/devpato/tips-to-get-a-job-as-a-developer-4ic3)
- π[The 30-minute guide to rocking your next coding interview](https://www.freecodecamp.org/news/coding-interviews-for-dummies-5e048933b82b/amp/)
- π[Want to Know How to Get a Remote Job? I Asked 30 Remote Companies - This is What They Said](https://www.freecodecamp.org/news/how-to-get-a-remote-job/)
- π[Why I studied full-time for 8 months for a Google interview](https://www.freecodecamp.org/news/why-i-studied-full-time-for-8-months-for-a-google-interview-cc662ce9bb13/)## Newsletters
- π[CSS-Tricks](https://css-tricks.com/newsletters/)
- π[CSS Weekly](https://css-weekly.com/)
- π[FrontEnd Focus](https://frontendfoc.us/)
- π[JavaScript Weekly](https://javascriptweekly.com/)
- π[Responsive Design Weekly](https://responsivedesign.is/newsletter/)
- π[Smashing News Letter](https://www.smashingmagazine.com/the-smashing-newsletter/)[π Back To Top](#table-of-contents)
## Contributing
You're very welcome to contribute to this list.
Be sure to read [How to Contribute](CONTRIBUTING.MD) before making your contribution.
## Contributors β¨
Thanks goes to these wonderful people
Joel P. Mugalu
π π π§
Chinmay Mhatre
π π
phuoc-ng
π π
Gabe Ragland
π π
Imran Mohamed
π π
AlexNodex
π π
Arun
π π
Binyamin Aron Green
π π
Kushagra Gour
π π
Nathan Simpson
π
Monarch Wadia
π
QJ Li
π
S. M. Abdul Aziz
π
xerosic
π
Zoran Jambor
π
jenniferfu0811
π
Jonah Ssegawa
π