A collection of free resources to help Web Developers.
Please read contributing guidelines if you'd like to add resources.
Please ⭐ this repository if you found it helpful! It makes it easier for new people to find this repository.
- Accessibility
- APIs
- Blog
- Books
- Community
- Courses
- CSS
- Database
- Design
- Developer Tools
- Newsletters
- Podcasts
- Practice
- YouTube
| Resource | Description |
|---|---|
| Accessibility Cheat-sheet | Practical approaches to Universal Design for making your website/webapp accessible to everyone |
| Color Contrast Accessibility Validator | Color Contrast Accessibility Validator |
| Resource | Description |
|---|---|
| JSON Placeholder | Free fake API for testing and prototyping. |
| Open Trivia Database | Free to use, user-contributed trivia question database. 4,102 verified questions. |
| OpenWeather | Weather data in a fast and easy-to-use way |
| Public API List | A collective list of free APIs for use in software and web development. |
| The Star Wars API | All the Star Wars data you've ever wanted: Planets, Spaceships, Vehicles, People, Films and Species |
| They Said So Quotes API | They Said So Quotes API offers a complete feature rich REST API access to its quotes platform. |
| OMDb API | The OMDb API is a RESTful web service to obtain movie information, all content and images on the site are contributed and maintained by our users. |
| Random Data API | Use any of our API endpoints and fetch data that will allow you faster development and testing cycle. All responses come with ID (integer) and UID (string). |
| REST Countries | Get information about countries via a RESTful API. |
| Resource | Description |
|---|---|
| Catalin Pit | All about software engineering, developer health, resources and content creation |
| Codepen blog | Announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. |
| CSS Tricks | Blog articles curated by CSS Tricks |
| Dev.to | DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. We provide a place for that to happen. |
| Flavio Copes | Flavio Copes Blog |
| Netflix Tech Blog | The Netflix Tech Blog |
| Pinterest Engineering | Pinterest Engineering. Inventive engineers building the first visual discovery engine, 300 billion ideas and counting. |
| DigitalOcean Community | DigitalOcean’s community offers thousands of tutorials, videos, and answers to questions on a wide range of topics. |
| Smashing Magazine | Smashing Magazine - Articles, books, workshops, conferences, membership, job board, newsletter and more |
| Spotify Engineering | Read about the magic behind the music and more. Welcome to our official technology blog. |
| The Pragmatic Engineer | Newsletter, books, jobs and talent collective |
| Resource | Description |
|---|---|
| Automate The Boring Stuff With Python (2nd edition) | In Automate the Boring Stuff with Python, you'll learn how to use Python to write programs that do in minutes what would take you hours to do by hand - no prior programming experience required. |
| Eloquent JavaScript (3rd Edition) | This is a book about JavaScript, programming, and the wonders of the digital. |
| Functional-Light JavaScript | "Functional-Light JavaScript" explores the core principles of functional programming (FP) as they are applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call "Functional-Light Programming" (FLP) and apply it to JavaScript. |
| The Pragmatic Programmer: Your journey to mastery (20th anniversary edition) | Jammed full of coding best practices, after 20 years it's still one of the must read books on building a successful career in software. |
| You Don't Know JS | This is a series of books diving deep into the core mechanisms of the JavaScript language. |
| Resource | Description |
|---|---|
| Codú Community | A space for coders. |
| Resource | Description |
|---|---|
| freeCodeCamp.org | Learn to code for free - build projects - earn certifications. |
| JavaScript 30 | 30 days vanilla JS coding challenge |
| The Odin Project | Free full stack curriculum supported by a passionate open source community. |
| Python Essentials 1 (Beginner) | This course is the first in a 2-course series that will prepare you for the PCEP - Certified Entry-Level Python Programmer and PCAP: Certified Associate in Python Programming certification exams. |
| [Udemy] (https://www.udemy.com) | Learn or teach on udemy.com |
| Test Automation University | Become a test automation superstar - Free! |
| edX | Fuel your ambition - explore 4000+ courses |
| Scrimba | Frontend career path helps motivated students become hireable developers for the fraction of the cost of a bootcamp |
| Resource | Description |
|---|---|
| animista | On-demand CSS Animations Library |
| cubic-bezier | Import and Export curves |
| Easings | Easings helps you find the right easing function |
| Keyframes | Keyframe animations |
| Resource | Description |
|---|---|
| Bootstrap | Build fast, responsive sites with Bootstrap |
| tailwindcss | Rapidly build modern websites without ever leaving your HTML. |
| Bulma | Bulma: the modern CSS framework that just works. |
| Zurb Foundation | The most advanced responsive front-end framework in the world. |
| Materialize | A modern responsive front-end framework based on Material Design |
| tailwindcomponents | A free repository for community components using Tailwind CSS |
| Tailblocks | Ready-to-use Tailwind CSS blocks |
| tailwindUI | Tailwind UI Components |
| Tailwind Cheat-Sheet | Cheat sheet for tailwind |
| Resource | Description |
|---|---|
| Box Shadows | customise box shadows |
| CSS Arrow Please | Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. |
| CSS GRID | Learn CSS Grid with Wes Bos in 25 pretty good videos |
| cssmastery | CSS Mastery slideshow presentation |
| CSS Button Generator | CSS Button Generator |
| CSS clip-path Maker | CSS Clip Path Maker |
| Custom Shape Dividers | Custom Shape Dividers |
| Fancy-Border-Radius | Create fancy border radius |
| flexbox | A simple, free 20 video course that will help you master CSS Flexbox! |
| Glassmorphism.com | Create glass effect panels |
| Houdini.how | How to codepens |
| Neumorphism.io | Generate Soft-UI CSS code |
| Resource | Description |
|---|---|
| Fauna | A distributed document-relational database delivered as a cloud API |
| Firebase | Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world. |
| HarperDB | Combine your database, API, and distribution logic into a single solution for faster time to market, near-zero global latency, and lower total cost of ownership. |
| MongoDB | Build applications on the industry's first developer data platform. From AI-powered and event-driven apps to edge use cases and search, build fast and at the scale users demand. |
| Supabase | Supabase is an open source Firebase alternative. |
| ElephantSQL | Perfectly configured and optimized PostgreSQL databases ready in 2 minutes. |
| Resource | Description |
|---|---|
| Audio Micro | Royalty Free audio & sound effects |
| Zapsplat | Royalty Free music tracks & sound effects |
| Resource | Description |
|---|---|
| 0to255 | 0to255 is a color tool that makes it easy to find lighter and darker colors, also called tints and shades, based on any color. This makes it perfect to use for button hover states, gradients, borders, and more. |
| Adobe Color Wheel | Browse and search themes |
| Colordot by Hail Pixel | Choose a random color palette |
| Colormind.io | Selection of pre-generated color palettes |
| Colors.lol | Overly descriptive color palettes. |
| Coolors | The super fast color palettes generator! |
| Colorsandfonts | Color and typography inspiration for Web Developers and Digital Designers |
| Flatuicolors | Flat UI Colors 2 features 13 more color palettes. Collaborating with 13 designers around the world, a total set of 280 colors are on your command for COPY / PASTE for your next project, design, presentation. |
| Huemint | Utilises machine learning to create unique colour schemes. |
| Mycolor.space | Never waste Hours on finding the perfect Color Palette again! |
| Paletton | Creates color palette from a selected color |
| Stylify Me | Get Color Palette from Websites |
| Resource | Description |
|---|---|
| ColorAndFonts | Color and typography inspiration for Web Developers and Digital Designers |
| Font Flipper | Add typography to an image |
| Fontjoy | Font pairing made simple |
| Google Fonts | Fonts available from Google |
| FontPair | Free fonts and font pairings to use for your next design project |
| Resource | Description |
|---|---|
| CSS Gradient | Create free gradient backgrounds for your website |
| uiGradients | Create a gradient |
| Resource | Description |
|---|---|
| Bootstrap Icons | Free, high quality, open source icon library with over 2,000 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts |
| flaticon | Access 11.7M+ vector icons & stickers |
| Feather | Simply beautiful open source icons |
| Font Awesome | Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. |
| Heroicons | MIT-licensed open source icons by Steve Schoger |
| Iconfinder | Millions of graphics for your design projects. Created by independent designers. |
| Material Icons | Material Symbols are our newest icons consolidating over 3,062 glyphs in a single font file with a wide range of design variants. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size). |
| Simple Icons | 2734 Free SVG icons for popular brands |
| UseAnimations | Animated icons in Lottie Framework for immediate implementation to your apps or websites. |
| Resource | Description |
|---|---|
| 404 Illustrations | Royalty free illustrations for 404 pages |
| Control Illustrations | Combo set of 108 customizable illustrations |
| DrawKit | Hand-drawn 2D & 3D illustrations, icons and animations. Perfect for your next project. |
| LottieFiles | Lightweight, scalable animations |
| Open Doodles | A Free Set of Open-Source Illustrations! |
| smash illustrations | Awesome illustration constructor with colorful and trendy characters |
| unDraw Illustrations | Browse to find the images that fit your needs and click to download. Use the on-the-fly color image generation to match your brand identity. |
| Resource | Description |
|---|---|
| Awwwards | The awards that recognize the talent and effort of the best web designers, developers and agencies in the world. |
| Behance | Search the creative world at work |
| Dribbble | Connect with a community of millions of top-rated designers & agencies around the world. |
| Resource | Description |
|---|---|
| Hero Patterns | A collection of repeatable SVG background patterns for you to use on your web projects. |
| pattern.css | CSS only library to fill your empty background with beautiful patterns. |
| Patternico | Create a background using emoji and colour |
| Subtle Patterns | Background patterns |
| Resource | Description |
|---|---|
| freepik | Create great designs, faster |
| Pixabay | Stunning royalty-free images & royalty-free stock |
| Pexels | The best free stock photos, royalty free images & videos shared by creators. |
| Unsplash | The internet’s source for visuals. Powered by creators everywhere. |
| Resource | Description |
|---|---|
| Visual Studio Code | Code editing. Redefined. Free. Built on open source. Runs everywhere. |
| Postman | API Testing Client |
| Insomnia | API Testing Client |
| Frontend Checklist | The Front-End Checklist Application is perfect for modern websites and meticulous developers! |
| iHateRegex | Regex Cheat Sheet |
| Pastebin | Share snippets |
| GitHub | GitHub is where over 100 million developers shape the future of software, together. |
| Grammarly | Instantly generate clear, compelling writing while maintaining your unique voice. |
| Stack Overflow | Every developer/data scientist/system admi/nmobile developer/game developer has a tab open to Stack Overflow |
| Resource | Description |
|---|---|
| Auth0 | Secure access for everyone but not just anyone |
| Resource | Description |
|---|---|
| CSSViewer | A simple CSS property viewer. |
| ColorZilla | Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies |
| JSON Viewer | The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen. |
| React Developer Tools | React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. |
| Wappalyzer | Wappalyzer is a technology profiler that shows you what websites are built with. |
| WAVE Evaluation Tool | Evaluate web accessibility within your browser. |
| Web Disability Simulator | Simulates how people with disabilities experience the web |
| Webpage Spell-Check | Instant spell-check on any web page |
| WhatFont | The easiest way to identify fonts on web pages. |
| Resource | Description |
|---|---|
| namecheap | Domain names, hosting, email, marketing tools, security & wordpress |
| Resource | Description |
|---|---|
| Django Secret Key Generator | Django secret key generator |
| mockaroo | Data Generator |
| JSON Generator | Data Generator |
| Favicon Generator | Favicon Generator. |
| Free Favicon Maker | Free favicon maker |
| Online UUID Generator | Online UUID generator |
| Meta Tags | Meta tags toolkit - preview, edit and generate |
| carbon | Code Snippet Image |
| Resource | Description |
|---|---|
| Netlify | connect everything - build anything |
| Surge | Static web publishing for front-end developers |
| Vercel | We enable developers to build and publish wonderful things. We build products for developers and designers. And those who aspire to become one. |
| Render | The fastest way to host all your code, API, cron jobs, web apps, databases... |
| Kinsta | Deploy up to 100 static sites for free, custom domains with SSL, 100 GB monthly bandwidth, 260+ Cloudflare CDN locations. |
| Resource | Description |
|---|---|
| Birme | Bulk image resizer |
| Minify | Code minifier |
| tinypng | Image compression |
| Compressor | Image compression |
| Measure | Metrics |
| Lighthouse Metrics | Metrics |
| Resource | Description |
|---|---|
| CodePen | The best place to build, test and discover front-end code |
| JSFiddle | Online code editor for HTML, CSS and JS |
| Liveweave | Online code editor for HTML, CSS and JS |
| repl.it | online code editor |
| JS Bin | Online code editor for HMTL, CSS and JS |
| CodeSandbox | online code editor for a variety of languages |
| Resource | Description |
|---|---|
| Notion | Notion is the connected workspace where better, faster work happens. Now with AI |
| Trello | Trello brings all your tasks, teammates, and tools together |
| Resource | Description |
|---|---|
| Can I Use | Browser Compatibility Lookup |
| ECMAScript Compatibility Table | ECMAScript compatibility table |
| Resource | Description |
|---|---|
| Bytes | Staying informed on the JavaScript ecosystem has never been so entertaining. Delivered every Monday and Thursday, for free. |
| CSS Tricks Newsletter | An email newsletter with the most interesting news, ideas, fresh content, thoughts, and incredibly mature jokes from Team CSS-Tricks. This is your ticket to saying up to date with web dev. |
| CSS Weekly | Weekly e-mail roundup of CSS articles, tutorials, experiments, and tools curated by Zoran Jambor |
| JavaScript Weekly | A newsletter of JavaScript articles, news and cool projects |
| Frontend Focus | A once–weekly roundup of the best front-end news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more. |
| 7.dev | Learn to program with our tutorials and courses |
| Flexbox Adventure | No more boring videos, tutorials and courses. Learn Flex Box in a completely new, fun, effective and revolutionary way. By playing Flex Box coding game! |
| Resource | Description |
|---|---|
| Developer Tea | A podcast by Jonathan Cutrell, empowering developers to discover their purpose, excel at work, and create a positive impact. |
| Front End Happy Hour | A software engineering podcast featuring a panel of Software Engineers from Netflix, Twitch, & Atlassian talking over drinks about Frontend, JavaScript, and career development. |
| Full Stack Radio | A podcast for developers interested in building great software products. Hosted by Adam Wathan. |
| JS Party | Welcome to JS Party, a weekly celebration of JavaScript and the web |
| Ladybug Podcast | We’re debugging the tech industry. |
| The Scrimba Podcast | A weekly pod about learning to code and how to get your first junior developer job |
| Software Engineering Radio | The Podcast for Professional Software Developers |
| Syntax.fm | A tasty treats podcast for Web Developers |
| Resource | Description |
|---|---|
| Frontend Mentor | Improve your front-end coding skills by building real projects |
| CodeWars | Train code problems |
| 30 Day Vanilla JS Coding Challenge | 30 day vanilla JS coding challenge |
| SQLBolt | A series of interactive lessons and exercises designed to help you quickly learn SQL right in your browser. |
| iCodeThis | Daily projects you can build to improve your coding skills! |
| Resource | Description |
|---|---|
| Ahmad Awais | Learn with Awais |
| Ben Awad | Videos about React, React Native, GraphQL, Typescript, Node.js, PostgreSQL, Python, and all things coding. |
| Better Dev | CSS videos |
| Claudio Bernasconi | Become a better (.NET) Software Engineer by improving your developer skills. It's hard to stand out as a developer. Make yourself the best version you can be. |
| CodeDamn | Videos mostly related to programming, and sometimes simple hacks and tricks to survive on internet! |
| CoderOne | CoderOne is a Learning Channel For Web Development, Software Enginnering and Coding All in one place with a High quality Video/Written Tutorials along side a Learning Platform that allows you to dig deep and learn everything that comes new. |
| codeSTACKr | Tutorials about web development and include coding languages such as HTML, CSS, Sass, JavaScript, and TypeScript |
| Codevolution | Tutorials on the latest tech in web development! |
| Code with Ania Kubów | Want to learn how to code from nothing? I will show you how! |
| Coding Garden | Coding Garden is an open, interactive and engaging community where any coder, from beginner to veteran, can learn and grow together. |
| Coding Addict | Video courses on web development |
| Codú Community | With a mix of short videos and long-form workshops, I hope it can help you become a better developer. |
| Colby Fayock | I help others get the tech out of the way to solve real problems with the tools of the web |
| Dave Gray | Web Development tutorials with full courses on HTML, CSS, JavaScript, React, Node.js and more! |
| dcode | High quality web development tutorials. |
| Dennis Ivy | Sharing what I know about Full Stack Web development with the primary Focus being Python, Django & Javascript at the time. I will be creating Project based tutorials for these Languages/Frameworks/Libraries along with sharing my personal experience. |
| Dev Ed | Your go-to channel for learning how to code, design, and become more creative in the tech world! |
| Faraday Academy | I make videos about topics related to what I am working on at work, currently studying, or how I am trying to improve my productivity as a developer. I try to share any interesting or useful knowledge as much as I can on this channel |
| Fireship | High-intensity ⚡ code tutorials and tech news to help you ship your app faster. New videos every week covering the topics every programmer should know. |
| freeCodeCamp.org | Learn to code for free |
| Harry Wolff | Every week I post a new video to share my love and joy of JavaScript and all things web related. |
| James Perkins | Subscribe if you learn about next.js, typescript, and more. |
| James Q Quick | I publish weekly videos about Web Development! |
| JavaScript Mastery | Master modern web development with a project-based approach |
| Josh tried Coding | Hi. I'm Josh and my goal is to have fun creating stuff and sharing that here on youtube. It's nice to have you here! |
| Lama Dev | Web development tutorials for everyone. Learn JavaScript, React.js, Node.js, and find inspiration for HTML, CSS, and web design with Lama and become a web developer. |
| Leigh Halliday | Tutorials about JavaScript and React. |
| Programming with Mosh | I train professional software engineers that companies love to hire. |
| Program With Erik | I do tutorials, advice and occasionaly I vlog! |
| Tech With Tim | Learn programming, software engineering, machine learning and everything tech from this channel. |
| The Net Ninja | Black belt your development skills with over 2,000 free programming tutorials. |
| Traversy Media | Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP |
| Web Dev Simplified | Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. |
| Resource | Description |
|---|---|
| Adrian Twarog | Coding & Tutorials - Design & Inspiration - UX & UI |
| Coder Coder | Practical tips for the beginner web developer. |
| DesignCourse | Learn UI/UX and CSS with my custom interactive courses |
| Kevin Powell | Helping you learn how to make the web, and make it look good while you're at it. |
| ColorCode | Coding Tutorials for regular people! |
| Resource | Description |
|---|---|
| Chris Sean | Videos about becoming a web developer |
| CodeStories | The channel where IT professionals from all disciplines and from all over the globe come to share their stories to encourage, equip, empower, and inspire you. |
| Dorian Develops | Various career advice videos |
| DThompsonDev | Career advise for those wanting to break into the software industry |
| Eddie Jaoude | Videos about open source |
| ForrestKnight | My humble attempt at building my version of the digital world one step at a time by creating programming and computer science content to help those coming behind me. |
| Joshua Fluke | Videos about life and the realities of the corporate world |
| Randall Kanna | Career videos |
| RealToughCandy | Coding course & platform reviews - Web development news - Freelancing advice and more! |
| Resource | Description |
|---|---|
| Amigoscode | Premium programming courses. |
| DevOps Directive | Provide educational and entertaining content to enable engineers to level up their skills and keep up with the continuously evolving DevOps and Cloud Infrastructure landscape. |
| DanGitschooldude | This channel is dedicated to teaching the distributed version control system git. |
| TechWorld with Nana | Helping people to learn DevOps topics easily 💙 |
| Resource | Description |
|---|---|
| Flutter Explained | This channel should be the Wikipedia for Flutter development, and for all questions related to Flutter, it should be possible to find an answer here. |
| William Candillon | React Native Tutorials |
| Resource | Description |
|---|---|
| EatTheBlocks | On EatTheBlocks, I help you to become a Web3 expert, so that you can make more money, gain more freedom, and work on projects you love. I cover Ethereum, Solidity, smart contract security, Dapps, DeFi, NFTs. |
| Resource | Description |
|---|---|
| Caleb Curry | Programming Made Fun and Simple. High quality tutorials that are fun, educational, and easy to follow. |
| CodeBeauty | These videos are intended to help you to get a job, learn for your exams, learn to program for fun, and answer your questions about software engineering. |
| Python Engineer | Free Python and Machine Learning Tutorials! |