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.
- 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
- 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
- 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
- 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
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!
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.
[paid]
Frontend Masters: Will Sentance - JS hard parts - v2
Frontend Masters: Kyle Simpson - Deep JS - v3
or
[free]
Kyle Simpson, You Dont Know JS - 1st edition
Kyle Simpson, You Dont Know JS - 2nd edition - STILL IN DRAFT
[paid]
Frontend Masters: Mike North - Typescript v4
or
[free]
[paid]
[free]
Just the first modules about C, Data Structures and Algorithms: CS50 Harvard, Intro to Computer Science
[free]