1000+ Web development resources
Tags: webdev, javascript, discuss, devops
Published: 2021-12-26 05:42:16

# Awesome Web Development Resources ![Awesome][awesome-badge]

This is an awesome project about Web Development resources. ⚡

Resources are added frequently! ⚡

Enjoy!

If you like this Post, be sure to ❤️ it.

Please read [`contributing guidelines`](https://github.com/markodenic/web-development-resources/blob/main/CONTRIBUTING.md) before submitting new resources.

--- 

Initially created by [Marko Denic](https://markodenic.com) on [Twitter](https://twitter.com/denicmarko/status/1277492413032992768).

---

[preview on the web](https://nicedoc.io/markodenic/web-development-resources)

---

## Table of Contents

- [Hosting](#hosting)
- [Learning Platforms](#learning-platforms)
- [Coding Challenge Platforms](#coding-challenge-platforms)
- [Freelancing platforms](#freelancing-platforms)
- [Remote Jobs](#remote-jobs)
- [Photos](#photos)
- [Illustrations](#illustrations)
- [Icons](#icons)
- [Fonts](#fonts)
- [Youtube Channels](#youtube-channels)
- [Podcasts](#podcasts)
- [Code Editors](#code-editors)
- [Color Palettes](#color-palettes)
- [UI Inspiration](#ui-inspiration)
- [Docs](#docs)
- [Animation Libraries](#animation-libraries)
- [Charts](#charts)
- [Chrome Extensions](#chrome-extensions)
- [Website Optimization Tools](#website-optimization-tools)
- [HTML/CSS/JavaScript templates](#htmlcssjavascript-templates)
- [Newsletters](#newsletters)
- [CSS Generators](#css-generators)
- [Online Tools](#online-tools)
- [UI Components](#ui-components)
- [Vue UI libraries](#vue-ui-libraries)
- [React UI libraries](#react-ui-libraries)
- [Angular UI libraries](#angular-ui-libraries)
- [Others](#others)

## Hosting:

| Website |
| ------- |
| https://netlify.com | 
| https://firebase.google.com |  
| https://aws.amazon.com |  
| https://heroku.com |  
| https://pages.github.com |  
| https://vercel.com |  
| https://surge.sh |  
| https://render.com |  
| https://docs.gitlab.com/ee/user/project/pages |  
| https://stormkit.io |  
| https://www.digitalocean.com/ |
| https://www.000webhost.com/ |
| https://infinityfree.net/ |

[⬆ back to top](#table-of-contents)

## Learning Platforms:

| Website |
| ------- |
| https://freecodecamp.org |  
| https://codecademy.com |  
| https://javascript30.com |  
| https://frontendmentor.io |  
| https://testautomationu.applitools.com |  
| https://coursera.org |  
| https://edx.org |  
| https://khanacademy.org |    
| https://sololearn.com |
| https://www.theodinproject.com |
| https://javascript.info/ |
| https://vueschool.io/ |
| https://www.guru99.com/ |
| https://trailhead.salesforce.com/ |
| https://ocw.mit.edu/ |
| https://open.appacademy.io/ |
| https://web.dev/ |
| https://scrimba.com |
| https://thegymnasium.com |
| https://www.amigoscode.com |
| https://cssbattle.dev/ |
| https://bento.io/ |
| https://fullstackopen.com/en/ |
| https://upskillcourses.com/courses |
| https://techguide.org/ |

[⬆ back to top](#table-of-contents)

## Coding Challenge Platforms:

| Website |
| ------- |
| https://codewars.com |  
| https://topcoder.com |  
| https://codingame.com |  
| https://hackerrank.com |  
| https://projecteuler.net |  
| https://coderbyte.com |  
| https://codechef.com |  
| https://exercism.io |  
| https://leetcode.com |  
| https://spoj.com | 
| https://codeforces.com/ |
| https://codesignal.com/ |
| https://frontendmentor.io |
| https://devchallenges.io |
| https://www.hackerearth.com |
| https://www.frontendpractice.com |
| https://www.codementor.io/projects |
| https://css-challenges.com/ |
| https://100dayscss.com |
| https://codepip.com |
| https://triplebyte.com |

[⬆ back to top](#table-of-contents)

## Freelancing platforms:

| Website |
| ------- |
| https://toptal.com |  
| https://upwork.com |  
| https://freelancer.com |  
| https://peopleperhour.com |  
| https://simplyhired.com |  
| https://envato.com |  
| https://guru.com |  
| https://fiverr.com |  
| https://hireable.com |  
| https://6nomads.com |  

[⬆ back to top](#table-of-contents)

## Remote Jobs:

| Website |
| ------- |
| https://flexjobs.com |  
| https://remote.co/remote-jobs |  
| https://justremote.co |  
| https://weworkremotely.com |  
| https://remoteok.io |  
| https://jobspresso.co | 
| https://wfh.io |  
| https://4dayweek.io |
| https://www.hiretechladies.com/ |  
| https://rafo.com.au/ |  

[⬆ back to top](#table-of-contents)

## Photos:

| Website |
| ------- |
| https://unsplash.com |    
| https://pixabay.com |  
| https://pexels.com | 
| https://reshot.com | 
| https://librestock.com |
| https://visualhunt.com | 
| https://freephotos.cc | 
| https://picjumbo.com | 
| https://www.pxfuel.com |
| https://www.splitshire.com |

[⬆ back to top](#table-of-contents)

## Illustrations:

| Website |
| ------- |
| https://www.opendoodles.com |
| https://undraw.co/illustrations |  
| https://drawkit.io |  
| https://icons8.com/ouch |  
| https://iradesign.io |  
| https://interfacer.xyz |  
| https://blush.design |
| https://avataaars.com |
| https://storyset.com |
| https://themeisle.com/illustrations/ |
| https://www.manypixels.co/gallery |

[⬆ back to top](#table-of-contents)

## Icons:

| Website |
| ------- |
| https://fontawesome.com |  
| https://flaticon.com |  
| https://icons8.com |  
| https://iconfinder.com |  
| https://material.io/resources/icons |  
| https://iconmonstr.com | 
| https://heroicons.com |
| https://boxicons.com |
| https://css.gg/ |
| https://icons.eosdesignsystem.com/ |
| https://icons.modulz.app |
| https://remixicon.com |
| https://tablericons.com |
| https://simpleicons.org |
| https://feathericons.com |
| https://svgrepo.com/ |
| https://iconic.app |
| https://icomoon.io/ |
| https://iconscout.com/unicons |
| https://holasvg.com/icons |
| https://fontello.com/ |
| https://fontastic.me/ |

[⬆ back to top](#table-of-contents)

## Fonts:

| Website |
| ------- |
| https://fonts.google.com |  
| https://fontspace.com |  
| https://1001fonts.com |  
| https://fontsquirrel.com |
| https://ffonts.net |  
| https://fontfabric.com |  
| https://urbanfonts.com |  

[⬆ back to top](#table-of-contents)

## Youtube Channels:

| Website |
| ------- |
| [Traversy Media](https://www.youtube.com/c/TraversyMedia) |  
| [freeCodeCamp.org](https://www.youtube.com/c/FreeCodeCamp) |  
| [The Net Ninja](https://youtube.com/c/TheNetNinja) |  
| [Google Chrome Developers](https://www.youtube.com/c/GoogleChromeDevelopers) |  
| [Derek Banas](https://www.youtube.com/c/derekbanas) |  
| [Academind](https://www.youtube.com/c/Academind) |  
| [CodingTech](https://www.youtube.com/c/CodingTech) |  
| [Codú Community](https://www.youtube.com/channel/UCvI5azOD4eDumpshr00EfIw) |  
| [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/) |  
| [Dev Ed](https://www.youtube.com/c/DevEd/) |
| [CodeSTACKr](https://youtube.com/c/codeSTACKr) |
| [Coding Addict](https://www.youtube.com/c/CodingAddict) |
| [Kevin Powell](https://youtube.com/kepowob) |
| [Code with Ania Kubów](https://youtube.com/c/AniaKub%C3%B3w) |
| [The Coding Train](https://www.youtube.com/c/TheCodingTrain/) |
| [kudvenkat](https://www.youtube.com/user/kudvenkat) | 
| [Program With Erik](https://www.youtube.com/c/ProgramWithErik) | 
| [Coder Coder](https://www.youtube.com/c/TheCoderCoder)|
| [clever programmer](https://www.youtube.com/channel/UCqrILQNl5Ed9Dz6CGMyvMTQ) |
| [JavaScript Mastery](https://www.youtube.com/c/JavaScriptMastery) |
| [Adrian Twarog](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ) |
| [Wes Bos](https://www.youtube.com/wesbos) |
| [Adrian Twarog](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ) | 
| [DesignCourse](https://www.youtube.com/c/DesignCourse) |

[⬆ back to top](#table-of-contents)

## Podcasts:

| Website |
| ------- |
| [Syntax](https://syntax.fm/) |  
| [Fullstack radio](https://fullstackradio.com) |  
| [The Changelog](https://changelog.com/) |  
| [The Laracasts Snippet](https://laracasts.com/podcast) |  
| [Front End Happy Hour](https://frontendhappyhour.com/) |  
| [JavaScript Jabber](https://devchat.tv/podcasts/js-jabber/) |  
| [Commit Your Code!](https://anchor.fm/commityourcode) |  
| [Shop Talk](https://shoptalkshow.com/) |  
| [Ladybug Podcast](https://www.ladybug.dev/) |  
| [CodePen Radio](https://blog.codepen.io/radio/) |  
| [JAMStack Radio](https://www.heavybit.com/library/podcasts/jamstack-radio/) |  
| [Modern Web](https://www.thisdot.co/modern-web) | 
| [DevDiscuss](https://dev.to/devdiscuss) |
| [DevNews](https://dev.to/devnews) |
| [React Native Radio](https://reactnativeradio.com/) |
| [Html All The Things](https://podcast.htmlallthethings.com/) |
| [The CSS Podcast](https://thecsspodcast.libsyn.com/) |

[⬆ back to top](#table-of-contents)

## Code Editors:

| Website |
| ------- |
| [VS Code](https://code.visualstudio.com/) |  
| [Sublime Text](https://www.sublimetext.com/) |  
| [Atom](https://atom.io/) |  
| [Brackets](http://brackets.io/) |  
| [Vim](https://www.vim.org/) |  
| [Spacemacs](https://www.spacemacs.org/) |
| [Emacs](https://www.gnu.org/software/emacs/) |
| [Neovim](https://neovim.io/) |

[⬆ back to top](#table-of-contents)

## Color Palettes:

| Website |
| ------- |
| https://coolors.co |  
| https://colorhunt.co |  
| https://paletton.com |  
| https://color-hex.com |  
| https://mycolor.space | 
| https://flatuicolors.com | 
| https://color.adobe.com | 
| https://htmlcolorcodes.com |
| https://colorsinspo.com |
| https://uigradients.com |
| https://www.colorion.co/ |

[⬆ back to top](#table-of-contents)

## UI Inspiration:

| Website |
| ------- |
| https://uimovement.com |  
| https://uigarage.net |  
| https://collectui.com |  
| https://httpster.net |   
| https://www.awwwards.com |
| https://dribbble.com |
| https://onepagelove.com |
| https://www.behance.net |
| https://uidesigndaily.com |

[⬆ back to top](#table-of-contents)

## Docs:

| Website |
| ------- |
| https://developer.mozilla.org |  
| https://w3schools.com |  
| https://w3docs.com |  
| https://devdocs.io |  
| https://free-for.dev |  

[⬆ back to top](#table-of-contents)

## Animation Libraries:

| Website |
| ------- |
| [CSShake](https://elrumordelaluz.github.io/csshake/) |  
| [Animate.css](https://animate.style/) |  
| [AnimeJS](https://animejs.com/) |  
| [GreenSock (GSAP)](https://greensock.com/gsap/) |  
| [Magic Animations](https://www.minimamente.com/project/magic/) |  
| [Hover css](https://ianlunn.github.io/Hover/) |  
| [AniJS](https://anijs.github.io/) |  
| [Wicked CSS](https://kristofferandreasen.github.io/wickedCSS/) |  
| [Tuesday](http://shakrmedia.github.io/tuesday/) |  
| [Mo.js](https://mojs.github.io/)|  
| [Bounce.js](http://bouncejs.com/) | 
| [tsParticles](https://particles.matteobruni.it) |
| [AOS](https://michalsnik.github.io/aos/) |
| [Velocity.js](http://velocityjs.org/) |
| [Popmotion](https://popmotion.io/) |
| [Snap.svg](http://snapsvg.io/) |
| [Animista](https://animista.net/) |
| [Lottie-Player](https://lottiefiles.com/web-player) |

[⬆ back to top](#table-of-contents)

## Charts:

| Website |
| ------- |
| [Chart.js](https://www.chartjs.org/) |  
| [D3.js](https://d3js.org/) |  
| [three.js](https://threejs.org/) | 
| [amCharts](https://www.amcharts.com/) |
| [Charts.css](https://chartscss.org/) |

[⬆ back to top](#table-of-contents)

## Chrome Extensions:

| Website |
| ------- |
| [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) |  
| [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce) |  
| [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) |  
| [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc) |  
| [Lorem Ipsum Generator](https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb) | 
| [daily.dev - News for Busy Developers](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied?hl=en) |
| [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) |
| [Checkbot - SEO, speed & security checker](https://chrome.google.com/webstore/detail/checkbot-seo-web-speed-se/dagohlmlhagincbfilmkadjgmdnkjinl) |  
| [Performance-Analyser](https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf) |
| [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en) |  
| [Visbug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/related) |

[⬆ back to top](#table-of-contents)

## Website Optimization Tools:

| Website |
| ------- |
| [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) |  
| [GTmetrix](https://gtmetrix.com/) |  
| [WebPageTest](https://www.webpagetest.org) |  
| [Yslow](http://yslow.org/) | 
| [web.dev](https://web.dev/measure/) | 
| [asayer](https://asayer.io/) | Ps.: Has a great Blog

[⬆ back to top](#table-of-contents)

## HTML/CSS/JavaScript templates:

| Website |
| ------- |
| https://inovatik.com | 
| https://www.tooplate.com | 
| https://html5up.net | 
| https://templatemo.com | 
| https://uideck.com | 
| https://freehtml5.co | 
| https://www.zerotheme.com |
| https://bootstrapmade.com |

[⬆ back to top](#table-of-contents)

## Newsletters:

| Website | Topics |
| ------- | ------ |
| [Smashing Newsletter](https://www.smashingmagazine.com/the-smashing-newsletter/) | Front-end and UX. |
| [Frontend Focus](https://frontendfoc.us/) | HTML, CSS, WebGL, Canvas, browser tech, and more. |
| [CSS Weekly](https://css-weekly.com/) | CSS. |
| [JavaScript Weekly](https://javascriptweekly.com/) | JavaScript. |
| [Accessibility Weekly](https://a11yweekly.com/) | Accessibility. |
| [RWD Weekly Newsletter](https://responsivedesign.is/newsletter/) | Responsive web design. |
| [JAMstacked](https://jamstack.email/) | JAMstack ecosystem. |
| [UI Dev Newsletter](https://mentor.silvestar.codes/reads/) | User Interface development. |
| [Go Make Things](https://gomakethings.com/) | Daily Vanilla JavaScript. |

[⬆ back to top](#table-of-contents)

## CSS Generators:

| Website | Description |
| ------- | ------ |
| [Glassmorphism Generators](https://markodenic.com/tools/glassmorphism-css-generator/) | Use Glassmorphism Generator to create a stunning effect for your projects. |
| [Buttons Generator](https://markodenic.com/tools/buttons-generator/) | An online gallery of 100+ button designs you can easily copy and use in your projects. |
| [Layoutit Grid](https://grid.layoutit.com/) | Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator. |
| [CSS Gradient Editor](https://cssgradienteditor.com/) | You may only need this tool for creating CSS gradients and patterns. |
| [Hola SVG Loaders Generator](https://holasvg.com/loaders/) | SVG Loaders Generator with Sass and SMIL options |

## Online Tools:

| Website | Description |
| ------- | ------ |
| [QR Code Generator](https://markodenic.com/tools/qr-code-generator/) | Use QR code generator to easily create a QR code for your project. |
| [Google Analytics Checker](https://www.statsglitch.com/google-analytics-checker) | Scan your project to ensure that Google Analytcs tag is properly set. |
| [Gradient Art](https://gra.dient.art/) | An advanced CSS gradient editor with layering, design tools and free cloud storage |

[⬆ back to top](#table-of-contents)

## UI Components:

| Website | Description |
| ------- | ------ |
| [CssLayout](https://csslayout.io/) | A site with multiple css code snippets for very frequently used components in day to day web pages | 

[⬆ back to top](#table-of-contents)

## Vue UI libraries:

| Website | Description |
| ------- | ------ |
| [Vuetify](https://vuetifyjs.com/) | Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze. Build amazing applications with the power of Vue, Material Design and a massive library of beautifully crafted components and features. |
| [Vue Material](https://vuematerial.io/) | Simple, lightweight and built exactly according to the Google Material Design specs. |
| [BootstrapVue](https://bootstrap-vue.org/) | BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup. |

[⬆ back to top](#table-of-contents)

## React UI libraries:

| Website | Description |
| ------- | ------ |
| [Material-UI](https://material-ui.com/) | Simple and customizable component library to build faster, beautiful, and more accessible React applications. |
| [Ant Design](https://ant.design/) | An enterprise-class UI design language and React UI library. |
| [React Bootstrap](https://react-bootstrap.github.io/) | Bootstrap components built with React. |

[⬆ back to top](#table-of-contents)

## Angular UI libraries:

| Website | Description |
| ------- | ------ |
| [Taiga UI](https://taiga-ui.dev/) | A powerful set of open source components for Angular |

[⬆ back to top](#table-of-contents)

## Others:

| Website | Description |
| ------- | ------ |
| [Markdown Preview](https://freecodetools.org/markdown-preview/) | Markdown Editor with instant preview using GitHub CSS. |
| [JavaScript Quiz](https://javascriptquiz.com) | JavaScript Quiz - Check your knowledge by having fun. |
| [CookieBubble](https://cookiebubble.netlify.app) | The easy way to inform users that your website is using cookies. |
| [Developer Updates](https://www.developerupdates.com) | Keeps you updated one everything going on in the software developement world |
| [Boxy SVG Editor](https://boxy-svg.com/) | SVG Editing Tool - Here you can easily edit and save any SVG file |
| [Cssrepo](https://cssrepo.com/)| A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS |
[⬆ back to top](#table-of-contents)

[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg


---
To Contribute send a Pull request to the owner [on this Repo](https://github.com/markodenic/web-development-resources/pulls)