Home

Awesome

Banner

Introduction

Follow me

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

Table of Contents

  1. How The Internet Works
  2. HTML
  3. CSS
  4. JavaScript
  5. Git
  6. React
  7. Vue
  8. Browser Extensions
  9. Icons
  10. Fonts and Typography
  11. Illustrations
  12. Optimization
  13. Color Inspiration
  14. Images and Videos
  15. Hosting Sites
  16. Design Inspiration
  17. Portfolio Inspiration
  18. Youtube Channels
  19. Podcasts
  20. Blogs
  21. Interview Prep
  22. Newsletters
  23. Contributing

How the Internet Works

Documentation

Articles

Videos

πŸ‘† Back To Top

HTML

Documentation

Cheat Sheets

Articles

Books

Courses

Websites

πŸ‘† Back To Top

CSS

Documentation

Cheat Sheets

Books

Courses

Frameworks and Libraries

Practice your CSS Skills

Style Guides

Websites

πŸ‘† Back To Top

JavaScript

Documentation

Reference & Cheat Sheets

Courses

Books

Challenge Websites

Snippets and cheatsheets

Style Guides

Visual Studio Code Extensions

Websites

Articles

πŸ‘† Back To Top

Git

Courses

Books

Tools

πŸ‘† Back To Top

React

Documentation

Cheat Sheets

Courses

Books

Project Ideas

Podcasts

Blog Sites

Youtube Channels

React Tooling

State Management

UI Frameworks & Libraries

Unit Testing

Create React App

CSS in JS

Remote Data Fetching

Server Side Rendering

Experts on Twitter

Conferences

Community

πŸ‘† Back To Top

Vue

Documentation

Courses

Project Ideas

Books

Podcasts

Youtube Channels

Tools

Blogs

Community

Conferences

πŸ‘† Back To Top

Browser extensions

πŸ‘† Back To Top

Icons

πŸ‘† Back To Top

Fonts and Typography

πŸ‘† Back To Top

Illustrations

πŸ‘† Back To Top

Optimization

πŸ‘† Back To Top

Color Inspiration

πŸ‘† Back To Top

Images and Videos

πŸ‘† Back To Top

Hosting Sites

πŸ‘† Back To Top

Design Inspiration

πŸ‘† Back To Top

Portfolio Inspiration

πŸ‘† Back To Top

Youtube Channels

πŸ‘† Back To Top

Podcasts

πŸ‘† Back To Top

Blogs

πŸ‘† Back To Top

Interview Prep

Resume Templates

Resume Editing

Job Sites

Freelance Jobs Sites

Mock Interviews

Project Pair Programming

Open Source

YouTube Series

Articles

Newsletters

πŸ‘† Back To Top

Contributing

You're very welcome to contribute to this list.

Be sure to read How to Contribute before making your contribution.

Contributors ✨

Thanks goes to these wonderful people

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://codingknite.com/"><img src="https://avatars.githubusercontent.com/u/70036189?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joel P. Mugalu</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=codingknite" title="Documentation">πŸ“–</a> <a href="#content-codingknite" title="Content">πŸ–‹</a> <a href="#maintenance-codingknite" title="Maintenance">🚧</a></td> <td align="center"><a href="https://github.com/ChinmayMhatre"><img src="https://avatars.githubusercontent.com/u/51131670?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chinmay Mhatre</b></sub></a><br /><a href="#content-ChinmayMhatre" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=ChinmayMhatre" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://twitter.com/nghuuphuoc"><img src="https://avatars.githubusercontent.com/u/57786711?v=4?s=100" width="100px;" alt=""/><br /><sub><b>phuoc-ng</b></sub></a><br /><a href="#content-phuoc-ng" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=phuoc-ng" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://divjoy.com/"><img src="https://avatars.githubusercontent.com/u/1481077?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gabe Ragland</b></sub></a><br /><a href="#content-gragland" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=gragland" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://www.imranbmohamed.com/"><img src="https://avatars.githubusercontent.com/u/71926855?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Imran Mohamed</b></sub></a><br /><a href="#content-i786m" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=i786m" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://github.com/AlexNodex"><img src="https://avatars.githubusercontent.com/u/17162626?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AlexNodex</b></sub></a><br /><a href="#content-AlexNodex" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=AlexNodex" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://arun.app/"><img src="https://avatars.githubusercontent.com/u/22396000?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Arun</b></sub></a><br /><a href="#content-h7y" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=h7y" title="Documentation">πŸ“–</a></td> </tr> <tr> <td align="center"><a href="https://binyam.in/"><img src="https://avatars.githubusercontent.com/u/39805353?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Binyamin Aron Green</b></sub></a><br /><a href="#content-binyamin" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=binyamin" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://cssbattle.dev/"><img src="https://avatars.githubusercontent.com/u/379918?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kushagra Gour</b></sub></a><br /><a href="#content-chinchang" title="Content">πŸ–‹</a> <a href="https://github.com/codingknite/frontend-development/commits?author=chinchang" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://github.com/nathsimpson"><img src="https://avatars.githubusercontent.com/u/12689383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nathan Simpson</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=nathsimpson" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://mintbean.io/"><img src="https://avatars.githubusercontent.com/u/4856944?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Monarch Wadia</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=monarchwadia" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://medium.com/@qjli"><img src="https://avatars.githubusercontent.com/u/75322?v=4?s=100" width="100px;" alt=""/><br /><sub><b>QJ Li</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=qjnz" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://sayemon10.github.io/"><img src="https://avatars.githubusercontent.com/u/35277447?v=4?s=100" width="100px;" alt=""/><br /><sub><b>S. M. Abdul Aziz</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=sayemon10" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://github.com/xerosic"><img src="https://avatars.githubusercontent.com/u/42121005?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xerosic</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=xerosic" title="Documentation">πŸ“–</a></td> </tr> <tr> <td align="center"><a href="https://zoranjambor.com/"><img src="https://avatars.githubusercontent.com/u/515906?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zoran Jambor</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=ZoranJambor" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://github.com/jenniferfu0811"><img src="https://avatars.githubusercontent.com/u/25816882?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jenniferfu0811</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=jenniferfu0811" title="Documentation">πŸ“–</a></td> <td align="center"><a href="https://github.com/devjhex"><img src="https://avatars.githubusercontent.com/u/124887722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonah Ssegawa</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=devjhex" title="Documentation">πŸ“–</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->