Front-End Resources

Introduction

This is a collection of (awesome) resources, mostly focused on front-end web development.

• Introduction
• API
• Data-Structures-and-Algorithms Algorithm-Challenges Algorithm-Books Algorithm-Websites
• Design Design-Articles Design-Books Colors Design-Systems Fonts Icons Optimization Tools Stock Photos-Illustrations-Mockups Tools-for-Responsive-Design Tools Typography Design-Websites
• HTML Accessibility HTML-Articles Checklist Performance Validation HTML-Websites
• CSS CSS-Articles Architectures-Methodologies CSS-in-JS CSS-Design-Systems CSS-Generators CSS-Videos CSS-Websites
• Front-End-Resources Front-End-Articles Front-End-Challenges Front-end-Surveys Front-End-Websites
• Git&Github Git-Courses Git-Videos Git-Websites Git-Tools
• JavaScript JavaScript-Articles JavaScript-Books JavaScript-Conference-Talks JavaScript-Courses-Practices JavaScript-Tools JavaScript-Websites
• React React-Articles React-Frameworks React-Hooks React-State-Management React-Tools
• TypeScript TypeScript-Articles TypeScript-Courses TypeScript-Challenges TypeScript-Tools
• Other-Content Blogs Other-Books Code-Formatters Developer&Productivity-Tools Discord Communities Documentations Interactive-Games Interview Practices System Design Newsletters Podcasts Reddit-Subreddits Roadmaps Online-Curriculums Youtube-Channels Mixed-Content

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