![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. Resources with πŸ’΅ indicate that the resource is a paid resource. Note that you're not required to use these resources one by one. This is just a reference and not a guide. It is practically impossible to use all the resources listed in here. Use this as a reference. It is not a guide. We Invite as many contributions as possible. Be sure to read [How To Contribute](CONTRIBUTING.MD) # Table of Contents - [Summary](#summary) - [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 Inspirationgit](#portfolio-inspirationgit) - [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 - 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) - 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.) - HowStuffWorks - [How does the Internet Work?](https://computer.howstuffworks.com/internet/basics/internet.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 - MDN - [HTML5 Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - Reference - [HTML Reference](https://htmlreference.io/) - CSS-Tricks - [HTML Entity Refernce](https://css-tricks.com/snippets/html/glyphs/) - W3Schools - [Introduction to HTML](https://www.w3schools.com/html/html_intro.asp) - Cheat Sheet - [HTML Cheat Sheet](https://websitesetup.org/html5-cheat-sheet/) - Cheat Sheet - [OverAPI - Links To MDN](https://overapi.com/html) - Josh Buchea - [HEAD](https://htmlhead.dev/), A free guide to HTML5 `` elements - Courses - FreeCodeCamp - [Introduction to Basic HTML & HTML5](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/) - W3Schools - [HTML Tutorial](https://www.w3schools.com/html/) - Udacity - [Intro to HTML and CSS](https://www.udacity.com/course/intro-to-html-and-css--ud001) - Scrimba - [Introduction to HTML](https://scrimba.com/learn/html) - EDX - [HTML5 and CSS Fundemantals](https://www.edx.org/course/html5-and-css-fundamentals) - Youtube - [HTML Full Course](https://www.youtube.com/watch?v=pQN-pnXPaVg&ab_channel=freeCodeCamp.org) - Udemy - [HTML and CSS3 Course πŸ’΅](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/) - CodeCademy - [Learn HTML πŸ’΅](https://www.codecademy.com/learn/learn-html) - Pluralsight - [HTML Fundamentals πŸ’΅](https://www.pluralsight.com/courses/html-fundamentals) - 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) - Books - [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) - [Design and Build Websites πŸ’΅](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189) - Websites - [HTML5 Up](http://html5up.net/) - Responsive HTML5 and CSS3 site templates. - [Templated](http://templated.co/) - A collection of 845 free CSS & HTML5 site templates. - [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 - [HTML Validator](https://validator.w3.org/) - Check if your HTML markup is valid and contains no errors. [πŸ‘† Back To Top](#table-of-contents) # CSS - Documentation - Reference - [CSS Reference](https://cssreference.io/) - MDN - [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - [Extensive CSS Reference](https://tympanus.net/codrops/css_reference/) - [Getting to Know CSS](https://learn.shayhowe.com/html-css/getting-to-know-css/) - Cheat Sheet - [OverAPI - Links To MDN](https://overapi.com/css) - Courses - FreeCodeCamp - [Introduction to Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/) - W3School - [CSS Tutorial](https://www.w3schools.com/css/) - Scrimba - [Introduction to CSS](https://scrimba.com/learn/introtocss) - CodeCademy - [Learn CSS πŸ’΅](https://www.codecademy.com/learn/learn-css) - Team Treehouse - [CSS Basics πŸ’΅](https://teamtreehouse.com/library/css-basics) - Style Guides - [CSS Guidelines](https://cssguidelin.es/) - [Trello CSS Guide](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80) - [AirBnb Style Guide](https://github.com/airbnb/css) - [Google Style Guide](https://google.github.io/styleguide/htmlcssguide.html) - 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) - Websites - [Clippy](https://bennettfeely.com/clippy/) - A small tool to help you using the new and powerful clip-path property. - [CSS Diner](https://flukeout.github.io/) - Learn CSS Selectors through a game - [Flexbox Froggy](https://flexboxfroggy.com/) - Learn CSS Flexbox through a game - [CSS Grid Garden](https://cssgridgarden.com/) - Learn CSS Grid through a game - [CSSBattle](https://cssbattle.dev) - Learn CSS through a fun code-golfing game - [Can I use](https://caniuse.com/) - Up-to-date browser support tables for front-end technologies on desktop and mobile browsers. - [CSS-tricks](https://css-tricks.com) - A wonderful blog site for everything CSS - [Responsinator](https://www.responsinator.com/) - A quick tool to check the responsiveness of a site across different devices. - [7 Days, 7 Websites](https://7days7websites.glitch.me/) - A challenge site to build 7 websites in 7 days - [CSS Easing functions](https://easings.net/) - An amazing collection of easing functions bo be used in CSS transitions and animations. - [Responsive Grid System](http://www.responsivegridsystem.com/) - A quick, flexible and easy fluid grid for easy responsive web design. - [CSS reference by Codrops](http://tympanus.net/codrops/css_reference/) - [CSS for People Who Hate CSS](https://paulcpederson.com/articles/css-for-people-who-hate-css/) -Excellent guide on how to write better, cleaner and more reusable CSS code. - [Cubic Berzier Function Generator](https://cubic-bezier.com/#.17,.67,.83,.67) - Free insights about traffic, visitors and conversions. - [CSS Layout](https://csslayout.io/) - A collection of popular layouts and patterns made with CSS - Practice your CSS Skills - [Codepen](http://codepen.io/) - [JSFiddle](https://jsfiddle.net/) - [CSS Deck](http://cssdeck.com/) - [Dablet](http://dabblet.com/) - [Plunker](http://plnkr.co/) - [Liveweave](http://liveweave.com/) - [JS Bin](http://jsbin.com/) - [CodeSandbox](https://codesandbox.io/) - [StackBlitz](https://stackblitz.com/) - Frameworks and Libraries - [Tachyons](https://tachyons.io/) - [Bootstrap](https://getbootstrap.com/) - [Foundation](https://foundation.zurb.com/) - [Pure](https://purecss.io/) - [Bulma](https://bulma.io/) - [Semantic UI](https://semantic-ui.com/) - [UI Kit](https://getuikit.com/) - [Materialize CSS](https://materializecss.com/) - [Milligram](https://milligram.io/) - [Skeleton](http://getskeleton.com/) - [Tailwind CSS](https://tailwindcss.com/) - [Spectre](https://picturepan2.github.io/spectre/) - [Base](https://getbase.org/) - [Picnic CSS](https://picnicss.com/) - [Mustard UI](https://mustard-ui.com/) - [Dead Simple Grid](https://github.com/mourner/dead-simple-grid) - [Tent CSS](https://css.sitetent.com/) - [Animate.css](https://daneden.github.io/animate.css/) [πŸ‘† Back To Top](#table-of-contents) # JavaScript - Documentation - MDN - [JavaScript Reference]() - MDN - [Operator Precedence Table]() - MDN - [JavaScript Event Refernce]() - Cheat Sheet - [OverAPI - Links To MDN](https://overapi.com/javascript) - Courses - freeCodeCamp - [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/) - Wes Bos - [JavaScript30](https://javascript30.com/) - W3Schools - [JavaScript Tutorial](https://www.w3schools.com/js/DEFAULT.asp) - 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) - [GeekforGeeks](https://www.geeksforgeeks.org/javascript-tutorial/) - Udemy [The Complete JavaScript Course πŸ’΅](https://www.udemy.com/course/the-complete-javascript-course/) - The Odin Project[Javascript Course- includes some backend related content too](https://www.theodinproject.com/courses/javascript) - Books - [Eloquent JavaScript](https://eloquentjavascript.net/) - [You Don't Know JavaScript](https://github.com/getify/You-Dont-Know-JS) - [JavaScript For Cats](http://jsforcats.com/) - [Speaking JavaScript](http://speakingjs.com/es5/index.html) - [JavaScript Notes for Pros](https://books.goalkicker.com/JavaScriptBook/) - [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) - [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/) - [Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja) - Challenge Websites - [Codewars](https://www.codewars.com/) - [Hackerrank](https://www.hackerrank.com/) - [Coderbyte](https://coderbyte.com/) - [Exercism](https://exercism.io/) - [CodinGame](https://www.codingame.com/) - [Project Euler](https://projecteuler.net/) - [CodeForces](https://codeforces.com/) - [HackerEarth](https://www.hackerearth.com/) - [TopCoder](https://www.topcoder.com/) - [Coderbyte](https://coderbyte.com/) - [Pramp](https://www.pramp.com/#/) - [JavaScript Gekk]() - [Leetcode](https://leetcode.com/) - [AtCoder](https://atcoder.jp/) - [CodeChef](https://www.codechef.com/) - [SPOJ](https://www.spoj.com/) - Snippets and cheatsheets - [A ridiculous collection of cheatsheets](https://devhints.io/) - [Modern JavaScript Cheatsheet](https://github.com/mbeaudru/modern-js-cheatsheet) - [Favorite JavaScript utilities in single line of code](https://1loc.dev/) - [Short JavaScript code snippets for all your development needs](https://github.com/30-seconds/30-seconds-of-code) - Style Guides - [Standardjs](https://standardjs.com/) - [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) - Visual Studio Code Extensions - [Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - Snippets for JavaScript ES6 syntax and TypeScript. - [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. - [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. - [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) - Matches brackets with same color. - [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel) - Syntax highlighting for today's JavaScript - [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) - npm support for Visual Studio Code - [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 - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Automatically reload the web page whenever there are changes in your code. - [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) - Synchronise your editor settings using Github. - [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) - REST Client for Visual Studio Code - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - Debugging tool. - 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 - [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/) - [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) [πŸ‘† Back To Top](#table-of-contents) # Git - Courses - [Version Control with Git](https://www.coursera.org/learn/version-control-with-git/) - [A Guide to Git & Version Control](https://www.educative.io/courses/guide-to-git-and-version-control/) - [Getting Started with Git πŸ’΅](https://www.pluralsight.com/courses/getting-started-git/) - [Learn Git](https://www.codecademy.com/learn/learn-git) - [Version Control (Git)](https://missing.csail.mit.edu/2020/version-control/) - [Git Cheat Sheet](http://www.ndpsoftware.com/git-cheatsheet.html) - Books - [Pro Git](https://git-scm.com/book/en/v2) - Tools - [Github](http://github.com/) - [Bitbucket](https://bitbucket.org/) - [Sourcetree](https://www.sourcetreeapp.com/) - [Git Extensions for Windows](https://github.com/gitextensions/gitextensions) # React - Documentation - [React Docs](https://reactjs.org/docs/getting-started.html) - [React Cheatsheet](https://devhints.io/react) - Courses - Pluralsight - [React Getting Started](https://www.pluralsight.com/courses/react-js-getting-started) - Egghead - [The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react) - Scrimba - [Learn React](https://scrimba.com/course/glearnreact) - freeCodeCamp - [Introduction to React](https://www.freecodecamp.org/learn/front-end-libraries/react/) - FullStackOpen - [Introduction to React](https://fullstackopen.com/en/part1) - Wes Bos - [React for Beginners](https://reactforbeginners.com/) - EpicReact - [Epic React πŸ’΅](https://epicreact.dev/) - Books - [Road to React πŸ’΅](https://www.roadtoreact.com/) - [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/) - Podcasts - [The React Podcast](https://reactpodcast.com/) - [React Round Up](https://devchat.tv/react-round-up) - Blog Sites - [Official React Blog](https://reactjs.org/blog/) - [Kent C. Dodds' Blog](https://blog.kentcdodds.com/) - Youtube Channels - [Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw) - [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) - [freeCodeCamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ) - [Traversy Media](https://www.youtube.com/user/TechGuyWeb) - [Coding Addict](https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA) - React Tooling - [npm](https://www.npmjs.com/) - [ES Lint](https://eslint.org/) - [Lodash](https://lodash.com/) - [Storybook](https://storybook.js.org/) - [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) - State Management - [Redux](https://github.com/reduxjs/redux) - [Mobx](https://mobx.js.org/README.html) - [Recoil](https://github.com/facebookexperimental/Recoil) - UI Framework / UI Library - [Reactstrap](https://reactstrap.github.io/) - [React Bootstrap](https://react-bootstrap.github.io/) - [Onsen UI](https://onsen.io/react/) - [Material UI](https://material-ui.com/) - [Material Kit React](https://github.com/creativetimofficial/material-kit-react) - [React Toolbox (Material Design)](http://react-toolbox.io/) - [Semantic UI React](https://react.semantic-ui.com/) - [Rebass](https://rebassjs.org/) - [Grommet](https://v2.grommet.io/components) - Unit Testing - [Jest](https://jestjs.io/docs/en/tutorial-react) - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) - [Enzyme](https://github.com/enzymejs/enzyme) - Create React App - [Create React App](https://github.com/facebook/create-react-app) - [React Boilerplate](https://github.com/react-boilerplate/react-boilerplate) - 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) - [swr](https://github.com/vercel/swr) - [React Query](https://github.com/tannerlinsley/react-query) - Server Side Rendering - [Next.js](https://nextjs.org/) - [Gatsby](https://www.gatsbyjs.com/) - Experts on Twitter - [Andrew Clark](https://twitter.com/acdlite) - [Brian Vaughn](https://twitter.com/brian_d_vaughn) - [Dan Abramov](https://twitter.com/dan_abramov) - [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) - [Kent C. Dodds](https://twitter.com/kentcdodds) - 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 - [Vue Docs](https://vuejs.org/v2/guide/) - [Vue Cheatsheet](https://devhints.io/vue) - [Vue Cookbook](https://vuejs.org/v2/cookbook/) - MDN - [Getting started with Vue](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started) - Courses - Laracasts - [Learn Vue 2: Step By Step](https://laracasts.com/series/learn-vue-2-step-by-step) - Vuemastery - [Intro to Vue 2](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/) - Scotch - [Getting Started with Vue.js](https://scotch.io/courses/getting-started-with-vuejs?ref=home-start-here) - freeCodeCamp - [Learn Vue.js - Full Course for Beginners](https://www.freecodecamp.org/news/vue-js-full-course/) - Testdriven - [Learn Vue by Building and Deploying a CRUD App](https://testdriven.io/courses/learn-vue/) - Frontend Masters - [Advanced Vue.js Features from the Ground Up](https://frontendmasters.com/courses/advanced-vue/) - Vue-Exercises Ninja Squad - [Become a Ninja with Vue 3](https://vue-exercises.ninja-squad.com) - VueSchool - [Learn Vue πŸ’΅](https://vueschool.io/) - Vuemastery - [Premium Beginner to Advanced Vue Course πŸ’΅](https://www.vuemastery.com/courses) - Books - [The Mastery Of Vue.js 2 πŸ’΅](https://leanpub.com/vuejs2) - [Vue.js: Up and Running πŸ’΅](http://shop.oreilly.com/product/0636920103455.do) - [Fullstack Vue πŸ’΅](https://www.fullstack.io/vue/) - [Vue.js in Action πŸ’΅](https://www.manning.com/books/vue-js-in-action) - [Testing Vue.js components with Jest πŸ’΅](https://leanpub.com/testingvuejscomponentswithjest) - [Large Scale Apps with Vue 3 and TypeScript πŸ’΅](http://leanpub.com/vue-typescript/c/vaYXLEFWbMi7) - [Mastering Vue.js πŸ’΅](https://masteringvuejs.com) - [Full-Stack Web Development with Vue.js and Node πŸ’΅](https://www.amazon.com/Full-Stack-Web-Development-Vue-js-Node/dp/1788831144) - [Vue.js: Understanding its Tools and Ecosystem πŸ’΅](https://www.packtpub.com/business-other/vue-js-understanding-its-tools-and-ecosystem) - [The Vue Handbook πŸ’΅](https://vuehandbook.com) - [Vue.js 2 Design Patterns and Best Practices πŸ’΅](https://www.amazon.com/dp/178883979X) - [Vue: Build & Deploy πŸ’΅](https://leanpub.com/vue-book) - Podcasts - [Vue News Podcast](https://news.vuejs.org/) - [Enjoy the Vue](https://enjoythevue.io/) - [Views on Vue](https://devchat.tv/views-on-vue) - [Software Engineering Daily](http://softwareengineeringdaily.com/2015/12/29/front-end-javascript-with-evan-you/) - [JavaScript Jabber Episode 276](https://devchat.tv/js-jabber/jsj-276-vue-js-with-maximilian-schwarzmuller/) - [Syntax Episode 130](https://syntax.fm/show/130/the-vuejs-show-scott-teaches-wes) - [Cynical Developer Episode 99](https://cynicaldeveloper.com/podcast/99/) - 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) - [Nuxt.js](https://nuxtjs.org/) - [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/) - [Bootstrap Vue](https://bootstrap-vue.js.org/) - [Onseen UI](https://onsen.io/vue/) - [Quansar Framework](http://quasar-framework.org/) - [Vue Dev Server](https://github.com/paulpflug/vue-dev-server) - Blogs - [The Vue Point](https://medium.com/the-vue-point) - [Vue.js Developers](https://vuejsdevelopers.com/) - [CSS-Tricks - Vue](https://css-tricks.com/guides/vue/) - [Aligator.io](https://alligator.io/vuejs/) - Community - [Vuejs Forum](https://forum.vuejs.org/) - [Vue Land](https://vue-land.js.org/) - [Reddit](https://www.reddit.com/r/vuejs/) - 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 - [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 - [CSS Spider](https://cssspider.fresalabs.com/) - The quickest and convenient way to copy, visualize, edit and export CSS [πŸ‘† Back To Top](#table-of-contents) # Icons - [Font Awesome](https://fontawesome.com/?from=io) - [Flaticon](https://www.flaticon.com/home) - [Iconfactory](https://freeware.iconfactory.com/icons) - [CSS.gg](https://css.gg/) - [Icons8](https://icons8.com/) - [Icontre](https://iconstore.co/) - [Heroicons](https://heroicons.com/) - [Iconjar](https://geticonjar.com/) - [IconFinder](https://www.iconfinder.com/free_icons) - [Pngtree](https://pngtree.com/free-icon) - [Freepik](https://www.freepik.com/) - [Iconmonstr](https://iconmonstr.com/) - [Ionicons](https://ionicons.com/) - [Icomoon](https://icomoon.io/) - [UXWing](https://uxwing.com/) - [Fontastic](http://fontastic.me/) - [Swift Icons](https://www.swifticons.com/) - [Iconshock](https://www.iconshock.com/free-icons/) - [BoxIcons](https://boxicons.com/) - [Material Icons](https://material.io/resources/icons/) [πŸ‘† Back To Top](#table-of-contents) # Fonts and Typography - [PinSpiry Fonts](https://pinspiry.com/category/free-resources/fonts/) - [FFonts](https://www.ffonts.net/) - [Befonts](https://befonts.com/) - [Unblast](https://unblast.com/fonts/) - [1001Fonts](https://www.1001fonts.com/) - [Google Fonts](https://fonts.google.com/) - [TypeTester](https://www.typetester.org/) - [FonstSpace](https://www.fontspace.com/) - [FontsArena](https://fontsarena.com/) - [MyFonts](https://www.myfonts.com/) - [FontSpace](https://www.fontspace.com/) - [Typo Guide](http://www.typogui.de/) - [DaFont](https://www.dafont.com/) - [Fontsquirrel](https://www.fontsquirrel.com/) - [Abstract Fonts](http://www.abstractfonts.com/) - [Free Script Fonts](https://www.freescriptfonts.net/) [πŸ‘† Back To Top](#table-of-contents) # Illustrations - [Undraw](https://undraw.co/illustrations) - [Draw Kit](https://drawkit.io/) - [Blob maker](https://www.blobmaker.app/) - [IRA Design](https://iradesign.io/gallery/illustrations) - [Blush](https://blush.design/) - [Interfacer](https://interfacer.xyz/) - [Icons 8](https://icons8.com/ouch) - [Manypixels](https://gallery.manypixels.co/) [πŸ‘† Back To Top](#table-of-contents) # Optimization - [Sizzy](https://sizzy.co/) - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once. - [Who Is](https://who.is/) - Quick tool to check the availability of a domain name. - [Nibbler](https://nibbler.silktide.com/en_US) - Website testing tool for 10 key areas including accessibility, SEO, social media and technology. - [Woorank](https://www.woorank.com/) - Get a review of your website to address issues and identify opportunities to get ahead of competition. - [Optimizilla](http://optimizilla.com/) - Compress up to 20 JPEG and PNG images while keeping a good level of quality. - [Namecheap](https://www.namecheap.com/) - Premium and cost-effective domain names and web hosting. - [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. - [Usability Checklist](https://stayintech.com/info/UX) - Catch common usability problems of your website before deployment. - [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) - Quick tool to test your webpage for performance on all devices. [πŸ‘† Back To Top](#table-of-contents) # Color Inspiration - [UIGradients](https://uigradients.com/#Kyoto) - [0to255](https://www.0to255.com/) - [Paletton](http://paletton.com/) - [Material Palette](https://www.materialpalette.com/) - [Coolors](https://coolors.co/) - [Color Hex](https://www.color-hex.com/) - [Color Hunt](https://colorhunt.co/) - [Flat UI Colors](https://flatuicolors.com/) - [myColor Space](https://mycolor.space/) - [LOL Color Palettes](https://www.webdesignrankings.com/resources/lolcolors/) [πŸ‘† Back To Top](#table-of-contents) # Images and Videos - [Unsplash](https://unsplash.com/) - [Coverr](http://www.coverr.co/) - [Canva](https://www.canva.com/photos/free/) - [Pexels](https://www.pexels.com/) - [ISO Republic](http://isorepublic.com/) - [Burst](https://burst.shopify.com/) - [Flickr](https://www.flickr.com/) - [Subtle Patterns](http://subtlepatterns.com/) - [Reshot](https://reshot.com/) - [Pixabay](https://pixabay.com/en/) - [Gratisography](https://gratisography.com/) - [Life of Pix](https://www.lifeofpix.com/) - [The Stocks](http://thestocks.im/) - [Free Images](https://www.freeimages.com/) - [Startup Stock Photos](http://startupstockphotos.com/) [πŸ‘† Back To Top](#table-of-contents) # Hosting Sites - [Netlify](https://netlify.com/) - [Github](https://pages.github.com/) - [Vercel](https://vercel.com/) - [Render](https://render.com/) - [Digital Ocean](https://www.digitalocean.com/) - [Firebase](https://firebase.google.com/) - [Amazon Web Services](https://aws.amazon.com/) [πŸ‘† Back To Top](#table-of-contents) # Design Inspiration - [Dribble](https://dribbble.com/) - [Site Inspire](http://www.siteinspire.com/) - [Media Queries](http://mediaqueri.es/) - [Call To idea](http://www.calltoidea.com/) - [One Page Love](https://onepagelove.com/) - [Land Book](http://land-book.com/) - [Awwwards](https://www.awwwards.com/) - [Site Inspire](https://www.siteinspire.com/) - [Pinterest](http://pinterest.com/) - [Behance](https://www.behance.net/) - [UI Movement](https://uimovement.com/) - [From Up North](http://www.fromupnorth.com/) - [Template Monster](https://www.templatemonster.com/) - [Design Inspiration](https://www.designspiration.net/) - [Webdesign Inspiration](http://webdesign-inspiration.com/) [πŸ‘† Back To Top](#table-of-contents) # Portfolio Inspirationgit - [Aral Tasher](https://araltasher.com/) - [Matt Farley](http://mattfarley.ca/) - [Jack Jeznach](http://jacekjeznach.com/) - [Julia Johnson](https://www.juliacodes.com/) - [Fidalgo Pedro](https://fidalgo.dev/) - [Brittany Chiang](https://brittanychiang.com/) - [Developer Portfolios](https://github.com/emmabostian/developer-portfolios) - [Nathan Simpson](https://nathansimpson.design/) [πŸ‘† Back To Top](#table-of-contents) # Youtube Channels - [freeCodeCamp](https://www.youtube.com/c/FreeCodeCamp) - [The Net Ninja](https://youtube.com/c/TheNetNinja) - [Clever Programmer](https://www.youtube.com/c/CleverProgrammer) - [Academind](https://www.youtube.com/c/Academind) - [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/) - [Coding Phase](https://www.youtube.com/channel/UC46wWUso9H5KPQcoL9iE3Ug) - [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q) - [Ben Awad](https://www.youtube.com/user/99baddawg) - [Keep On Coding](https://www.youtube.com/channel/UCsLo154Krjwhoz8W00N8ItA) - [Andy Sterkowitz](https://www.youtube.com/channel/UCZ9qFEC82qM6Pk-54Q4TVWA) - [Traversy Media](https://www.youtube.com/c/TraversyMedia) - [Programming With Mosh](https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA) - [Clement Mihailescu](https://www.youtube.com/channel/UCaO6VoaYJv4kS-TQO_M-N_g) - [Leon Noel](https://www.youtube.com/channel/UCGiRSHBdWuCgjgmPPz_13xw) [πŸ‘† Back To Top](#table-of-contents) # Podcasts - [Syntax](https://syntax.fm/) - [codeNewbies](https://www.codenewbie.org/podcast) - [freeCodeCamp](https://freecodecamp.libsyn.com/) - [Modern Web](https://www.thisdot.co/modern-web) - [Codepen Radio](https://blog.codepen.io/radio/) - [Ladybug Podcast](https://www.ladybug.dev/) - [Commit Your Code](https://anchor.fm/commityourcode) - [DevDiscuss](https://dev.to/devdiscuss) - [Fullstack Radio](https://fullstackradio.com/) - [The Changelog](https://changelog.com/) - [Frontend Happy Hour](https://frontendhappyhour.com/) - [JavaScript Jabber](https://devchat.tv/podcasts/js-jabber/) [πŸ‘† Back To Top](#table-of-contents) # Blogs - [freeCodeCamp](https://freecodecamp.org/news) - [Medium](https://medium.com/) - [Dev.to](https://dev.to/) - [Hashnode](https://hashnode.com/) - [Stackoverflow](http://stackoverflow.com/) - [SitePoint](http://www.sitepoint.com/) - [Front End Front](https://frontendfront.com/) - [Web Designer Depot](http://www.webdesignerdepot.com/) - [Smashing Magazine](https://www.smashingmagazine.com/) - [CSS-Tricks](https://www.css-tricks.com/) - [Hackernoon](http://hackernoon.com/) - [Hacker News](https://news.ycombinator.com/) - [Echo.Js](https://www.echojs.com/) - [Scotch](https://scotch.io/) - [Codrops](https://tympanus.net/codrops/) - [Frontend Focus](https://frontendfoc.us/) [πŸ‘† Back To Top](#table-of-contents) # Interview Prep - Resume Templates - [Canva]() - [ResumeWorded]() - [Creddle]() - [Resume.io]() - [MyPerfectResume]() - [Harvard Office Of Career Services](https://ocs.fas.harvard.edu/guide-template-library) - 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 - [JustRemote](https://justremote.co/remote-developer-jobs) - [Powertofly Jobs](https://powertofly.com/jobs/?location=Remote) - [Producthunt Jobs](https://www.producthunt.com/jobs?categories=Engineering&remote_ok=true) - [Startupers](https://www.startupers.com/) - [Working Nomads](https://www.workingnomads.co/remote-development-jobs) - [Remoteco](https://remote.co/remote-jobs/developer/) - [Jobspresso](https://jobspresso.co/remote-work/) - [We Work Remotely](https://weworkremotely.com/remote-jobs/) - [Stackoverflow Jobs](https://stackoverflow.com/jobs) - [Remotehub]() - [JSRemotely](https://jsremotely.com/) - [Angel List](https://angel.co/jobs) - [Github Jobs](https://jobs.github.com/) - [Mashable Job Board](https://jobs.mashable.com/) - [Remoters](https://remoters.net/jobs/) - [JavaScript Job](https://javascriptjob.xyz/) - [Find Remote Jobs](https://frontendremotejobs.com/) - [Outsourcely](https://www.outsourcely.com/) - [YC Startup Jobs](https://www.workatastartup.com/) - [React Jobs Board](https://reactjobsboard.com/c/remote-react-jobs) - [Remote Hub](https://remotehub.io/) - [Jr Dev Jobs](http://jrdevjobs.com/) - [Women Who Code](http://womenwhocode.com/jobs) - Freelance Jobs Sites - [Freelancer](https://www.freelancer.com/) - [Upwork](https://www.upwork.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/) - Mock Interviews - [Pramp](https://www.pramp.com/) - [Interviewing.io](https://interviewing.io/) - Articles - [How to Write a Developer RΓ©sumΓ© Hiring Managers Will Actually Read](https://www.freecodecamp.org/news/how-to-write-a-resume-that-works/) - [Finding your first remote job](https://joshwcomeau.com/career/remote-work-pt2/) - [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/) - [Resources that help me land a job at FANG]() - [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) - [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/) - [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) - [Tips to get a job as a Developer](https://dev.to/devpato/tips-to-get-a-job-as-a-developer-4ic3) - [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) - [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/) - [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/) - [The 30-minute guide to rocking your next coding interview](https://www.freecodecamp.org/news/coding-interviews-for-dummies-5e048933b82b/amp/) - [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]() - [How To Get A Programming Job Without A Degree](https://selftaught.blog/get-programming-job-without-degree/) # 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)