introduction

Here's a compilation of fantastic resources, primarily centered around front-end web development

API

• RapidAPI - Free Public APIs for Developers

• any-api - Documentation and Test Consoles for Over 1400 Public APIs

• public-apis - A collective list of free APIs for use in software and web development

• API list - A collective list of APIs

• free-open apis - 30 Free & Open APIs for Marketers & Content Developers

• json placeholder - Free fake API for testing and prototyping

Data-Structures-and-Algorithms

Algorithm-Challenges

• CodeWars

• HackerRank

• coderbyte

• exercism.io

• AlgoExpert

• HackerEarth Codemonk

• LeetCode

• edabit

• NeetCode.io

Algorithm-Books

• grokking algorithms

• Think Like A Programmer

Algorithm-Websites

• Algorithm Visualiser

Design

Design-Articles

• Pixel Perfect Web Development: 5 Essential Steps by Daniel Corin Stig

• Learn Responsive Design! by web.dev

• Everything I Know About Style Guides, Design Systems, and Component Libraries

• Atomic Design

Design-Books

• Atomic Design

Colors

• coloors - color schemes generator

• Hex Colors - color palette generator

• Canva Colors - multiple color tools

• contrast ratio - contrast checker

• Adobe Color - color wheel and other tools

• Name that Color - color namer

• Accessible Brand Colors - accessibilty checker for colors

• Flat UI Colors - color palettes

• Coolors Palette Creator - random color palette generator

• mycolor Palette Creator - random color palette generator

Design-Systems

• Polaris by shopify

• Evergreen Segment

• Eva Design Assets

• Vercel

• Ant Design

• Carbon

• Storybook

• Radix

• Primer

• Blueprint

• Atlassian

• chakra

Fonts

• Google Fonts - huge font library

• Font Flipper - random font generator

• Font Squirrel - webfont generator

• Online Font Converter - create @font-face rules and convert fonts online

• fonts in the wild - font library

• webfontloader - tool for controling @font-face rules

• BEfonts - free fonts for designers

Icons

• flaticon - vector icons & stickers

• Material Icons - huge icons library

• icones - icon sets

• Tabler Icons - fully customizable free svg icons

• iconmonstr - icon library

• IcoMoon - pixel perfect icon solutions

• heroicons - free icon library

• heroicons - by the makers of tailwindcss

• Bootstrap Icons - free icon library

• Font Awesome - icon library

• Simlpe Icons - icon library

• Icon Finder - icon library and illustrations

• 700+ CSS Icons - open-source svg and figma ui icons

• Streamline - icons and emojis

Optimization Tools

• Squoosh - image optimization

• tiny png

• ImageOptim

Stock Photos-Illustrations-Mockups

• Unsplash - royalty free stock photos

• Pexels - free stock photos & videos

• Pixabay - free images & royalty free stock

• Doodle Ipsum - free illustrations and doodles

• ls.graphics, Mockups and UI toolsl - mockups, illustration and ui tools

• PurePNG - Pure PNG Image Library

• FavPNG - Free Transparent PNG Images

• CleanPNG - Free PNG Images

• StickPNG - Free PNG Stickers

Tools-for-Responsive-Design

• MY DEVICE.io a tool for responsive design, browser features

Tools

• 10015 - All Online Tools in “One Box”

• Contrast - a tool for contrast checker

Typography

• Typography 101 - Web Design For Beginners by Dev Ed - typography 101 introduction video

• The Fastest Google Fonts by CSS Wizardry - an article about how to enhance performance with google fonts

Design-Websites

• Laws of UX - best practices for design and user interfaces

• uxcel - ui/ux design courses and skill tests

• Ux Tools - tutorials and methods, skills about design

• Design Resources - huge source for all kind of design tools

• UI Design Daily - daily design and ui pieces

• Daily Handpicked Free UI Kits for Your Projects daily design and ui pieces

HTML

Accessibility

• A Complete Guide To Accessible Front-End Components by Vitaly Friedman

• The Importance Of Manual Accessibility Testing

HTML-Articles

• How Web Works by Vasa

• 7 useful HTML attributes you may not know

• Building an adaptive favicon

Checklist

• Front-End Checklist by David Dias

• Checklist by The A11y Project

• The Front-End Checklist

• HTML Best Practices

Performance

• My Challenge to the Web Performance Community

Validation

• Can I use?

• Can Include

• Browser Default Styles

• W3C Markup Validation Service

• What the tag ?!

HTML-Websites

• HTML CheatSheet

• How HTTPS works

• How DNS works

---

CSS

CSS-Articles

• An Interactive Guide to Flexbox by Josh W Comeau

• Understanding Clip Path in CSS by Ahmad Shadeed

• Defensive CSS by Ahmad Shadeed

• Efficient font stack with Sass by Fabrice Lejeune

• Responsive Typography With Sass Maps by Jonathan Suh

• What Does a Well-Documented CSS Codebase Look Like? by Kaloyan Kosev

• The Options for Programmatically Documenting CSS by Kaloyan Kosev

• Structuring your SASS projects

• A Complete Guide to Grid

• 14 CSS Topics You Must Know

• Simplifying Form Styles With accent-color

• The Large, Small, and Dynamic Viewports

• Understanding Layout Algorithms

Architectures-Methodologies

• Sass Guidelines by Kiltty Giraudel

• Scalable and Modular Architecture for CSS by Jonathan Snook

• CSS Guidelines by Harry Roberts

• An Introduction To Object Oriented CSS (OOCSS)

• A Simple SCSS Architecture by Matthew Elsom

• BEM Cheat Sheet

• Organizing Your CSS / SCSS Code

CSS-in-JS

• Styled Components

• Stitches

• JSS

• Emotion

CSS-Design-Systems

• Css Layout

• SmolCSS

CSS-Generators

• CSS-GEN box-shadow Generator

• CSS-GEN border-radius Generator

• CSS-GEN transform Generator

• CSS-GEN image-filter Generator

• CSS Grid Generator - grid generator

• CSS Buttons Generator - Button generator

• CSS box-shadow generator - box-shadow generator

• Neumorphism.io - Generate Sof-UI CSS code

• Make some waves! - Wave generator

• CSS Separator Generator - make awkward separators html and css

• uiGradients - gradient generator

• Easing Gradients - gradient generator

• CSS Gradient - gradient generator

• gradient-designer - gradient generator

• Mesh Gradient - gradient generator

• Fancy Border Radius - border-radius generator

• Smooth shadow gradient - box-shadow gradient

• CSS Scroll Shadows!

CSS-Videos

• Sass Tutorial for Beginners - CSS With Superpowers by codeSTACKr

CSS-Websites

• css-tricks

• cssreference.io

• cssauthor

• Modern Css Solutions by Stephanie Eckles

• Style Stage by Stephanie Eckles

• Every Layout by Heydon Pickering & Andy Bell

• CSS { In Real Life } by Michelle Barker

• Css CheatSheet

• State of CSS

• Sass cheatsheet

• Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.

• What does 100% mean in CSS?

---

Front-End-Resources

Front-End-Articles

• Smashing Magazine - Guides to Web Design and Development

• Why learning to code is so damn hard?

• The Front-End Developer's Guide to the Terminal

• How To Learn Stuff Quickly

• Front-end may soon need new sub-disciplines

• Learning to Code: How to Think Like a Programmer - Zapier

• How to write maintainable JavaScript code in 2023 — Web or Node.js

Front-End-Challenges

• Frontend Mentor.io

• DevProjects by codementor.io

• Ace FrontEnd

• codewell

• devChallenges

Front-end-Surveys

• State of Frontend 2022

• State of JavaScript

• State of CSS

Front-End-Websites

• Patterns - A collection of code snippets to help you optimize your web projects.

• The Valley of Code

• This vs That

• 101 DevTools Tips

• Front End Web Development Resources by Ritik Patni

• Front-End Dev Bookmarks by Tim Navrotskyy

• 200+ Ultimate Resources for Front-End Development in 2021 by Rahul

• ZTM Free Developer Resources

Git&Github

Git-Courses

• Learn Git Branching

• Introduction to GitHub

Git-Videos

• Git & GitHub Crash Course For Beginners by Traversy Media

• Git Explained in 100 Seconds by Fireship

• Getting Started with GitKraken for GitHub Users

Git-Websites

• Git Explorer

• Dangit, Git!?!

• Git from Beginner to Advanced by MadeByMike

• Advanced Git Tutorials by Bitbucket

• Little Things I Like to Do with Git

• Oh Shit, Git!?!

Git-Tools

• lazygit simple terminal UI for git commands

JavaScript

JavaScript-Articles

• Top 6 JavaScript ES12 Features You Should Use

• Javascript in Plain English - New JavaScript content every day

• Building the DOM faster: speculative parsing, async, defer and preload by Milica Mihajlija

• The Ultimate Tutorial on JavaScript DOM - JS DOM with Examples

• Learn map(), filter(), reduce(), and sort() in JavaScript

• How to create a dark theme system in 5 minutes or less with vanilla JS.

• ES6 Handbook

• Introduction to Promises and Async and Await Promises in Javascript! ✨

• How I built a modern website in 2021

• 17 Life-Saving JavaScript One-Liners 🔥

• 2ality – JavaScript and more

• How to Use JavaScript Arrays Like a Pro

• How much JavaScript should I learn? 🤔

• Statements Vs. Expressions

• 165+ JavaScript terms you need to know

JavaScript-Books

• You Don't Know Javascript by Kyle Simpson

• Functional Light JavaScript by Kyle Simpson

• Eloquent Javascript by Marijn Haverbeke

• JSbooks - The best free JavaScript resources

• Exploring JS: JavaScript books for programmers

• Learning Patterns by Lydia Hallie and Addy Osmani

• JavaScript Allongé: A strong cup of functions, objects, combinators, and decorators

JavaScript-Conference-Talks

• Becoming a better developer by using the SOLID design principles by Katerina Trajchevska

• The myth of the “Real JavaScript Developer” by Brenna O'Brien

• How to fix the web by Brendan Eich

• Get better at JavaScript with just JavaScript - Wes Bos

• Learning Functional Programming with JavaScript - Anjana Vakil

JavaScript-Courses-Practices

• 30 Days of JavaScript

• Introduction to How to Write an Open Source JavaScript Library - egghead

• Learn Modern Javascript - scrimba

• Learn JavaScript for free - scrimba

• clean-code-javascript

• node.js-best-practices

• JavaScript Algorithms and Data Structures

• JavaScript Cheat Sheet: The Advanced Concepts

JavaScript-Tools

• vite.js

• Parcel

• gulp

• webpack

• esbuild

• Grunt

Babel

JavaScript-Websites

• Just Javascript - text based javascript course

• whatthefuck.is - - dan's javascript glossary

• JavaScript Patterns Workshop

• Free Javascript Resources

• Javascript CheatSheet

• SheCodes Javascript Cheatsheet

• JavaScript For Cats

• Javascript.info

• Learn Javascript Online

• LEARN JS

• egghead.io - Javascript

• codecademy - Learn Javascript

• public-apis

• JSON Crack - seamlessly visualize your JSON data instantly into graphs

• Manage HTML DOM with vanilla JavaScript

React

React-Articles

• How to learn React - The Effective way

• 5 Packages Every React Developer Must Know

• Ultimate ReactJS Resources 🛠For Web Developers 2021👨‍💻

• React — 5 Things That Might Surprise You

• Implementing Atomic Design in Modern React Development

• Some Features Every React Developer Should Know

• A Complete Guide to useEffect

• Persistent login in React using refresh token rotation

• React Authentication & Access Control

• 13 Libraries You Should Know as a React Developer

• 19 GitHub Repositories to Become a React Master ⚛️🧙

• Atomic Design and ReactJS

React-Frameworks

• Next.js

• REMIX

• Gatsby

React-Hooks

• react-use

• React Hooks Cheatsheet

• React Hooks Simplified

React-State-Management

• Zustand

• Jotai

• Redux

• Recoil

• Easy Peasy

React-Tools

• Mantine

• Create React App

• React Starter Projects

• React Dev-Tools

• React Redux

• Storybook

• React.js cheatsheet

• evergreen

• React Styleguidist

• React Testing Library

• REACTIDE

• React Cosmos

• React Proto

• React Hot Loader

• React Hook Form

• React Bits

• React Bootstrap

• kbar - command + k interface

TypeScript

TypeScript-Articles

• TypeScript for React Developers – Why TypeScript is Useful and How it Works

• An Introduction to TypeScript

• The Relevance of TypeScript in 2022

• Creating a TypeScript React Application with Vite

• Creating Custom Types in Typescript

• React Event Handlers with TypeScript

• With 30+ Articles, You Will Not Be Confused When Learning TypeScript

TypeScript-Courses

• React+TypeScript Cheatsheets

• Beginners TypeScript Tutorial

TypeScript-Challenges

• Type Challenges

• TypeScript exercises

TypeScript-Tools

• TypeScript Error Translator

Other-Content

Blogs

• Dav Abramov Medium

• Overreacted - Dav Abramov Blog

• Kent C. Dodds Blog

• DEV Community

• alligator.io

• Flavio Copes

• Una Kravets

• Silvestar Bistrović

• Zell Liew

• Kyle Cook (Web Dev Simplified)

• Lydia Hallie

• Lee Rob

Other-Books

• Frontend Masters Books

Code-Formatters

• Prettier

• dirtyMarkup

• awesome-code-formatters

Developer&Productivity-Tools

• Raycast - Spotlight with super powers with lots of awesome extensions.

• Snipetty - Tool for developers to create code snippets.

• Polypane - Development focused browser for building apps and refactoring.

• React Developer Tools - Chrome extension for React Development.

• Thor - Easy switch between apps by custom shortcuts.

• AltTab - Customize your alt-tab settings deeply.

• xScope - Great tool for both design and development.

• Sip - Color picker for Mac OS.

• RainDrop - Bookmark manager.

• Github Copilot - Your AI pair programmer.

• WakaTime - Track your time in both browser and IDE.

• GitKarken - Git GUI & Git CLI with a lot of features.

• DevBook - Search through the DevDocs and StackOverflow without switching to your browser.

• daily.dev - Great tool for finding hottest trends and popular articles.

Discord Communities

• Frontend Developers

• Kevin Powell - Community

• KCD - Kent C. Dodds Community

• Reactiflux

• Bruno Simon Community (Three.js)

• Next.js Community

Documentations

• Mozilla Developer Network

• React Docs (beta)

• DevDocs

• sass-lang

- TypeScript Documentation

Interactive-Games

• Flex Box Adventure

• Knights of the Flexbox Table

• Flexbox Zombies

• Flexbox Froggy

• Flexbox Defense

• Flexy Boxes

• CSS Grid Garden

• CSS Grid Cheat Sheet

• CSS Grid Attack

• CSS Grid Critters

• CSS Selectors Cheatsheet

• CSS Animations

• CSS Rules

• CSS Filter Blend

• CSS Battle

• CSS Diner

• TypeScript Exercises

• React Tutorial

• Elevator Saga - JavaScript

• Screeps - JavaScript

• Untrusted - JavaScript

• PromiSEES - Javascript

• JSchallenger

• JSRobot

• Service Workies (PWAs)

• Learn Git Branching

• Select Star SQL

• SQL Police Department

• SQLBolt

• Regex Crossword

• Regex101

• RegexOne

• CodinGame

• OpenVim

• Jamstack Attack

• JavaScript Quiz

Interview Practices

• Coding Interview University

• mission-peace interview

• Front-end Developer Interview Questions

• React Interview Questions

• 123 Essential JavaScript Interview Questions

• JavaScript Interview Questions & Answers

• JavaScript Questions

• Tech Interview Handbook

• Front End Interview Handbook by Yangshun Tay

• JavaScript Code Challenges

• 10 Interview Questions Every JavaScript Developer Should Know

System Design

• Front End Engineer

Newsletters

• STACKR News

• newsletter by Kevin Powell

• flaviocopes newsletter

• CSS-Tricks Newsletter

• Smashing Magazine Newsletter

• ModernCSS by Stephanie Eckles

• Stefan's Web Weekly

• JavaScript Weekly

• Web Tools Weekly

• Web Dev Simplified newsletter

• Frontend Focus

• CSS Animation Weekly

• Dev Tips

• cssweekly

Podcasts

• Syntax.

• Front End Happy Hour

• The CSS Podcast

• The freeCodeCamp Podcast

• Shop Talk Show

• CodePen Radio

• JavaScript Jabber

• JS Party

• Ladybug Podcast

• Orbit FM - Web of Tomorrow

• Full Stack Radio

• Frontside Podcast

• developer tea

• egghead.io podcast

• The Front End Podcast

• Frontend News 2021

Reddit-Subreddits

• freeCodeCamp.org: Learn to Code for Free From Home

• programming

• AskComputerScience

• iOS Programming

• Learn Javascript

• Computer Science

• web_design

• coding

• learn programming

• javascript

• AskProgramming

• webdev: reddit for web developers

• HyperText Markup Language

• HTML5 & Friends

• Bringing the web out of 2007 since 2013.

• Cascading Style Sheets

• Official announcements pertaining to reddit custom CSS

• ProCSS

• css_irl

• Help for reddit's CSS

• Sass - a language for building awesome CSS

Roadmaps

• React Roadmap

• 2022 Web Dev Roadmap by codeSTACKr

• Web Skills Roadmap

• Step by step guide to becoming a modern frontend developer by roadmap.sh

• The Front-End Developer Learning Roadmap by FrontendMasters

• How to Learn Javsascript 2021

• React advanced education

Online-Curriculums

• freeCodeCamp

• The Odin Project

• Web Dev for Beginners - Microsoft

• Coding Interview University

Youtube-Channels

• Fireship

• Kevin Powell

• codeSTACKr

• Traversy Media

• DesignCourse

• Web Dev Simplified

• Wes Bos

• The Net Ninja

• Dev Ed

• Adam Argyle

• Coder Coder

• Clever Programmer

• Coding Tech

• Dorian Develops

• Adrian Twarog

• Ben Awad

• Kenny Gunderman

• Tech With Tim

• Florin Pop

• Program With Erik

• Codevolution

• Devslopes

• freeCodeCamp.org

• CS50

• JSConf

• uidotdev

Mixed-Content

• web.dev

• Coder Survival Guide

• tutorialzine

• 30 Seconds of Code

• Awesome Free Developer Resources by codeSTACKr

• Design Resources by Brad Traversy & Csaba Kissi

• The Ultimate List of Web Development Podcasts

• Best Design Resources for Developers by Suhail Kakar

• Rico's cheatsheet

• cult. by Honeypot

• codecademy Web Development Cheatsheet

• OverAPI - Collecting All Cheat Sheets

• codrops

• free-programming-books

• free-for.dev

• awesome-resources

• Today I Learned by jbranchaud

• Every Programmer Should Know 🤔

• Visual Studio Code Cheat Sheet

• Solidity

Videos

• Is Web3 all Hype? Top 10 Web 3.0 Questions & Answers by Fireship

Youtube Channels

• Dapp University

• Web3 Foundation

• Moralis Web3

• EatTheBlocks