Awesome Web Development Resources Awesome

This is an awesome project about Web Development resources. ⚡

Resources are added frequently! ⚡

Enjoy!

If you like this repo, be sure to it.

Please read contributing guidelines before submitting new resources.


Initially created by Marko Denic on Twitter.


preview on the web


Table of Contents

Hosting:

Website Description
https://netlify.com Netlify unites an entire ecosystem of modern tools and services into a single, simple workflow for building high performance sites and apps.
https://firebase.google.com Firebase helps you build and run successful apps. It is backed by Google and loved by app development teams - from startups to global enterprises
https://aws.amazon.com Amazon Web Services offers a broad set of global cloud-based products and services help organizations move faster, lower IT costs, and scale.
https://heroku.com Heroku is the platform for building with modern architectures, innovating quickly, and scaling precisely to meet demand. It helps you focus and invest in your apps and not ops.
https://pages.github.com GitHub Pages are websites for you and your projects. It is hosted directly from your GitHub repository. You just have to edit, push, and your changes are live.
https://vercel.com Vercel combines the best developer experience with an obsessive focus on end-user performance. It enables frontend teams to do their best work. You just have to develop preview and ship.
https://surge.sh Surge is static web publishing for Front-End Developers. It is simple, single-command web publishing. It publishes HTML, CSS, and JS for free, without leaving the command line.
https://render.com Render is a unified cloud to build and run all your apps and websites with free TLS certificates, a global CDN, DDoS protection, private networks, and auto deploys from Git.
https://docs.gitlab.com/ee/user/project/pages GitLab Pages - static websites directly from a repository in GitLab. To publish a website one can use any static site generator or any plain written HTML, CSS, and JavaScript.
https://stormkit.io Stormkit can easily manage your frontend infrastructure. It integrates perfectly with your git flow. It helps you build, deploy and scale your web apps seamlessly.
https://www.digitalocean.com/ DigitalOcean has the cloud computing services you need, with predictable pricing, robust documentation, and scalability to support your growth at any stage. It is simpler cloud for happier devs to have better results.
https://www.000webhost.com/ 000webhostapp is zero cost website hosting with PHP, MySQL, Cpanel & no ads. Its servers use advanced firewalls and include DDoS protection.
https://infinityfree.net/ InfinityFree is fully featured, completely free website hosting with PHP, MySQL and no ads on site.

⬆ back to top

Learning Platforms:

Website
https://freecodecamp.org
https://www.lambdatest.com/learning-hub/
https://codecademy.com
https://javascript30.com
https://frontendmentor.io
https://testautomationu.applitools.com
https://coursera.org
https://edx.org
https://khanacademy.org
https://sololearn.com
https://www.theodinproject.com
https://javascript.info/
https://vueschool.io/
https://www.guru99.com/
https://trailhead.salesforce.com/
https://ocw.mit.edu/
https://open.appacademy.io/
https://web.dev/
https://scrimba.com
https://thegymnasium.com
https://www.amigoscode.com
https://cssbattle.dev/
https://bento.io/
https://fullstackopen.com/en/
https://upskillcourses.com/courses
https://www.geeksforgeeks.org/web-development/

⬆ back to top

Coding Challenge Platforms:

Website
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
https://codeforces.com/
https://codesignal.com/
https://frontendmentor.io
https://devchallenges.io
https://www.hackerearth.com
https://www.frontendpractice.com
https://www.codementor.io/projects
https://css-challenges.com/
https://100dayscss.com
https://codepip.com
https://triplebyte.com
https://www.w3schools.com/codegame/index.html
https://edabit.com

⬆ back to top

Freelancing platforms:

Website
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
https://www.truelancer.com/
https://www.gun.io/

⬆ back to top

Remote Jobs:

Website
https://flexjobs.com
https://remote.co/remote-jobs
https://justremote.co
https://weworkremotely.com
https://remoteok.io
https://himalayas.app
https://jobspresso.co
https://wfh.io
https://4dayweek.io
https://www.hiretechladies.com/
https://rafo.com.au/
https://nowhiteboard.org/
https://www.coolstartupjobs.com/
https://angel.co

⬆ back to top

Photos:

Website
https://unsplash.com
https://pixabay.com
https://pexels.com
https://reshot.com
https://librestock.com
https://visualhunt.com
https://freephotos.cc
https://picjumbo.com
https://www.pxfuel.com
https://www.splitshire.com

⬆ back to top

Illustrations:

Website
https://icons8.com/illustrations
https://www.opendoodles.com
https://undraw.co/illustrations
https://drawkit.io
https://icons8.com/ouch
https://iradesign.io
https://interfacer.xyz
https://blush.design
https://avataaars.com
https://storyset.com
https://themeisle.com/illustrations/
https://www.manypixels.co/gallery

⬆ back to top

Icons:

Website
https://fontawesome.com
https://flaticon.com
https://icons8.com
https://iconfinder.com
https://material.io/resources/icons
https://iconmonstr.com
https://heroicons.com
https://boxicons.com
https://css.gg/
https://lineicons.com/
https://icons.eosdesignsystem.com/
https://icons.modulz.app
https://remixicon.com
https://tablericons.com
https://simpleicons.org
https://feathericons.com
https://svgrepo.com/
https://iconic.app
https://icomoon.io/
https://iconscout.com/unicons
https://holasvg.com/icons
https://fontello.com/
https://fontastic.me/
https://ionic.io/ionicons
https://icons.getbootstrap.com/

⬆ back to top

Fonts:

Website
https://fonts.google.com
https://fontspace.com
https://1001fonts.com
https://fontsquirrel.com
https://ffonts.net
https://fontfabric.com
https://urbanfonts.com

⬆ back to top

Youtube Channels:

Website
Traversy Media
freeCodeCamp.org
The Net Ninja
Google Chrome Developers
Derek Banas
Academind
CodingTech
Codú Community
Web Dev Simplified
Dev Ed
CodeSTACKr
Coding Addict
Kevin Powell
Code with Ania Kubów
The Coding Train
kudvenkat
Program With Erik
Coder Coder
clever programmer
JavaScript Mastery
Adrian Twarog
Wes Bos
DesignCourse
Traversy Media
codedamn
ProgrammingWithMosh

⬆ back to top

Podcasts:

Website
Syntax
Fullstack radio
The Changelog
The Laracasts Snippet
Front End Happy Hour
JavaScript Jabber
Commit Your Code!
Shop Talk
Ladybug Podcast
CodePen Radio
JAMStack Radio
Modern Web
DevDiscuss
DevNews
React Native Radio
Html All The Things
The CSS Podcast

⬆ back to top

Code Editors:

Website
VS Code
Sublime Text
Atom
Brackets
emacs
Vim
Spacemacs
Emacs
Neovim

⬆ back to top

Color Palettes:

Website
https://coolors.co
https://colorhunt.co
https://paletton.com
https://color-hex.com
https://mycolor.space
https://flatuicolors.com
https://color.adobe.com
https://htmlcolorcodes.com
https://colorsinspo.com
https://uigradients.com
https://www.colorion.co/
https://www.gradientos.app

⬆ back to top

UI Inspiration:

Website
https://uimovement.com
https://uigarage.net
https://collectui.com
https://httpster.net
https://www.awwwards.com
https://dribbble.com
https://onepagelove.com
https://www.behance.net
https://uidesigndaily.com

⬆ back to top

Docs:

Website
https://developer.mozilla.org
https://w3schools.com
https://w3docs.com
https://devdocs.io
https://free-for.dev

⬆ back to top

Animation Libraries:

Website
CSShake
Animate.css
AnimeJS
GreenSock (GSAP)
Magic Animations
Hover css
AniJS
Wicked CSS
Tuesday
Mo.js
Bounce.js
tsParticles
AOS
Velocity.js
Popmotion
Snap.svg
Animista
Lottie-Player

⬆ back to top

Charts:

Website
Chart.js
D3.js
three.js
amCharts
Charts.css
ECharts

⬆ back to top

Chrome Extensions:

Website
Web Developer
CSSViewer
Wappalyzer
JSONView
Lorem Ipsum Generator
daily.dev - News for Busy Developers
Lighthouse
Checkbot - SEO, speed & security checker
Performance-Analyser
WhatFont
Visbug
Colorzilla

⬆ back to top

Website Optimization Tools:

Website  
Google PageSpeed Insights  
GTmetrix  
WebPageTest  
Yslow  
web.dev  
asayer Ps.: Has a great Blog
Optimizilla  

⬆ back to top

HTML/CSS/JavaScript templates:

Website
https://inovatik.com
https://www.tooplate.com
https://html5up.net
https://templatemo.com
https://uideck.com
https://freehtml5.co
https://www.zerotheme.com
https://bootstrapmade.com
https://graygrids.com
https://tailwindtemplates.co/
https://themeselection.com/

⬆ back to top

Newsletters:

Website Topics
Smashing Newsletter Front-end and UX.
Frontend Focus HTML, CSS, WebGL, Canvas, browser tech, and more.
CSS Weekly CSS.
JavaScript Weekly JavaScript.
Accessibility Weekly Accessibility.
RWD Weekly Newsletter Responsive web design.
JAMstacked JAMstack ecosystem.
UI Dev Newsletter User Interface development.
Go Make Things Daily Vanilla JavaScript.

⬆ back to top

CSS Generators:

Website Description
Glassmorphism Generators Use Glassmorphism Generator to create a stunning effect for your projects.
Buttons 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

Online Tools:

Website Description
QR Code Generator Use QR code generator to easily create a QR code for your project.
Google Analytics Checker Scan your project to ensure that Google Analytcs tag is properly set.
Gradient Art An advanced CSS gradient editor with layering, design tools and free cloud storage
JSONT A simple and powerful JSON formatting tool
Codepng Convert your source code into awesome shareable images

⬆ back to top

UI Components:

Website Description
CssLayout A site with multiple css code snippets for very frequently used components in day to day web pages
TailGrids Handcrafted Tailwind CSS UI Components
Ayro UI Bootstrap Bootstrap UI components for modern web apps
UI Hut Free (and premium) UI compontents or templates for Bootstrap, figma, XD, PSD etc..

⬆ back to top

Vue UI libraries:

Website Description
Vuetify Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze. Build amazing applications with the power of Vue, Material Design and a massive library of beautifully crafted components and features.
Vue Material Simple, lightweight and built exactly according to the Google Material Design specs.
BootstrapVue BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

⬆ back to top

React UI libraries:

Website Description
Material-UI Simple and customizable component library to build faster, beautiful, and more accessible React applications.
Ant Design An enterprise-class UI design language and React UI library.
React Bootstrap Bootstrap components built with React.
Semantic UI React Semantic UI React is the official React integration for Semantic UI .
Chakra UI A simple, modular and accessible component library that gives you the building blocks you need to build your React applications
NativeBase NativeBase is an accessible, utility-first component library that helps you build consistent UI across Android, iOS and Web.

⬆ back to top

Angular UI libraries:

Website Description
Taiga UI A powerful set of open source components for Angular
PrimeNG Angular UI Component Library featuring elegant, high-performance, accessible and fully customizable UI Components.

⬆ back to top

Others:

Website Description
Markdown Preview Markdown Editor with instant preview using GitHub CSS.
JavaScript Quiz JavaScript Quiz - Check your knowledge by having fun.
CookieBubble The easy way to inform users that your website is using cookies.
Developer Updates Keeps you updated one everything going on in the software developement world
Boxy SVG Editor SVG Editing Tool - Here you can easily edit and save any SVG file
Cssrepo A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS
Web Searcher Create Open Graph, Twitter and basic meta tags easily

⬆ back to top