Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ivqonsanada/awesome-web-developer

My Web Developer Awesome List
https://github.com/ivqonsanada/awesome-web-developer

List: awesome-web-developer

awesome awesome-list lists resources

Last synced: 16 days ago
JSON representation

My Web Developer Awesome List

Awesome Lists containing this project

README 

        



**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_



- [Developer Roadmaps](#developer-roadmaps)

- [Learning Resource](#learning-resource)

- [Learn by Game](#learn-by-game)

- [Web Developer News](#web-developer-news)

- [Assets/Arts/Illustrations Resource](#assetsartsillustrations-resource)

- [Useful Online Tools](#useful-online-tools)

- [Another Awesome List](#another-awesome-list)





Awesome Web Developer



![](https://badgen.net/github/last-commit/ivqonsanada/awesome-web-developer)






# Developer Roadmaps



Step by step guide to becoming a modern:



- [Frontend Developer](https://roadmap.sh/frontend)

- [Backend Developer](https://roadmap.sh/backend)



# Learning Resource



- [booklets.io](https://www.booklets.io/) - Bite sized learning for creatives. Learn concepts from some of the world’s best designers.

- [internetingishard.com](https://internetingishard.com/) - Friendly web development tutorials for complete beginners



# Learn by Game



- [CSS Diner](https://flukeout.github.io/) - Learn CSS Selector

- [CSS Grid Garden](https://cssgridgarden.com/) - Learn CSS Grid

- [Flexbox Froggy](https://flexboxfroggy.com/) - Learn CSS Flexbox

- [Flexbox Zombie](https://mastery.games/p/flexbox-zombies) - Learn CSS Flexbox

- [Flexbox Defense](http://www.flexboxdefense.com/) - Learn CSS Flexbox by Playing Tower & Defense Game

- [Service Workies](https://serviceworkies.com/) - Learn Service Worker for Progressive Web Apps (PWA)

- [CSS Battle](https://cssbattle.dev/) - Try to use less/smallest code to replicate an Illustration

- [CodeCombat](https://codecombat.com/)Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.



# Web Developer News



- [frontendfoc.us](https://frontendfoc.us) - A once–weekly roundup of the best front-end news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more.



# Assets/Arts/Illustrations Resource



Free for Personal & Commercial Use.


Most of this use MIT-like license.



- [lukaszadam.com](https://lukaszadam.com/illustrations) - Free SVG Illustrations

- [humaaans.com](https://www.humaaans.com/) - Mix-&-match illustrations library

- [undraw.co](https://undraw.co/illustrations) - Open source illustrations for any idea

- [vecteezy.com](https://www.vecteezy.com/) - Download Free Vectors, Clipart Graphics, Vector Art & Design Templates

- [opendoodles.com](https://www.opendoodles.com/) - Free sketchy illustrations

- [illlustrations.co](https://illlustrations.co/) - Open source illustrations kit

- [iconscout.com](https://iconscout.com/paper-illustrations) - Free Paper illustrations library

- [retrovectors.com](http://retrovectors.com/category/free-vectors/) - Free Retro Vector

- [drawkit.io](https://www.drawkit.io/free) - Beautiful free illustrations

- [interfacer.xyz](https://interfacer.xyz/) - 300+ free design resources

- [fresh-folk.com](https://fresh-folk.com) - An illustration library of people and objects

- [isometric.online](https://isometric.online/) - Download free isometric illustrations

- [karthiksrinivas.in](https://www.karthiksrinivas.in/illustrations) - Free Illustrations

- [iradesign.io](https://iradesign.io/) - Build your own amazing illustrations

- [absurd.design](https://absurd.design/) - Free Surrealist Illustrations and Vector Art

- [stubborn.fun](https://stubborn.fun/) - Free Illustrations Generator

- [mixkit.co](https://mixkit.co/free-stock-art/) - Free stock illustrations, Beautiful Free Art

- [delesign.com](https://delesign.com/free-designs/graphics) - Royalty-free designs

- [unsplash.com](https://unsplash.com/) - Beautiful Free Images & Pictures

- [vectorportal.com](https://www.vectorportal.com/) - Download free vectors, clip art graphics, icons and images

- [icons8.com](https://icons8.com/ouch) - Download the free illustrations from top Dribbble artists to class up your product.

- [paaatterns](https://products.ls.graphics/paaatterns/) - Free Handcrafted patterns

- [openpeeps.com](https://www.openpeeps.com/) - A hand-drawn illustration library.



# Useful Online Tools



- [caniuse.com](https://caniuse.com/) - Can I use... Support tables for HTML5, CSS3, etc (Something like browser compatibility tables)

- [vecta.io](https://vecta.io/nano) - Compress SVG files

- [remove.bg](https://www.remove.bg/) - Automatically remove image background

- [purifycss.online](https://purifycss.online/) - Remove unused CSS code from your stylesheets



# Another Awesome List



-