Skip to content

Latest commit

 

History

History
505 lines (416 loc) · 36.3 KB

README.md

File metadata and controls

505 lines (416 loc) · 36.3 KB

Free Web Developer Resources 📚

A collection of free resources to help Web Developers.

Contributions welcome! 🙌

Please read contributing guidelines if you'd like to add resources.

Star this repository ⭐

Please ⭐ this repository if you found it helpful! It makes it easier for new people to find this repository.

Table Of Contents 📖


Accessibility

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
WAI Tutorials Guidance for writing, designing, and developing for accessiblity

APIs

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.

Blog

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

Books

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.

Community

Resource Description
Codú Community A space for coders.

Courses

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

CSS

CSS Animation

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

CSS Frameworks

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

CSS Tools

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

Database

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.

Design

Audio

Resource Description
Audio Micro Royalty Free audio & sound effects
Zapsplat Royalty Free music tracks & sound effects

Colors

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

Fonts

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

Gradients

Resource Description
CSS Gradient Create free gradient backgrounds for your website
uiGradients Create a gradient

Icons

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.

Illustrations

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.

Inspiration

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.

Patterns

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

Photos

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.

Developer Tools

Resource Description
Visual Studio Code Code editing. Redefined. Free. Built on open source. Runs everywhere.
Postman API Testing Client
Insomnia API Testing Client
WireMock Cloud API Mocking Web App
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 admin/mobile developer/game developer has a tab open to Stack Overflow

Authentication

Resource Description
Auth0 Secure access for everyone but not just anyone

Chrome Extensions

Resource Description
CSSViewer A simple CSS property viewer.
ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
Gitpod Go from repository to developer environment in a click
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.

Domain Name

Resource Description
namecheap Domain names, hosting, email, marketing tools, security & wordpress

Generators

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

Hosting

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.

Optimization

Resource Description
Birme Bulk image resizer
Minify Code minifier
tinypng Image compression
Compressor Image compression
Measure Metrics
Lighthouse Metrics Metrics

Online Code Editors

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

Project Management

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
PerfectBugReport.io A simple checklist of essential items to include in bug reports.

Validation

Resource Description
Can I Use Browser Compatibility Lookup
ECMAScript Compatibility Table ECMAScript compatibility table

Newsletters

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!

Podcasts

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

Practice

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!
SQL ZOO SQLZoo is an interactive online learning platform that offers tutorials and exercises on SQL queries and database management, helping users improve their SQL skills.

YouTube Channels

General web development knowledge

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.

Frontend YT

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!

Career YT

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!

DevOps YT

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 💙

Mobile YT

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

Blockchain YT

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.

Backend YT

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!