DEV Community

AGUNWA CALISTUS
AGUNWA CALISTUS

Posted on

100+ FREE Resources Every Web Developer Must Try

In this post, I’ll share 100+ free web development resources including APIs,hosting platforms,cheat sheets,icons,templates,fonts, color resources,learning platforms, CSS games,code editors and JavaScript animation libraries.

Let’s jump right into it!

FREE Resources to Learn Web Development 🔥

Websites
.freeCodeCamp
. MDN Web Docs
. W3School
. Scrimba
. Cadecademy
. TheOdinProject
. Frontend Mentor
. JavaScript30
. Coursera
. Khan Academy

YouTube Channels

. Traversy Media
. The Net Ninja
. Code With Harry
. Web Dev Simplified
. Coder Coder
. The Coding Train
. FreeCodeCamp

FREE Hosting Platforms for Your Websites 🔥

. Netlify : Deploy your web projects with ease.
. Render : Host web applications and static sites effortlessly.
. GitHub Pages: Host your static websites directly from your GitHub repository.
. Firebase Hosting: Scale your web apps effortlessly with Firebase.
. Vercel: Deploy websites and applications with automatic deployments.
. Cyclic.sh: Host your static sites with zero configuration.
. Appwrite: Open-source backend server for web and mobile developers.
. Supabase: Build modern apps with a scalable backend.
. InfinityFree: Free and unlimited web hosting with PHP, MySQL, and more.
. Surge: Static web publishing for front-end developers.

FREE APIs for Your Projects 🔥

. OpenWeatherMap API: Access current weather data for any location.
. News API: Retrieve live news articles from various sources.
. REST Countries API: Get information about countries worldwide.
. Chuck Norris Jokes API: Lighten up your projects with Chuck Norris jokes.
. Open Food Facts API: Access food product information and ingredients.
. GitHub API: Integrate GitHub functionalities into your applications.
. Reddit API: Fetch Reddit data, including posts and comments.
. OneDrive API: Manage files and folders on Microsoft OneDrive.
. Dogs API: Bring adorable dog images and information to your projects.
. GIPHY API: Integrate GIFs and stickers into your applications.
. VirusTotal API: Analyze suspicious files and URLs for malware.
. NASA API: Access a wealth of NASA data, including imagery and information.

FREE Sites for Vectors, Images, and Illustrations 🔥

. Freepik: Discover free vectors, photos, PSDs, and icons.
. Vecteezy: Find high-quality vector art, graphics, and illustrations.
. Unsplash: Access over a million free high-resolution photos.
. Pixabay: Explore a vast library of free images and videos.
. Flaticon: Download free icons, SVG, PSD, PNG, EPS format, or as ICON FONT.
. Openclipart: Share and use free clipart and images.
. SVGRepo: Download SVGs for free.
. Vectorportal: Free vectors, clip art, and icons.
. SVGBackgrounds: Customizable SVG patterns and backgrounds.
. FreeDesignFile: High-quality graphic design resources.
. Pexels: Find free stock photos and videos shared by talented creators.

FREE Icons for Your Projects 🔥

. FontAwesome
. Flaticon
. IconFinder
. MaterialIcon
. Icons8
. BoxIcons
. FeatherIcon
. IcoFont
. SVGHUB
. TablerIcon
. IconsMind
. SVGRepo

FREE Fonts for Your Projects 🔥

. Google Font
. 1001FreeFont
. FontJoy
. Fontsly
. FontSpace
. AbstractFont
. FontZone
. DevFonts
. DaFont
. FontSquirrel

FREE Color Resources for Your Projects 🔥

. Coolors
. Paletton
. Colorion
. ColorHunt
. ColorHexa
. Adobe Color
. ColorMind
. ColorPicker
. ColorKit
. MyColor
. ColorHub

FREE Cheat Sheet Sites🔥

. HTML Cheat Sheet: Quick reference guide for HTML elements and attributes.
. CSS Cheat Sheet: Comprehensive guide to CSS properties and selectors.
. JavaScript Cheat Sheet: Handy reference for JavaScript syntax and concepts.
. Git Cheat Sheet: Essential commands and workflows for Git.
. Markdown Cheat Sheet: Markdown syntax guide for creating rich text formatting.
. React Cheat Sheet: Quick overview of React concepts and syntax.
. Learn x in y minutes: Concise tutorials to learn various programming languages and tools quickly.
. SQL Cheat Sheet: Comprehensive SQL commands and queries reference.
. OverAPI: Collection of cheat sheets for various programming languages and frameworks.

FREE Sites for HTML/CSS Templates 🔥

. HTML5UP
. HTMLRev
. Free-CSS
. Templated
. FreeHTML5
. Start Bootstrap
. BootstrapMade
. Bootswatch
. BootstrapTeste
. Cruip
. Tooplate
. HTML5xCSS3

Learn CSS by Playing Games 🔥

. CSS Diner: Practice CSS selectors with a fun game.
. Flexbox Froggy: Learn CSS Flexbox by playing this game.
. Grid Garden: Master CSS Grid layout by playing this game.
. Flexbox Defense: A game to learn CSS Flexbox.
. CSSBattle: Compete against others by writing CSS code.
. Flexbox Zombies: Learn CSS Flexbox by playing this game.

FREE Code Editors 🔥

. Visual Studio Code (VS Code)
. Sublime Text
. Brackets
. Vim

JavaScript Animation Libraries 🔥
. Anime.js: Lightweight JavaScript animation library.
. ScrollReveal.js: Easily reveal elements as they enter the viewport.
. Popmotion: A functional, flexible JavaScript motion library.
. AniJS: Declarative handling library for CSS animations.
. Wow.js: Reveal CSS animation as you scroll down a page.
. Typed.js: A JavaScript library that types.
. Velocity.js: Accelerated JavaScript animation.
. GSAP: Professional-grade animation for the modern web.

That’s all for today.

I hope it was helpful.

Thanks for reading.

Keep Coding!!👨🏽‍💻

Top comments (30)

Collapse
 
pablouz_ms profile image
パブロ

very useful resources, thanks

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
megagig profile image
ANTHONY OBI

Thank you for providing me with these resources.

Collapse
 
hosseinyazdi profile image
Hossein Yazdi

You're welcome, thank you too! 🙌

Collapse
 
agunwachidiebelecalistus profile image
AGUNWA CALISTUS

Yes, WebCurate is also a great one 👏🏻

Collapse
 
lina_ch profile image
Lina Ch

This is an incredible resource for web developers at any level! With 100+ free tools and platforms listed, it's a treasure trove for anyone looking to enhance their web development skills. From learning platforms and cheat sheets to APIs and hosting solutions, there's something here for everyone. Dive into these resources to supercharge your projects and stay ahead in the ever-evolving world of web development.

Collapse
 
andreina_fernandez profile image
Andreina Fernandez • Edited

What would I do without you guys?

Thank you for all of the helpful information, I feel all I can do now is keep learning and excel in coding so I can repay/contribute in the future and show especially women that coding is fabulous, there are a couple of reasons why I mention that... It keeps you interested and challenged and it's the future of economic freedom for many of us.


Andreina

Collapse
 
agunwachidiebelecalistus profile image
AGUNWA CALISTUS

That’s alright. Just keep coding, keep learning

Collapse
 
kocreative profile image
Kat

Great list, thank you very much for putting it together!

Collapse
 
michael_chepala_7267688a0 profile image
Michael Chepala

Thanks For sharing :-)

Collapse
 
yusuke050 profile image
Lin Fan-Chiang

Thank you for sharing lists

Collapse
 
ayush-pr0 profile image
Ayush

Great sharing buddy! Useful recourses at one place 👌

Collapse
 
jeandedieuh profile image
Jean de Dieu HAGENIMANA

missing coolify.io in the category of "FREE Hosting Platforms for Your Websites", it is free and open-source, altelinative to horuku, netlify and vercel

Collapse
 
agunwachidiebelecalistus profile image
AGUNWA CALISTUS

Yes, there’re more to what I dropped.

Collapse
 
recoveringoverthinkr profile image
recoveringOverthinker

This is neat! Thanks for putting all this into a single place.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.