Web Development Resources Overview
Awesome Web Development Resources.
🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 markodenic/web-development-resources · ⭐ 7.4K · 🏷️ Front-End Development
Awesome Web Development Resources 
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 at Web Development Resources.
Table of Contents
- Awesome Web Development Resources
- Table of Contents
- Hosting:
- Learning Platforms:
- Coding Challenge Platforms:
- Freelancing platforms:
- Remote Jobs:
- Photos:
- Videos:
- Illustrations:
- Icons:
- Fonts:
- Youtube Channels:
- Podcasts:
- Code Editors:
- Color Palettes:
- UI Inspiration:
- Docs:
- Animation Libraries:
- Charts:
- Chrome Extensions:
- Website Optimization Tools:
- HTML/CSS/JavaScript templates:
- Newsletters:
- CSS Generators:
- CSS Games:
- Online Tools:
- UI Components:
- Vue UI libraries:
- React UI libraries:
- Angular UI libraries:
- Sustainability:
- Others:
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://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. | |
| https://pages.cloudflare.com/ | Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. It offers free unlimited bandwidth. | |
| https://supabase.com | Supabase is an open source Firebase alternative. Start your project with a Postgres Database, Authentication, instant APIs, Realtime | subscriptions and Storage. |
| https://railway.app/ | Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud. | |
| https://fly.io/ | Fly is a platform for running full stack apps and databases close to your users. We’ve been hammering on this thing since 2017, and we think it’s pretty great. | |
| https://kinsta.com/static-site-hosting/ | Kinsta provides all-in-one cloud hosting for web apps, databases, WordPress sites and static websites. Fast and secure deployments from GitHub, GitLab and Bitbucket to an infrastructure powered by Google Cloud Platform and Cloudflare. | |
| https://fleek.co/ | Fleek makes it easy to build websites and apps on the new open web: permissionless, trustless, censorship resistant, and free of centralized gatekeepers. |
Learning Platforms:
Coding Challenge Platforms:
Freelancing platforms:
Remote Jobs:
Photos:
Videos:
Illustrations:
Icons:
Fonts:
Youtube Channels:
Podcasts:
Code Editors:
| Website |
|---|
| VS Code |
| Sublime Text |
| Brackets |
| emacs |
| Vim |
| Spacemacs |
| Emacs |
| Neovim |
| Fleet |
| CodeLobster |
Color Palettes:
UI Inspiration:
| Website |
|---|
| https://websitevice.com/ |
| https://httpster.net |
| https://www.awwwards.com |
| https://dribbble.com |
| https://onepagelove.com |
| https://www.behance.net |
| https://tympanus.net/codrops |
| https://landings.dev |
Docs:
| Website |
|---|
| https://developer.mozilla.org/en-US/ |
| https://w3schools.com |
| https://w3docs.com |
| https://devdocs.io |
Animation Libraries:
Charts:
| Website |
|---|
| Chart.js |
| D3.js |
| three.js |
| amCharts |
| Charts.css |
| ECharts |
Chrome Extensions:
Website Optimization Tools:
| Website |
|---|
| Google PageSpeed Insights |
| GTmetrix |
| WebPageTest |
| Yslow |
| web.dev |
| Optimizilla |
| SEOTester |
HTML/CSS/JavaScript templates:
Newsletters:
| Website | Topics |
|---|---|
| Marko Tech Tips | Useful tech tips, directly to your inbox. |
| 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. |
| JAMstacked | JAMstack ecosystem. |
| UI Dev Newsletter | User Interface development. |
| Go Make Things | Daily Vanilla JavaScript. |
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 |
| 9elements - Fancy Border Radius | 9elements 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. |
| Blobmaker | Blobmaker 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 Generator | A free online tool for quickly generating CSS3 snippets, such as for effects, gradients and animations. |
| Neumorphism | A free online tool for designing attractive UI with colors, gradients and shadows.. |
| Scrollbar.app | A simple online tool for creating custom scrollbars for the web. |
| Code Magic | A free tool to make CSS easier by generating Tailwind and CSS code for effects, gradients and inputs |
CSS Games:
| Website | Description |
|---|---|
| Flexbox froggy | Flexbox Froggy is an interactive game that helps users learn and practice the CSS Flexbox layout. |
| Knights of the Flexbox Table | Set of challenges where we must use Flexbox properties to position and align elements on the screen to complete a medieval-themed game layout. |
| Grid garden | A Grid Garden is an interactive game that helps users learn and practice the CSS Grid layout. |
| Grid attack | Learn and practice the CSS Grid layout |
| CSS Diner | Fun and interactive way to learn how to select elements on a web page using CSS. |
| Guess CSS | Another Fun and interactive way to learn CSS. |
| CSS Speedrun | A CSS speedrun is a challenge to see how quickly a developer can complete a task using only CSS (Cascading Style Sheets). |
| Anchoreum | A game for learning CSS anchor positioning. |
Online Tools:
| Website | Description |
|---|---|
| PRM | Project & Profile Readme Maker : easiest way to create amazing readme's for your github projects and profile |
| 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 |
| JSON Crack | A simple tool to visualize JSON Code in a neat tree structure |
| Codepng | Convert your source code into awesome shareable images |
| tablebackend.com | A backend for your simple projects using oowerful canvas-based data grid for handling millions of rows. |
| Markdown Tools | A suite of free tools for converting HTML, CSVs, PDFs, and Excel files to and from Markdown |
| OnlineInterview.io | Free interviewing platform with shared code editor, drawing board and video chat. |
UI Components:
| Website | Description |
|---|---|
| Flowbite | Open-source UI component library based on Tailwind CSS featuring dark mode and interactive elements |
| TailGrids | 300+ Free and Premium Tailwind CSS UI Components and Sections |
| FlyonUI | The Easiest Components Library For Tailwind CSS. |
| Ayro UI Bootstrap | Bootstrap UI components, snippets and sections for modern web apps |
| uiverse | Open-Source UI elements made with CSS & HTML where anyone can contribute. |
| shadcn/ui | Open-Source UI components for React projects, that you can easily copy and paste into your apps. |
| Headless UI | Completely unstyled, fully accessible UI components, designed to integrate with Tailwind CSS. |
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. |
| Quasar framework | Quasar is an MIT licensed open-source Vue.js based framework. It enables web developers to create responsive++ websites/apps in various formats: SPAs, SSR (+ optional PWA client takeover), PWAs, BEX, Mobile Apps (Android, iOS, etc.), and Multi-platform Desktop Apps (using Electron). Quasar's motto is "write code once, deploy it as a website, Mobile App, and/or Electron App." It provides a state-of-the-art CLI and efficient Quasar web components, eliminating the need for additional heavy libraries like Hammer.js, Moment.js, or Bootstrap. |
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. |
| Prime React | The ultimate collection of design-agnostic, flexible and accessible React UI Components. |
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. |
| Angular Material | Angular Material is a UI library component developed by Google in 2014. |
Sustainability
| Website | Description |
|---|---|
| Beacon | Web page carbon calculator to help estimate and lower the carbon emissions of web pages |
| Website Carbon | The first web page carbon calculator |
| Ecograder | Web page carbon calculator with additional information on UX |
| Web Sustainability Guidelines | Sustainable design guidelines produced by W3C |
| Sustainable Web Design | Design guidelines put together by a community of designers lead by Wholegrain Digital and MightyBytes |
| The Green Web Foundation | A database of web hosts that use renewable energy or are carbon neutral through offsets also authors of CO2.js |
| Tech Carbon Standard | A standardised model of tech emissions to help map out emissions created by tech within an organisation - touches on web and Saas |
Others:
| Website | Description |
|---|---|
| MDB: Markdwon Badges | Generate amazing svg markdown badges within few clicks |
| 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 |
| MakeMeta | Effortlessly generate Meta Tags for your website! |
| PerfectBugReport.io | A simple checklist of the essential items to include in bug reports. |
| Vue CheatSheet | an interactive cheatsheet of Vue, Vue Router, and Pinia. |
Made by Marko.
Similar amazing projects: Public APIs - Dev Resources