pierregirou/tools-for-web-developers

Tools for web developers this repository contains a best and useful tools for web developers what we can use in our daily professional life like css code generators , ui generators , color generators , animation libraries , free icons, free vector , cheatsheet , editor playground, vs code extensions, chrome extensions etc...

---

Tools For Web Developers

This is an awesome project about Web Development tools. ⚡

Resources are added frequently! ⚡

Enjoy!

If you like this repo, be sure to ⭐ it.

Created by Sumit Harijan

Table of Contents

---

• CSS-Generators
• VS-Code-extensions
• Vector-images
• Icons
• Image-enhancer:
• Animation libraries
• Cheatsheet
• Website for code snippets
• Editor & playground
• Hosting
• APIs
• React UI Libraries
• QNA Websites
• Chrome extensions

---

CSS-Generators:

Website
Cubic Bezier https://cubic-bezier.com
BGJar https://bgjar.com
Smooth Shadow https://shadows.brumm.af
Clip path https://bennettfeely.com/clippy
Get waves https://getwaves.io
Wait animate https://waitanimate.wstone.io
Keyframes https://keyframes.app
CSS Typeset http://csstypeset.com
Blob maker https://www.blobmaker.app
Fancy border radius https://9elements.github.io/fancy-border-radius
Neumorphism https://neumorphism.io/#e0e0e0
Glassmorphism https://hype4.academy/toolsglassmorphism-generator
Button https://www.bestcssbuttongenerator.com

⬆ back to top

VS-Code-extensions:

Website
Auto rename tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Bracket Pair Colorizer https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Codesnap https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
CSS Formatter https://marketplace.visualstudio.com/items?itemName=aeschli.vscode-css-formatter
ES7 React/Redux/GraphQL/React-Native snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
GitLens — Git supercharged https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
HTML Snippets https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
indent-rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
JavaScript (ES6) code snippets https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
Liver server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live share https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
Markdown all in one https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
Material Icon Theme https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

⬆ back to top

Vector-images:

Website
Undraw https://undraw.co
FreeVectors https://www.freevectors.net
Freepik https://www.freepik.com
Humaans https://www.humaaans.com

⬆ back to top

Icons:

Website
Flaticon https://www.flaticon.com
Icons8 https://icons8.com/icons/set/website
Fontawesome icons https://fontawesome.com
Iconfinder https://www.iconfinder.com
GraphicBurger https://graphicburger.com/icons-set/
React icons https://react-icons.github.io/react-icons
Material ui icons https://mui.com/components/material-icons

⬆ back to top

Image-enhancer:

Website
Img upscaler https://imgupscaler.com
Upscale pics https://upscalepics.com
Img larger https://imglarger.com/Enhancer
Adobe spark https://www.adobe.com/express/feature/image/enhance

⬆ back to top

Animation-libraries:

Website
Animista https://animista.net
Animate.css https://animate.style
Magic effects https://www.minimamente.com/project/magic
Hover.css https://ianlunn.github.io/Hover
CSS shake https://elrumordelaluz.github.io/csshake
Swiper.js https://swiperjs.com
Greensock https://greensock.com
Michalsnik https://michalsnik.github.io/aos
Three.js https://threejs.org
Splidejs https://splidejs.com

⬆ back to top

Cheatsheet

Website
html cheatsheet https://htmlcheatsheet.com
Grid layout https://grid.malven.co
flexbox https://flexbox.malven.co
Javascript cheatsheet https://ilovecoding.org/blog/js-cheatsheet
React cheatsheet http://www.developer-cheatsheets.com/react
GitSheet https://gitsheet.wtf
Media queries https://mac-blog.org.ua/css-3-media-queries-cheat-sheet
OverAPI https://overapi.com/javascript
Bootstrap 4 https://hackerthemes.com/bootstrap-cheatsheet
Can i use https://caniuse.com
Cheatography https://cheatography.com/programming

⬆ back to top

Website-for-code-snippets

Website
CSS Layout https://csslayout.io
Codepad https://codepad.co
Codemyui https://codemyui.com
CSS-tricks https://css-tricks.com/snippets
CSS snippets https://css-snippets.com/snippets
Codepen https://codepen.io/collection/DYpwPE
Free frontend https://freefrontend.com/css-snippets
30secondofcode https://www.30secondsofcode.org
HTML DOM https://htmldom.dev
1 LOC https://1loc.dev
Vanilla JavaScript Toolkit https://vanillajstoolkit.com
Thisthat https://thisthat.dev

⬆ back to top

Editor-and-playground

Website
Codesandbox https://codesandbox.io
Codepen https://codepen.com
VS Code online https://vscode.dev
VS Code https://code.visualstudio.com/download
Sublime text editor https://www.sublimetext.com/3
Markdown editor https://stackedit.io

⬆ back to top

Hosting

Website
AWS https://aws.amazon.com/free
Google Cloud Service https://cloud.google.com/free
Github Page https://pages.github.com
Netlify https://www.netlify.com
Firebase Hosting https://firebase.google.com/products/hosting?

⬆ back to top

APIs

Website
Google Web Fonts API https://developers.google.com/fonts?csw=1
OpenSocial http://www.opensocial.org
Instamojo https://www.instamojo.com/developers
YouTube APIs https://developers.google.com/youtube/v3
Twitter APIs https://developer.twitter.com/en
Facebook APIs https://developers.facebook.com
Unsplash https://unsplash.com/developers
Spotify https://developer.spotify.com/discover
Mailchimp https://mailchimp.com/developer
Disqus https://disqus.com/api/docs

⬆ back to top

React-ui-libraries

Website
Ant design https://ant.design
MATERIAL-UI https://mui.com
React Bootstrap https://react-bootstrap.github.io
React Toolbox http://react-toolbox.io
Rebass https://rebassjs.org
Evergreen https://evergreen.segment.com

⬆ back to top

QNA-websites

Website
StackOverflow https://stackoverflow.com
Quora https://quora.com
Reddit REDDIT.com
StackExchange https://stackexchange.com

⬆ back to top

Chrome-extensions

Website
Gofullpage
CSSViewer
Fonts Ninja
ColorZilla
Window Resizer
Wappalyzer
Rwd tester
JSON Viewer
React developer tool

⬆ back to top