Free Web Development Resources
Enjoy!
Learning Platforms:
⧩ https://freecodecamp.org
⧩ https://codecademy.com
⧩ https://javascript30.com
⧩ https://frontendmentor.io
⧩ https://testautomationu.applitools.com
⧩ https://coursera.org
⧩ https://khanacademy.org
⧩ https://sololearn.com
Free Hosting:
⧩ 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
Coding Challenge Platforms:
⧩ 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
Freelancing platforms:
📌 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
List of websites to find remote jobs:
📌 https://flexjobs.com
📌 https://remote.co/remote-jobs
📌 https://justremote.co
📌 https://weworkremotely.com
📌 https://remoteok.io
📌 https://jobspresso.co
📌 https://europeremotely.com
📌 https://wfh.io
Photos:
📷 https://unsplash.com
📷 https://pixabay.com
📷 https://pexels.com
Illustrations:
⧩ https://undraw.co/illustrations
⧩ https://drawkit.io
⧩ https://icons8.com/ouch
⧩ https://iradesign.io
⧩ https://interfacer.xyz
⧩ https://blush.design
Icons:
⧩ https://fontawesome.com
⧩ https://flaticon.com
⧩ https://icons8.com
⧩ https://material.io/resources/icons
⧩ https://iconmonstr.com
Fonts:
✍️ https://fonts.google.com
✍️ https://fontspace.com
✍️ https://1001fonts.com
✍️ https://fontsquirrel.com
Youtube Channels:
🔗 Traversy Media
🔗 FreeCodeCamp
🔗 The Net Ninja
🔗 Google Chrome Developers
🔗 The New Boston
🔗 Derek Banas
🔗 Academind
Podcasts:
🔗 Syntax
🔗 Fullstack radio
🔗 The Changelog
🔗 The Laracasts Snippet
🔗 Front End Happy Hour
🔗 JavaScript Jabber Archives
🔗 Commit Your Code!
🔗 Shop Talk
🔗 Ladybug Podcast
🔗 CodePen Radio
🔗 JAMStack Radio
🔗 Modern Web
Code Editors:
🚀 Visual Studio Code [VS Code]
🚀 Sublime Text
🚀 Atom
🚀 Brackets
🚀 Vim
Color Palettes:
🎨 https://coolors.co
🎨 https://colorhunt.co
🎨 https://paletton.com
🎨 https://color-hex.com
🎨 https://mycolor.space
UI Inspiration:
⧩ https://landingexam.com
⧩ https://uimovement.com
⧩ https://uigarage.net
⧩ https://collectui.com
⧩ https://httpster.net
Docs:
🔥 https://developer.mozilla.org
🔥 https://w3schools.com
🔥 https://w3docs.com
🔥 https://devdocs.io
🔥 https://free-for.dev
Animation Libraries:
⧩ Animista
⧩ CSShake
⧩ Animate.css
⧩ AnimeJS
⧩ GreenSock (GSAP)
⧩ Magic Animations
⧩ Hover css
⧩ AniJS
⧩ Wicked CSS
⧩ Tuesday
⧩ Mo.js
⧩ Bounce.js
⧩ Snap.svg
Charts / Data Visualization:
📊 Chart.js
📊 D3.js
📊 three.js
Chrome Extensions:
🔖 Web Developer
🔖 CSSViewer
🔖 Wappalyzer
🔖 JSONView
🔖 Lorem Ipsum Generator
Website Optimization Tools:
⚡ Google PageSpeed Insights
⚡ GTmetrix
⚡ WebPageTest
⚡ Yslow
CSS Generators:
| Website | Description |
| Glassmorphism Generator | Use Glassmorphism Generator to create a stunning effect for your projects. |
| Button Generator | An online gallery of 100+ button designs you can easily copy and use in your projects. |
| Layoutit Grid | 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 | You may only need this tool for creating CSS gradients and patterns. |
| Hola SVG Loaders Generator | SVG Loaders Generator with Sass and SMIL options |
| Shape Divider | A free tool to make it easier for designers and developers to export a beautiful SVG shape divider for their latest project. |
| BEAUBUS Patterns | 150+ free SVG patterns and CSS background images generator |
| 9elements - Fancy Border Radius | 9elements is a little tool, that helps you create your very own organic shape. When you use four/eight values specifying border-radius in CSS, you can create organic looking shapes. |
| Blobmaker | Blobmaker is a free generative design tool made with by z creative labs, to help you quickly create random, unique, and organic-looking SVG shapes. |
| Toptal CSS3 Generator | A free online tool for quickly generating CSS3 snippets, such as for effects, gradients and animations. |
| Neumorphism | A free online tool for designing attractive UI with colors, gradients and shadows.. |
Initially created on Twitter:
If you liked this article, be sure to ❤️ it.
This article is a repost from my blog. Find the original post here: Free Web Development Resources.
Let's keep in touch:
Blog: markodenic.com
Twitter: @denicmarko
Github: github.com/MarkoDenic
Codepen: codepen.io/denic
