Free Web Development Resources

Free Web Development Resources

Enjoy!

Learning Platforms:

freecodecamp.org
codecademy.com
javascript30.com
frontendmentor.io
testautomationu.applitools.com
coursera.org
khanacademy.org
sololearn.com

Free Hosting:

netlify.com
firebase.google.com
aws.amazon.com
heroku.com
pages.github.com
vercel.com
surge.sh
render.com
docs.gitlab.com/ee/user/project/pages

Coding Challenge Platforms:

codewars.com
topcoder.com
codingame.com
hackerrank.com
projecteuler.net
coderbyte.com
codechef.com
exercism.io
leetcode.com
spoj.com

Freelancing platforms:

📌 toptal.com
📌 upwork.com
📌 freelancer.com
📌 peopleperhour.com
📌 simplyhired.com
📌 envato.com
📌 guru.com
📌 fiverr.com
📌 hireable.com
📌 6nomads.com

List of websites to find remote jobs:

📌 flexjobs.com
📌 remote.co/remote-jobs
📌 justremote.co
📌 weworkremotely.com
📌 remoteok.io
📌 jobspresso.co
📌 europeremotely.com
📌 wfh.io

Photos:

📷 unsplash.com
📷 pixabay.com
📷 pexels.com

Illustrations:

undraw.co/illustrations
drawkit.io
icons8.com/ouch
iradesign.io
interfacer.xyz
blush.design

Icons:

fontawesome.com
flaticon.com
icons8.com
material.io/resources/icons
iconmonstr.com

Fonts:

✍️ fonts.google.com
✍️ fontspace.com
✍️ 1001fonts.com
✍️ 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:

🎨 coolors.co
🎨 colorhunt.co
🎨 paletton.com
🎨 color-hex.com
🎨 mycolor.space

UI Inspiration:

landingexam.com
uimovement.com
uigarage.net
collectui.com
httpster.net

Docs:

🔥 developer.mozilla.org
🔥 w3schools.com
🔥 w3docs.com
🔥 devdocs.io
🔥 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:

WebsiteDescription
Glassmorphism GeneratorUse Glassmorphism Generator to create a stunning effect for your projects.
Button GeneratorAn online gallery of 100+ button designs you can easily copy and use in your projects.
Layoutit GridQuickly 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 EditorYou may only need this tool for creating CSS gradients and patterns.
Hola SVG Loaders GeneratorSVG Loaders Generator with Sass and SMIL options
Shape DividerA free tool to make it easier for designers and developers to export a beautiful SVG shape divider for their latest project.
BEAUBUS Patterns150+ free SVG patterns and CSS background images generator
9elements - Fancy Border Radius9elements 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.
BlobmakerBlobmaker 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 GeneratorA free online tool for quickly generating CSS3 snippets, such as for effects, gradients and animations.
NeumorphismA 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