👉 Compact list of essential relevant topics, no exhausting and overwhelming list
👉 Regularly and manually updated
👉 Hand-picked by a Senior Frontend Developer doing frontend since 1990s
👉 Different media types
- (Visualization) Step by step guide to becoming a modern frontend developer in 2022
- (Guide) Learn wev development
- (Course) Frontend Bootcamp (Microsoft)
- (Course) Web Development for Beginners - A Curriculum
- (Course) Frontendmasters Web Development Bootcamp (free)
- (Article) How to write good code
- (Video) Web Demystified
- (Guide) HTML basics
- (Guide) How Web Works - What happens behind the scenes when we type google.com in a browser?
- (Books) Great (and Free!) Web Development Books You Can Get Online
- (Article) One year of coding – recommendations for beginners from a beginner
- (Guide) CSS basics
- (Guide) Learn CSS
- Flexbox:
- (Guide) Basic concepts of flexbox
- (Playground) Flexbox Defense
- (Playground) Flexbox Adventure
- (Reference) Complete Guide to Flexbox
- Grid:
- (Guide) Basic concepts of grid layout
- (Playground) CSS Grid Garden
- (Reference) Complete Guide to Grid
- (Video) CSS Grid video lesson
- (Video) Learn CSS positioning in 9 minutes
- (Guide) Learn box alignment
- (Guide) mdn web docs on Positioning
- (Guide) cssreference.io
- (Guide) CSS Layout cookbook
- (Reference) Layout patterns
- (Article) The Modern JavaScript Tutorial
- (Guide) JavaScript Beginner Tutorial
- (Guide) JavaScript — Dynamic client-side scripting
- (Guide) Eloquent Javascript - A Modern Introduction To Programming
- (Article) JavaScript for impatient programmers (ES2022 edition)
- (Article) Beginner JavaScript Notes + Reference
- (Article) You Don't Know JS Yet (book series) - 2nd Edition
- (Playground) ES6 Katas - Learn ES6 by doing it
- (Playground) JavaScript - Learn with Katas
- (Guide) Introduction to the DOM
- (Playground) Learning DOM API in a playful way
- (Visualization) A visual introduction to Git
- (Playground) Learn Git Branching – Educational challenges
- (Video) Complete Git and GitHub Tutorial
- Guides on web.dev
- More guides...
- Be the browser’s mentor, not its micromanager
- Algorithm Visualizer
- Understanding Layout Algorithms
- Web Development Reading List
- CSS Weekly
- CSS-Tricks
- JavaScript Weekly
- Typescript Weekly
- ESnext news
- CSS Layout News
- Smashing Magazine
(...) the single most valuable skill you can possess to remain employable over time is learning how to learn.
awesome :)