Introduction
This is a collection of (awe)some resources, mostly focused on front-end web development.
- Introduction
- API
- Data-Structures-and-Algorithms
- Design
- HTML
- CSS
- Front-End-Resources
- Git&Github
- JavaScript
- React
- TypeScript
- Other-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
Algorithm-Websites
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
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
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
Checklist
- Front-End Checklist by David Dias
- Checklist by The A11y Project
- The Front-End Checklist
- HTML Best Practices
Performance
Validation
HTML-Websites
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
CSS-Design-Systems
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
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
Front-end-Surveys
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
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
- 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
React-Hooks
React-State-Management
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
TypeScript-Challenges
TypeScript-Tools
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
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
- 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
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
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 ๐ค
Top comments (24)
Please consider this tool. I think it's highly beneficial and worth if for any frontend developer. Is has tons of tools for free in one single place. I think they've done a great job at putting this site together and all of the resources in one place.
(10015.io/)
Thank you for your effort. I went through the content of your article and I am surprised to find all the resources at one place. ๐ค๐ค๐
Don't forget to star on Github :p Thanks!
Great article!
Happy to help
ๆ่ฐขๅไบซ ่ฐข่ฐข๏ผ
Thanks. Bro.
Oh this is treasure. Thx man !! :)
Glad to help!
Hello ! If you're a frontend developer, I also recommend my newsletter. Every Monday you'll find frontend news, UX/UI articles, tools and more.
techfoutraque.hashnode.dev/
Thanks, this is awesome!
Oh, sorry. Its impossible to maintain links from here because its a dynamic list. So i will try to post on listings section.
Edit: I don't have any credits lol. Okay, I will move the list to the post, its better than nothing.
Can you please include this site called 10015.io. I noticed your from Turkey and the founder and creator of this awesome site is also Turkish. I learned about it on a LinkedIn post and its super cool and useful.
This is awesome! I'm where you were a year ago and so excited to have all these resources rounded up in one place. Thanks!
Happy coding Jasmine! :)
Great list, thanks :)
Thanks!
wow, Thanks it's awesome.
Great job, congratulations and thanks๐๐๐๐
I would highly recommend this tool and chrome extension. It's an amazing resource for front end development.