frontend-development/README.md

![Banner](/img/Banner.jpg 'Banner')

# Summary

This is a collection of resources for Frontend development.

It will include a table of contents in order for you to navigate to the sections that matter the most to you.

We have made an effort to include as many free resources as possible. However we also understand that there are quality resources out there that might cost you a penny but totally worth it.
We will be sure to indicate the resources that are paid.

If you're starting out with web development, you DON'T need to use every resource on this list. It is practically impossible to use all the resources listed in here.
This is just a reference with most of the resources that can help you with frontend development. Use this as a reference. It is not a guide.

Simply check out the resources and use the one that works best for you.

## Key

- Resources with 💵 indicate that the resource is a paid resource.

- Resources with ⭐ indicate learning resources I would recommended. This doesn't indicate that the unstarred resources are 'bad'. This is only meant to help absolute beginners. Check out the starred courses and choose which teaching style suits you the most. 
Again, you don't have to do all of them. Practice & building projects is the best way to learn.


## Contibuting

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

- [Summary](#summary)
  - [Key](#key)
  - [Contibuting](#contibuting)
- [Table of Contents](#table-of-contents)
- [How the Internet Works](#how-the-internet-works)
- [HTML](#html)
- [CSS](#css)
- [JavaScript](#javascript)
- [Git](#git)
- [React](#react)
- [Vue](#vue)
- [Browser extensions](#browser-extensions)
- [Icons](#icons)
- [Fonts and Typography](#fonts-and-typography)
- [Illustrations](#illustrations)
- [Optimization](#optimization)
- [Color Inspiration](#color-inspiration)
- [Images and Videos](#images-and-videos)
- [Hosting Sites](#hosting-sites)
- [Design Inspiration](#design-inspiration)
- [Portfolio Inspiration](#portfolio-inspiration)
- [Youtube Channels](#youtube-channels)
- [Podcasts](#podcasts)
- [Blogs](#blogs)
- [Interview Prep](#interview-prep)
- [Newsletters](#newsletters)
- [Contributing](#contributing)
- [Authors](#authors)

# How the Internet Works

- Documentation and Articles

  - HowStuffWorks - [How does the Internet Work?](https://computer.howstuffworks.com/internet/basics/internet.htm)
  - Medium - [How the Internet Works](https://medium.com/@User3141592/how-does-the-internet-work-edc2e22e7eb8#:~:text=It%20is%20a%20network%20that,their%20source%20to%20their%20destination.)
  - MDN - [How does the Internet work? ⭐](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
  - Stanford - [How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)

- Videos

  - KhanAcademy - [What is the Internet](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:introducing-the-internet/v/what-is-the-internet)
  - Youtube - [The Internet: Crash Course Computer Science](https://www.youtube.com/watch?v=AEaKrq3SpW8&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=30&ab_channel=CrashCourse)
  - Youtube - [Computer Networks: Crash Course Computer Science](https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29&ab_channel=CrashCourse)
  - Youtube - [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

  - Cheat Sheet - [HTML Cheat Sheet](https://websitesetup.org/html5-cheat-sheet/)
  - Cheat Sheet - [OverAPI - Links To MDN](https://overapi.com/html)
  - CSS-Tricks - [HTML Entity Refernce](https://css-tricks.com/snippets/html/glyphs/)
  - Josh Buchea - [HEAD](https://htmlhead.dev/), A free guide to HTML5 `<head>` elements
  - MDN - [HTML5 Reference ⭐](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
  - Reference - [HTML Reference](https://htmlreference.io/)
  - W3Schools - [Introduction to HTML ⭐](https://www.w3schools.com/html/html_intro.asp)

- Books

  - [Design and Build Websites 💵](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189)
  - [HTML Notes for Pros](https://goalkicker.com/HTML5Book/HTML5NotesForProfessionals.pdf)
  - [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

  - CodeCademy - [Learn HTML 💵](https://www.codecademy.com/learn/learn-html)
  - EDX - [HTML5 and CSS Fundemantals](https://www.edx.org/course/html5-and-css-fundamentals)
  - FreeCodeCamp - [Introduction to Basic HTML & HTML5 ⭐](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
  - Pluralsight - [HTML Fundamentals 💵](https://www.pluralsight.com/courses/html-fundamentals)
  - Scrimba - [Introduction to HTML](https://scrimba.com/learn/html)
  - Team Treehouse - [Introduction to HTML and CSS 💵](https://teamtreehouse.com/library/introduction-to-html-and-css)
  - The Odin Project - [HTML & CSS](https://www.theodinproject.com/courses/html-and-css)
  - Udemy - [HTML and CSS3 Course 💵](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
  - Udacity - [Intro to HTML and CSS](https://www.udacity.com/course/intro-to-html-and-css--ud001)
  - W3Schools - [HTML Tutorial ⭐](https://www.w3schools.com/html/)
  - Youtube - [HTML Full Course](https://www.youtube.com/watch?v=pQN-pnXPaVg&ab_channel=freeCodeCamp.org)

- Websites

  - [HTML5 Doctor](http://html5doctor.com/) - A great reference for HTML Elements
  - [HTML-5-TUTORIAL](https://www.html-5-tutorial.com/) - Another Great Website for everything HTML
  - [HTML5 Up](http://html5up.net/) - Responsive HTML5 and CSS3 site templates.
  - [HTML Validator](https://validator.w3.org/) - Check if your HTML markup is valid and contains no errors.
  - [Templated](http://templated.co/) - A collection of 845 free CSS & HTML5 site templates.

[👆 Back To Top](#table-of-contents)

# CSS

- Documentation

  - Cheat Sheet - [OverAPI - Links To MDN](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/)
  - MDN - [CSS ⭐](https://developer.mozilla.org/en-US/docs/Web/CSS)
  - Reference - [CSS Reference](https://cssreference.io/)

- Books

  - [CSS Secrets 💵](https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635)
  - [CSS: The Definitive Guide: Third Edition 💵](https://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330)
  - [The CSS Pocket Guide 💵](https://www.amazon.com/CSS-Pocket-Guide-Peachpit/dp/0321732278)

- Courses

  - CodeCademy - [Learn CSS 💵](https://www.codecademy.com/learn/learn-css)
  - FreeCodeCamp - [Introduction to Basic CSS ⭐](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/)
  - Scrimba - [Introduction to CSS](https://scrimba.com/learn/introtocss)
  - Team Treehouse - [CSS Basics 💵](https://teamtreehouse.com/library/css-basics)
  - W3School - [CSS Tutorial](https://www.w3schools.com/css/)

- Frameworks and Libraries

  - [Animate.css](https://daneden.github.io/animate.css/)
  - [Base](https://getbase.org/)
  - [Bootstrap](https://getbootstrap.com/)
  - [Bulma](https://bulma.io/)
  - [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](https://github.com/airbnb/css)
  - [CSS Guidelines](https://cssguidelin.es/)
  - [Google Style Guide](https://google.github.io/styleguide/htmlcssguide.html)
  - [Trello CSS Guide](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80)

- Websites
  - [7 Days, 7 Websites](https://7days7websites.glitch.me/) - A challenge site to build 7 websites in 7 days
  - [Can I use](https://caniuse.com/) - Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
  - [Clippy](https://bennettfeely.com/clippy/) - A small tool to help you using the new and powerful clip-path property.
  - [CSSBattle](https://cssbattle.dev) - Learn CSS through a fun code-golfing game
  - [CSS Easing functions](https://easings.net/) - An amazing collection of easing functions bo be used in CSS transitions and animations.
  - [CSS Diner](https://flukeout.github.io/) - Learn CSS Selectors through a game
  - [CSS for People Who Hate CSS](https://paulcpederson.com/articles/css-for-peo
  - [CSS Grid Garden](https://cssgridgarden.com/) - Learn CSS Grid through a game
  - [CSS Layout](https://csslayout.io/) - A collection of popular layouts and patterns made with CSS
  - [CSS reference by Codrops](http://tympanus.net/codrops/css_reference/)ple-who-hate-css/) -Excellent guide on how to write better, cleaner and more reusable CSS code.
  - [CSS-tricks](https://css-tricks.com) - A wonderful blog site for everything CSS
  - [Cubic Berzier Function Generator](https://cubic-bezier.com/#.17,.67,.83,.67) - Free insights about traffic, visitors and conversions.
  - [Flexbox Froggy](https://flexboxfroggy.com/) - Learn CSS Flexbox through a game
  - [Responsinator](https://www.responsinator.com/) - A quick tool to check the responsiveness of a site across different devices.
  - [Responsive Grid System](http://www.responsivegridsystem.com/) - A quick, flexible and easy fluid grid for easy responsive web design.

[👆 Back To Top](#table-of-contents)

# JavaScript

- Documentation

  - Cheat Sheet - [OverAPI - Links To MDN](https://overapi.com/javascript)
  - MDN - [JavaScript Reference ⭐]()
  - MDN - [Operator Precedence Table]()
  - MDN - [JavaScript Event Refernce]()

- Courses

  - CodeCademy - [Learn JavaScript](https://www.codecademy.com/learn/introduction-to-javascript)
  - EDX - [Programming the Web with JavaScript](https://www.edx.org/course/programming-for-the-web-with-javascript)
  - freeCodeCamp - [JavaScript Algorithms and Data Structures ⭐](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/)
  - [GeekforGeeks](https://www.geeksforgeeks.org/javascript-tutorial/)
  - The Odin Project[Javascript Course- includes some backend related content too](https://www.theodinproject.com/courses/javascript)
  - Wes Bos - [JavaScript30 ⭐](https://javascript30.com/)
  - W3Schools - [JavaScript Tutorial](https://www.w3schools.com/js/DEFAULT.asp)
  - Udemy [The Complete JavaScript Course 💵 ⭐](https://www.udemy.com/course/the-complete-javascript-course/)

- Books

  - [Eloquent JavaScript ⭐](https://eloquentjavascript.net/)
  - [JavaScript For Cats](http://jsforcats.com/)
  - [JavaScript Notes for Pros](https://books.goalkicker.com/JavaScriptBook/)
  - [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)
  - [You Don't Know JavaScript ⭐](https://github.com/getify/You-Dont-Know-JS)
  - [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/)
  - [Exercism](https://exercism.io/)
  - [HackerEarth](https://www.hackerearth.com/)
  - [Hackerrank](https://www.hackerrank.com/)
  - [JavaScript Gekk]()
  - [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](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel) - Syntax highlighting for today's JavaScript
  - [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) - Matches brackets with same color.
  - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - Debugging tool.
  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Code Linter that can find out any problematic patterns. You can even make your own set of rules to check and reuse logic.
  - [Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - Can show code completion and information on a certain function, variables, and properties by hover.
  - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Automatically reload the web page whenever there are changes in your code.
  - [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) - npm support for Visual Studio Code
  - [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) -Aauto-complete the path of the file you are trying to import
  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Responsible for code formatting.
  - [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) - Copy JSON paste as JavaScript or Typescript
  - [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) - Prototyping playground that displays the results of an operation inside your IDE
  - [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) - REST Client for Visual Studio Code
  - [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) - Synchronise your editor settings using Github.
  - [Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - Snippets for JavaScript ES6 syntax and TypeScript.

- Websites

  - [HTML DOM](https://htmldom.dev/) - Common tasks of managing HTML DOM with vanilla JavaScript
  - [this vs that](https://thisthat.dev/) - The differences between **_ and _** in the front-end development

- 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)

- 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 Cheatsheet](https://devhints.io/react)
  - [React Docs ⭐](https://reactjs.org/docs/getting-started.html)

- Courses

  - Egghead - [The Beginner's Guide to React ⭐](https://egghead.io/courses/the-beginner-s-guide-to-react)
  - freeCodeCamp - [Introduction to React ⭐](https://www.freecodecamp.org/learn/front-end-libraries/react/)
  - FullStackOpen - [Introduction to React](https://fullstackopen.com/en/part1)
  - Pluralsight - [React Getting Started](https://www.pluralsight.com/courses/react-js-getting-started)
  - Scrimba - [Learn React](https://scrimba.com/course/glearnreact)
  - Wes Bos - [React for Beginners ⭐](https://reactforbeginners.com/)
  - EpicReact - [Epic React 💵 ⭐](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/)

- Podcasts

  - [React Round Up](https://devchat.tv/react-round-up)
  - [The React Podcast](https://reactpodcast.com/)

- Blog Sites

  - [Kent C. Dodds' Blog ⭐](https://blog.kentcdodds.com/)
  - [Official React Blog ⭐](https://reactjs.org/blog/)
  - [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

  - [ES Lint](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 Framework / UI Library

  - [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/)

- 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)

- 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://github.com/styled-components/styled-components)
  - [Emotion (css in js)](https://emotion.sh/)

- Remote Data Fetching

  - [Axios](https://www.npmjs.com/package/axios)
  - [React Query](https://github.com/tannerlinsley/react-query)
  - [swr](https://github.com/vercel/swr)

- 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

  - MDN - [Getting started with Vue ⭐](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

  - freeCodeCamp - [Learn Vue.js - Full Course for Beginners](https://www.freecodecamp.org/news/vue-js-full-course/)
  - Frontend Masters - [Advanced Vue.js Features from the Ground Up](https://frontendmasters.com/courses/advanced-vue/)
  - Laracasts - [Learn Vue 2: Step By Step](https://laracasts.com/series/learn-vue-2-step-by-step)
  - Scotch - [Getting Started with Vue.js ⭐](https://scotch.io/courses/getting-started-with-vuejs?ref=home-start-here)
  - Testdriven - [Learn Vue by Building and Deploying a CRUD App](https://testdriven.io/courses/learn-vue/)
  - Vue-Exercises Ninja Squad - [Become a Ninja with Vue 3](https://vue-exercises.ninja-squad.com)
  - Vuemastery - [Intro to Vue 2](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/)
  - VueSchool - [Learn Vue 💵](https://vueschool.io/)
  - Vuemastery - [Premium Beginner to Advanced Vue Course 💵 ⭐](https://www.vuemastery.com/courses)

- 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/) - The quickest and convenient way to copy, visualize, edit and export CSS
- [Check Browsers Support 💵](https://checkbrowsers.support/) - Check browser compatibility without leaving your tab
- [CSS Inspector 💵](https://cssinspector.com/) - Get the CSS code of any web element with CSS Inspector
- [CSS Scan 💵](https://getcssscan.com/) - The fastest and easiest way to check, copy and edit CSS

[👆 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/) - Check if your CSS code is valid and contains no errors.
- [Google Analytics](https://marketingplatform.google.com/about/analytics/) - Free insights about traffic, visitors and conversions.
- [Nibbler](https://nibbler.silktide.com/en_US) - Website testing tool for 10 key areas including accessibility, SEO, social media and technology.
- [Namecheap](https://www.namecheap.com/) - Premium and cost-effective domain names and web hosting.
- [Optimizilla](http://optimizilla.com/) - Compress up to 20 JPEG and PNG images while keeping a good level of quality.
- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) - Quick tool to test your webpage for performance on all devices.
- [Sizzy](https://sizzy.co/) - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once.
- [Usability Checklist](https://stayintech.com/info/UX) - Catch common usability problems of your website before deployment.
- [Who Is](https://who.is/) - Quick tool to check the availability of a domain name.
- [Woorank](https://www.woorank.com/) - Get a review of your website to address issues and identify opportunities to get ahead of competition.

[👆 Back To Top](#table-of-contents)

# Color Inspiration

- [0to255](https://www.0to255.com/)
- [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/)
- [Developer Portfolios](https://github.com/emmabostian/developer-portfolios)
- [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/)

[👆 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]()
  - [Creddle]()
  - [Harvard Office Of Career Services](https://ocs.fas.harvard.edu/guide-template-library)
  - [MyPerfectResume]()
  - [ResumeWorded]()
  - [Resume.io]()

- Resume Editing
  - [Grammarly](https://www.grammarly.com/)
- ATS Resources

  - [JobScan](https://www.jobscan.co/)
  - [SkillSyncer](https://skillsyncer.com/)
  - [Top Resume](https://www.topresume.com/)

- Job Sites

  - [Angel List](https://angel.co/jobs)
  - [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/)
  - [Remotehub]()
  - [Remoteco](https://remote.co/remote-jobs/developer/)
  - [Stackoverflow Jobs](https://stackoverflow.com/jobs)
  - [Startupers](https://www.startupers.com/)
  - [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/)

- Freelance Jobs Sites

  - [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
  - Danny Thompson - [Ge A Job Using LinkedIn (Series)](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](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/)
- [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.

# Authors

[Joel P. Mugalu](https://github.com/mojpm)

This repository exists because of the wonderful contributions made by [these Contributors.](https://github.com/developer-resources/frontend-development/graphs/contributors)

[👆 Back To Top](#table-of-contents)