Hey Devs! I'm front-end development! And many of you have asked me where can get useful resources for blogging or web dev. So, I want to share some resources which I use when building things! I hope they will be useful to you too. Thanks!
Introduction
This is a collection of (awe)some resources, mostly focused on front-end web development.
- Introduction
- Design
- HTML
- CSS
- Git&Github
- JavaScript
- React
- TypeScript
- Other-Content
- Web-3.0
Design
Design-Articles
- Pixel Perfect Web Development: 5 Essential Steps by Daniel Corin Stig
Learn Responsive Design! by web.dev
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
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
- 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
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
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
- 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
- Understanding Clip Path in 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
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
-
CSS-Design-Systems
- 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-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?
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!?!
JavaScript
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
JavaScript-Articles
- 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 🔥
JavaScript-Books
- You Don't Know Javascript by Kyle Simpson
- Eloquent Javascript by Marijn Haverbeke
JSbooks - The best free JavaScript resources
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-Tools
JavaScript-Websites
- Just Javascript - Dan Abramov
- 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
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
React-Frameworks
React-Hooks
-
React-Tools
- 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-Courses
TypeScript-Challenges
- Type Challenges
- TypeScript exercises
Other-Content
Algorithm-Challenges
Other-Articles
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)
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.
daıly.dev - Great tool for finding hottest trends and popular articles.
Discord Communities
- Kevin Powell - Community
- KCD - Kent C. Dodds Community
- Reactiflux
- Bruno Simon Community (Three.js)
- Next.js Community
Documentations
Front-End-Challenges
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
- 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
-
Reddit-Subreddits
- 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
- 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
Mixed-Content
- web.dev
- tutorialzine
- 30 Seconds of Code
- Awesome Free Developer Resources by codeSTACKr
- Design Resources by Brad Traversy & Csaba Kissi
- 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
- 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
Web-3.0
Articles
- Why does Web 3.0 Exist? - Web3 Oversimplified
- Web 3.0: A Developer Roadmap, Guide, and Resources to Get Started