Logo

0x3d.site

is designed for aggregating information and curating knowledge.

Home Resources Cheatsheets Public APIs Web Development Resources

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 at Web Development Resources.

Table of Contents

Hosting:

Website Description
Netlify Netlify unites an entire ecosystem of modern tools and services into a single, simple workflow for building high-performance sites and apps.
Firebase Firebase helps you build and run successful apps. It is backed by Google and loved by app development teams - from startups to global enterprises
Amazon Web Services Amazon Web Services offers a broad set of global cloud-based products and services help organizations move faster, lower IT costs, and scale.
GitHub Pages 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.
Vercel 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.
Surge 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.
Render 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.
GitLab 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.
Stormkit 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.
DigitalOcean 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.
000webhost 000webhostapp is zero-cost website hosting with PHP, MySQL, Cpanel & no ads. Its servers use advanced firewalls and include DDoS protection.
InfinityFree InfinityFree is fully featured, completely free website hosting with PHP, MySQL and no ads on site.
Cloudflare Pages Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. It offers free unlimited bandwidth.
Sevalla Sevalla is a PaaS platform for your applications, databases and static sites. It allows you to create up to 100 free static sites including 600 free build minutes and 100GB bandwidth/mo.
Supabase Supabase is an open-source Firebase alternative. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage.
Railway Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.
Fly 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.
Kinsta 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.
Fleek Fleek makes it easy to build websites and apps on the new open web: permissionless, trustless, censorship resistant, and free of centralized gatekeepers.
EdgeOne Pages EdgeOne Pages enables you to create and launch stunning websites quickly, leveraging edge technology for optimal performance.
Juno Juno is an open-source serverless platform for hosting static websites, building web applications, and running serverless functions with the privacy and control of self-hosting.

⬆ back to top

Learning Platforms:

Website
freeCodeCamp
LambdaTest Learning Hub
Codecademy
JavaScript30
Frontend Mentor
Test Automation University
Coursera
edX
Khan Academy
SoloLearn
Scaler Topics
The Odin Project
javascript.info
Vue School
Guru99
Salesforce Trailhead
MIT OpenCourseWare
web.dev
Scrimba
The Gymnasium
Amigoscode
CSSBattle
Full Stack Open
Upskill Courses
GeeksforGeeks – Web Development
Hack Design
Microsoft Learn
Codementor Events
Eloquent JavaScript
Code.org
InterviewBit
CSS-Tricks
Learnify

⬆ back to top

Coding Challenge Platforms:

Website
Codewars
TopCoder
Dapp World
CodinGame
HackerRank
Project Euler
Coderbyte
CodeChef
Exercism
LeetCode
SPOJ
Codeforces
CodeSignal
Frontend Mentor
Dev Challenges
HackerEarth
Frontend Practice
Codementor Projects
CSS Challenges
100 Days CSS
Codepip
W3Schools Code Game
Edabit
JS Challenger
Coding Ninjas
Divize

⬆ back to top

Freelancing platforms:

Website
Toptal
Upwork
Freelancer
PeoplePerHour
SimplyHired
Guru
Fiverr
6nomads
Truelancer
Gun.io

⬆ back to top

Remote Jobs:

Website
WorkRemote
Remote Frontend Jobs
Job Board Search
FlexJobs
Remote.co
JustRemote
We Work Remotely
Remote OK
Himalayas
Jobspresso
4 Day Week
Hire Tech Ladies
No Whiteboard
Cool Startup Jobs
Wellfound
Smart Remote Jobs
Startup Jobs
Jobs in JS
EchoJobs
Remote.io
Web3 Career
OKJob
Real Work From Anywhere
MoaiJobs

⬆ back to top

Photos:

Website
Unsplash
Pixabay
Pexels
Reshot
LibreStock
Visual Hunt
FreePhotos
Picjumbo
PxFuel
Free for Commercial Use

⬆ back to top

Videos:

Website
Dareful
Videvo
Videezy
Pixabay Videos
Mixkit
Vidsplay
Freepik Videos
Pexels
Coverr
Splitshire
PhotoStockEditor
Clipstill

⬆ back to top

Illustrations:

Website
Icons8 Illustrations
Open Doodles
unDraw
DrawKit
Icons8 Ouch
IRA Design
Blush
Storyset
ThemeIsle Illustrations
ManyPixels Gallery
Artify
CocoMaterial

⬆ back to top

Icons:

Website
Font Awesome
Flaticon
Icons8
Iconfinder
Google Material Icons
Iconmonstr
Heroicons
Boxicons
css.gg
Lineicons
Remix Icon
Tabler Icons
Simple Icons
Feather Icons
SVG Repo
Iconic
IcoMoon
IconScout Unicons
HolaSVG Icons
Fontello
Fontastic
Ionicons
Bootstrap Icons
React Icons
Favicons by Beau Bus
3D Icons
Flowbite Icons

⬆ back to top

Fonts:

Website
Google Fonts
FontSpace
1001 Fonts
Font Squirrel
FFonts
FontFabric
Urban Fonts
Fontpair
Fonts Bunny

⬆ back to top

Youtube Channels:

Website
Traversy Media
freeCodeCamp.org
The Net Ninja
Google Chrome Developers
Academind
CodingTech
Codú Community
Web Dev Simplified
Dev Ed
CodeSTACKr
Coding Addict
Kevin Powell
Code with Ania Kubów
The Coding Train
Program With Erik
Coder Coder
clever programmer
JavaScript Mastery
Adrian Twarog
Wes Bos
DesignCourse
codedamn
ProgrammingWithMosh
Fireship
Codevolution
Leon Noel
CSS Weekly
Dave Gray
Sonny Sangha
Corey Schafer
Code with Harry

⬆ back to top

Podcasts:

Website
Syntax
The Changelog
The Laracasts Snippet
Front End Happy Hour
JavaScript Jabber
Shop Talk
Ladybug Podcast
CodePen Radio
React Native Radio
Html All The Things
The CSS Podcast
The Stack Overflow Podcast

⬆ back to top

Code Editors:

Website
VS Code
Sublime Text
Brackets
Vim
Spacemacs
Emacs
Neovim
Fleet

⬆ back to top

Color Palettes:

Website
Coolors
Color Hunt
Paletton
Color Hex
MyColor Space
Flat UI Colors
Adobe Color
HTML Color Codes
Colors in Spo
UI Gradients
Gradientos
EG Gradients
CSS Gradient
0 to 255
Material UI Colors
UI Colors
Colorfa

⬆ back to top

UI Inspiration:

Website
WebsiteVice
HTTPster
Awwwards
Dribbble
Behance
Codrops
Landings.dev

⬆ back to top

Web Accessibility Tools:

Website
WAVE
Accessibility Insights
Google Lighthouse
Pa11y
WebAIM Contrast Checker
ABC Use All Five
Contrast Ratio

⬆ back to top

Docs:

Website
MDN Web Docs
W3Schools
W3Docs
DevDocs
PHP.net

⬆ back to top

Animation Libraries:

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

⬆ back to top

Charts:

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

⬆ back to top

Chrome Extensions:

Website
Web Developer
Wappalyzer
JSONView
daily.dev - News for Busy Developers
Lighthouse
Checkbot - SEO, speed & security checker
WhatFont
Visbug
Colorzilla
Window Resizer
React Developer Tools
Hackertab.dev - All Developer news in 1 tab
Vue Developer Tools

⬆ back to top

Website Optimization Tools:

Website
Google PageSpeed Insights
GTmetrix
WebPageTest
Yslow
Optimizilla
SEOTester
CORS-Tester

⬆ back to top

HTML/CSS/JavaScript templates:

Website
HTMLRev
TooPlate
HTML5 UP
TemplateMo
UIDeck
FreeHTML5
BootstrapMade
GrayGrids
ThemeSelection
Built at LightSpeed
Web3Templates
ThemeFisher Free Bootstrap Templates

⬆ back to top

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.

⬆ 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.
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

⬆ back to top

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.

⬆ back to top

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
JSONing A suite of JSON tools, including a formatter, validator, converter, generator, merger, and Mock API
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.
Rtcd.io A simple yet powerful online toolbox for encoding, encryption, data conversion, image processing and more.
Alphavids.io Transparent WEBM to MP4 converter.
StyleShift CSS to Tailwind converter, designed to seamlessly transform your custom CSS into efficient, responsive Tailwind CSS code.
10015.io All-in-one toolbox to make life easier. Includes CSS generators, AI palette generator, and much more.
ToolsChimp.com 1000+ Free Online tools. No Signup, No Paywall. Color Converters, Image Tools, Video Tools, etc.,
volumeshaderbm.org A browser-based volume shader benchmark with interactive kernels and reproducible presets.
Format JSON Online A Complete Toolkit for JSON & Data Processing.
WordToTime A browser-based calculator that estimates speaking/reading time for scripts, documentation, and content. Useful for podcasts, videos, tutorials, and technical presentations.
ToolZack A friendly web toolkit for converting, encoding, formatting and styling text. Over 120 free tools.
AutoChangelog Automatically turn pull requests, code changes, and commits into readable changelogs.
Preflight Stop embarrassing yourself in production. Scan your codebase for launch readiness before you ship.
Speaking Time Calculator A free online tool to estimate speaking or presentation time based on text length and speaking pace (WPM).

⬆ back to top

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.
UI Kits All the best UI kits & component libraries in one place.
8bitcn Retro 8-bit styled UI component library with accessible and customizable components for a nostalgic aesthetic
Tailkits UI Tailwind Components with Native MCP Support

⬆ 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.
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.

⬆ 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.
Prime React The ultimate collection of design-agnostic, flexible and accessible React UI Components.

⬆ 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.
Angular Material Angular Material is a UI library component developed by Google in 2014.
TailAdmin Angular Open-source Angular Tailwind CSS Admin Dashboard Template and UI Components

⬆ back to top

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

⬆ back to top

Others:

Website Description
MDB: Markdwon Badges Generate amazing svg markdown badges within few clicks
URL Shortener URL shortener. No login required.
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
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.
ConvertHub API File Conversion API for Developers
Tech Terms A beginner-friendly glossary built by the community, for the community
DevTool Curated directory of tools for frontend, backend, DevOps, AI, and more.

⬆ back to top

Made by Marko.

Similar amazing projects: Public APIs - Dev Resources

Bookmark This Page Now!