A list of handpicked
resources for 🤓 frontend devs

Unified Tools

A unified collection of useful online tools. Check out my new product. Hope you guys like it.

Ray.so

Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.

npkill

List any node_modules directories in your system, as well as the space they take up. You can then select which ones you want to erase to free up space.

NextAuth.js

NextAuth.js is a complete open source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless.

Laws of UX

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Conventional Commits

A specification for adding human and machine readable meaning to commit messages

Keep a Changelog

Don’t let your friends dump git logs into changelogs.

Iconoir | SVG Icons Library

The Simple and Definitive hand-crafted SVG Icons Library.

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT licensed icon pack.

Octicons

Your project. GitHub’s icons.

Feather – Simply beautiful open source icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

Phosphor Icons

A flexible icon family for interfaces, diagrams, presentations — whatever, really.

700+ CSS Icons, Customizable, Retina Ready & API

Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma and Adobe XD. Easy integration: Embed, NPM & API

Animated Icons – 900+ High Quality Animated Icons

Free and premium animated icons for your projects. Over 900 animated icons, 5 design styles, available in JSON for Lottie, GIF, and After Effects format

tabler/tabler-icons

A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects. - tabler/tabler-icons

Indie Icons | VISIWIG

Copy and paste individual icons as inline SVGs or CSS code directly into websites or Illustrator.

Heroicons – Free Open Source SVG Icon Library

New MIT open source SVG icon library designed by Steve Schoger. Solid and stroke variants, one-click copy-paste, and Figma file. Built with Tailwind CSS.

Remix Icon - Open source icon library

Remix Icon is a set of open source neutral style system symbols elaborately crafted for designers and developers. All of the icons are free to use for both personal and commercial.

4500+ Free Vector Icons - Unicons by Iconscout

Pixel-perfect vector icons and Icon Fonts available in Line, Monochrome Solid and Thin Line style for your next project.

illlustrations - open source illustrations kit

Large set of opensource illustrations. You can use completely free and without attribution.

Free illustrations - Free to use illustrations & vectors

Find free illustrations & vectors for your next personal or commercial project with & without attribution ✓ SVG ✓ PNG ✓ PSD ✓ SKETCH ✓ AI ✓ FIGMA

Stubborn - Free Illustrations Generator

Free illustrations generator for Figma and Sketch. Get the opportunity to design your characters using symbols and styles.

unDraw - Open source illustrations for any idea

The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.

Free to Use Clip Art Images & Vector Illustrations | ManyPixels

Download our 2,000+ editable and royalty-free SVG and PNG illustrations to power up your designs.

Loomies - 39 Free Illustrations - uistore.design

39 free illustrations elements. Simplified cute characters illustrations for websites and application screens. If you’re looking for cute cartoony characters to tell your stories, look no further than our newest character illustrations

Storyset | Customize, animate and download illustration for free

Edit and animate all our customizable illustrations to enhance your projects totally free. Start now to be creative in our online editor ✅

Freebie | Blog | OUTLANE

Get all Outlane graphics at once and save 70%. Limited offer!

300+ free design resources

Interfacer is a collection of 300+ free design resources found on the Web.

Big Heads

Combine expressions, clothing, hair styles and colors into billions of different unique characters.

A free online avatar generator

A free online avatar generator for anyone to make their beautiful personal avatar easily!

Laws of UX

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Wordmark

Wordmark.it helps you choose fonts by quickly displaying your text with your fonts.

React Headroom

React Headroom is a React Component to hide/show your header on scroll. The header on this site is a living example. When you scroll down, it slides out of view and slides back in when scrolling up.

Free Lottie Animation Files, Tools & Plugins - LottieFiles

The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web.

Glassmorphism - simple CSS generator

Glassmorphism is a unified name for the popular Frosted Glass aesthetic.

Haikei

A web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more! Our generators let you discover, customize, randomize, and export generative SVG design assets ready to use with your favorite design tools.

Checklist Design - A collection of the best design practices.

Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.

The Best Landing Page Design Inspiration, Templates, Resources and More | Landingfolio

Landingfolio features the best landing page inspiration, templates, resources and examples on the web. Learn from a growing library of 1,982 landing page designs and 3,829 component examples, updated daily!

Create Customizable, Hi-Def, and Scalable Backgrounds

SVG Backgrounds hosts a collection of customizable SVG-based repeating patterns and backgrounds for websites and blogs.

Shape Divider App

Create fully responsive shape dividers for your next web project

A collection of layouts and components built with Tailwind ready to copy paste on your next project.

A collection of layouts and components built with Tailwind ready to copy paste on your next project.

CSS Grid Generator

Hero Patterns

A collection of repeatable SVG background patterns for you to use on your digital projects.

Humane by Design

A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.

One Page Love - One Page Website Inspiration and Templates

One Page Love is a One Page website design gallery showcasing the best Single Page websites, templates and resources.

Refactoring UI

Learn how to design awesome UIs by yourself using specific tactics explained from a developer’s point-of-view.

Booklets.io – Bite Sized Learning

Browse hundreds of booklets on design, business, freelancing & more curated from the best designers in the world. Learn new skills & insights, fast.

Collect UI

Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

uiprint - Get Printable Mockups and Sketchpads

Collection of printable wireframe, mockup and dot grid sketchpad templates

Lottie

Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

The gooey effect for React

A tiny React component for applying a gooey effect, also known as shape blobbing or metaballs.

Design Principles

An Open Source collection of Design Principles and methods

HTML Reference

A free guide to all HTML elements and attributes.

CSS Reference

CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

A free tutorial to learn HTML and CSS

MarkSheet is a free tutorial to learn HTML and CSS. It’s short (just as long as a 50 page book), simple (for everyone: beginners, designers, developers), and free (as in ‘free beer’ and ‘free speech’). It consists of 50 lessons across 4 chapters, covering the Web, HTML5, CSS3, and Sass.

The Modern JavaScript Tutorial

Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.

Build the portfolio you need to be a badass web developer.

egghead is your source for the Badass Portfolio Projects you need to climb the career ladder as a modern web developer.

Learn to become a modern frontend developer

Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.

Devhints — TL;DR for developer documentation

A ridiculous collection of web development cheatsheets · One-page guide to

Web Design in 4 minutes

Learn the basics of web design in 4 minutes with this interactive tutorial.

Your Career in Web Development Starts Here | The Odin Project

The Odin Project empowers aspiring web developers to learn together

freeCodeCamp.org

Learn to Code — For Free

Flexbox Tutorial - Learn CSS Flexbox For Free | Scrimba

This tutorial teaches you CSS Flexbox through 12 interactive screencasts. You’ll learn all the key concept in addition to building a responsive navbar and a neat image grid.

Flexbox Froggy

A game for learning CSS flexbox

Enlight | Learn to code by building projects.

Learn to code by building projects.

Maggie Appleton

Maggie is a designer, illustrator, and anthropologist. This is her digital garden for growing visual explanations about design, culture, and programming

Interneting Is Hard

Friendly web development tutorials for complete beginners

CSS-Tricks

CSS-Tricks is a website about websites.

Tutorials | DigitalOcean

Technical tutorials, Q&A, events—This is an inclusive place where developers can find or lend support and discover new ways to contribute to the community.

Josh W Comeau

Friendly tutorials for developers. Focus on React, CSS, Animation, and more!

Blog – Lee Robinson

Thoughts on the software industry, programming, tech, videography, music, and my personal life.

LogRocket Blog

For Frontend Developers and Web App Engineers

Top Shelf Web Development Training

Fun and practical web development. Not just how, but why.

KIRUPA

Become a better front-end developer with our ridiculously clear content and friendly community!

Web Development - freeCodeCamp.org

Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice.

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

280 handpicked colors ready for COPY & PASTE

uiGradients - Beautiful colored gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

Colorsinspo - All in one resource for finding everything about colors

Colorsinspo is all in one resource to find everything about colors with extreme ease. Also, you will get Freebies, Inspirations, Color Tools, Gradients, and thousands of trendy hand-picked color palettes.

ColorSpace - Color Palettes and Gradient Generator

Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! Your space for everything that has to do with color!

Color Palettes for Designers and Artists - Color Hunt

Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

BrandColors - official brand color hex codes

The biggest collection of official brand color codes around. Includes hex colors codes for 500+ brands including Facebook, Twitter, Instagram, and many more.

Coolors - The super fast color schemes generator!

Generate or browse beautiful color combinations for your designs.

Self-hosted website analytics | Ackee

Self-hosted, Node.js based analytics tool for those who care about privacy.

Free, open-source, simple and fast website analytics

Umami is a simple, easy to use, self-hosted web analytics solution. The goal is to provide you with a friendlier, privacy-focused alternative to Google Analytics and a free, open-sourced alternative to paid solutions. Umami collects only the metrics you care about and everything fits on a single page.

Remove Background from Image – remove.bg

Remove image backgrounds automatically in 5 seconds with just one click. Don’t spend hours manually picking pixels. Upload your photo now & see the magic.

Zustand

🐻 Bear necessities for state management in React

npkill

List any node_modules directories in your system, as well as the space they take up. You can then select which ones you want to erase to free up space.

Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Coding Fonts on CSS-Tricks

Information about coding fonts: designers, character charts, features, and more.

Dracula — Dark theme for 188+ apps

Dracula is a color scheme for code editors and terminal emulators such as Vim, Notepad++, iTerm, VSCode, Terminal.app, ZSH, and much more.

React Button Component - Awesome 3D UI, progress, social share

React 3D button component. Progress, social and share enabled. RAB is a 60fps, light weight, performant, production ready button component.

Fullpage Javascript Navigation HOC with React Awesome Slider

Fullpage navigation HOC with 3D animated transitions built on top of React Awesome Slider. GatsbyJS and NextJS recipes available.

Animated hamburger menu icons for React 🍔

Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as possible. (1.5 KB)

Find out what websites are built with - Wappalyzer

Find out the technology stack of any website. Create lists of websites and contacts by the technologies they use.

react-hot-toast - The Best React Notifications in Town - react-hot-toast

Add beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.

Can I use... Support tables for HTML5, CSS3, etc

“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

SWR

SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

React Table

Hooks for building lightweight, fast and extendable datagrids for React. The best and most top-rated fully open-source table library for React!

React Query

Hooks for fetching, caching and updating asynchronous data in React

Reactour

Tourist Guide into your React Components

Build optimized websites quickly, focus on your content | Docusaurus

An optimized site generator in React. Docusaurus helps you to move fast and write content. Build documentation websites, blogs, marketing pages, and more.

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System

Storybook: UI component explorer for frontend developers

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

react-spring

Bring your components to life with simple spring animation primitives for React

Production-Ready Animation Library for React | Framer Motion

Framer Motion is a production-ready React animation and gesture library.

Dev Community - DevDojo

Learn web development and design with our on-demand video platform. Learn development through our developer courses and developer videos.

Carbon

Carbon is the easiest way to create and share beautiful images of your source code.

Uses

A list of /uses pages detailing developer setups.

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

Tailwind Ink | AI color palette generator for Tailwindcss

A tool for creating new color shades based on a neural network and trained with the Tailwindcss palette.

NProgress: slim progress bars in JavaScript

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

Netlify: Develop & deploy the best web experiences in record time

A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!

Beautiful web app screenshots

A showcase of beautiful and well designed web app screens for design inspiration. Including screens from behind signup/paywalls! 😱

Tools for better thinking

Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

The Power of Serverless for Front-End Developers

The Power of Serverless for Front-End Developers

Free Profile Picture Maker - Create an awesome profile pic from any photo

Easily create a perfect profile picture and get 14x times more views & 36x times more chances to receive a message. Upload your photo and instantly get dozens of designs generated with AI

A11y Coffee

The introduction on web accessibility that I want to give every single web developer.

Copysmith - Your AI Copywriter

Endless ideas at the click of a button. Create high-converting ads, product descriptions, emails, and more in seconds - never start from a blank page again.

Malewicz

Hi! I design and write books. This channel will cover UX/UI industry myths, design best practices and tricks, and productivity + how to get better at both design and life with various life-hacks and routines I use to stay motivated, calm and productive. (And happy)

Tailwind Labs

We’re a small team of developers and designers spread out all across the world, building tools that help other developers build better user interfaces. We created Tailwind CSS, Headless UI, Hero Patterns, Heroicons, and wrote Refactoring UI.

The Net Ninja

Black-belt your web development skills. Over 1000 free programming tutorials about: - Modern JavaScript (beginner to advanced) - Node.js - React - Vue.js - Firebase - MongoDB - HTML & CSS - PHP & MySQL - Laravel - React Native - Flutter ...And many more topics as well :)

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

Colby Fayock

I help others learn by doing through articles, videos, and courses about Javascript, React, and the static web.

Programming with Mosh

I train professional software engineers that companies love to hire. My courses: http://codewithmosh.com My blog: http://programmingwithmosh.com Connect on social media: http://www.twitter.com/moshhamedani https://www.facebook.com/programmingwithmosh #python #javascript #chsarp

Joshua Fluke

I make a variety of content. I’m always having these wild ideas.

Fireship

High-intensity ⚡ code tutorials to help you build & ship your app faster. Subscribe for new videos every week covering intermediate to advanced lessons about JavaScript, Flutter, Firebase, and modern app development. The original home of #100SecondsOfCode and #CodeThisNotThat. Created by Jeff Delaney. Building an app? Get project support, advanced full courses, and more at https://fireship.io

Dev Ed

Learn web development, web design, 3d modelling, tools like figma and more without getting bored! The goes of this channel is to get you to become as creative you can be! So if you like to create video games in Unity or develop an application in node.js, stick around and have fun!

James Q Quick

Want to learn more about Web Development? Then, you’re in the right place! I LEARN the newest techniques in Web Development, Design, and Tools. I BUILD projects for myself and others. I TEACH others through online content. I have a passion for web development and want to share it with you on this channel!

Ben Awad

I’m a software developer who makes videos about React, React Native, GraphQL, Typescript, Node.js, PostgreSQL, Python, and all things coding.

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. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers. I started Web Dev Simplified in order to share my passion for web development, and do what I truly love. Teach and inspire new web developers. I have been in love with full stack web development since 2015 when I did my first internship as a web developer. Ever since then I have pursued my passion, learning everything there is to know about web development. Over the years I have taught many colleagues and friends the joys of web development, and cannot wait to teach you. Thank you for watching!