Awesome Frontend Dev

Intro

I created this repository because I often see frontend developer beginners focusing more on the framework/library rather than the fundamentals. I have created three folders with JS, TS, and CSS, covering various topics (including those most frequently asked in interviews) that can help build a solid foundation. Note: these are knowledge "bites", and I expect there to be a curiosity to investigate deeper at some point.

Navigation

JS

Ajax vs JSONP
Anonymous vs named vs arrow functions
Callback hell, Promises and Async/Await
Bundler vs transpiler
Call vs apply vs bind methods
Closure
Coercion
Const vs Object.freeze method
Currying technique
Dynamic import expression
Event propagation, event bubbling and event capturing
Event loop
Generator functions
Hoisting mechanism
IIFE
JS Engine
Let vs const vs var
Load vs DomContentLoaded event
Map vs forEach loop
Map vs weakmap vs set
Module system
Native and host objects
New keyword
Null vs undefined vs undeclared variables
Optional chaining operator
Polyfills and shims
Prototypal inheritance
Scope
Script vs script async vs script defer tag
Short circuiting evaluation
Strict mode
Symbol
Template literals strings
This keyword

TS

Abstract keyword
Access modifiers
Const assertion
Declare keyword
Enums
Function overloading
Generics
Getters and setters methods
Index signature
Infer keyword
Mixin
Never type and never vs void type
Non null assertion
Override keyword
Project references feature
Structural typing
Template literal types
Unique symbol
Unknown vs any type

CSS

Block formatting context (rendering)
Block vs inline vs inline-block properties
Box model
Document flow
Flexbox vs grid
How Css works
Inheritance
Pre processor
Responsive design
Specificity
Stacking context
Static vs relative vs absolute vs fixed position + translate()
Variables
Z-index property

General

Accessibility
Authentication strategies
Content Security Policy CSP
Client Side Rendering vs Server Side Rendering vs Static Site Generation
Internet - HTTP - DNS - Domain Name - Web Hoisting - Browser
OWASP Top 10
Service Workers
Local storage vs session storage vs cookies
Web Sockets
Web Workers

Mindset and learning pace

Remember to also put into practice what you learn: theory is good, but without practice, you won't be able to assimilate fundamental concepts. ESSENTIAL: maintain a curious mindset and avoid rushing, but above all, learn at a slow pace. Since these are dense topics, if you go too fast, you risk missing at least one-third of what was written above. So: go slowly + lots of practice. You've got this!

Resources

Fundamentals extend not only through JS, TS, and CSS but also through design patterns, data structures, and algorithms. Below, I will list a "must have" resources (both paid and free) that complement what has been written above. I strongly recommend the paid ones, as they are more comprehensive and also include interesting exercises that you can undertake: think of it as an investment in your future.