A roadmap is the best way to kick-start your attempt to become a frontend developer.

Bare-minimum topics for working on product-based organisation.

𝗕𝗮𝘀𝗶𝗰 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:

1. Data types
2. Functions
3. Scope in JavaScript
4. Closure
5. Event loop
6. Prototype and prototype chain
7. Class and inheritance
8. DOM
9. bind/call/apply
10. Promise
11. WebAPI
12. Task queue
13. Call stack
14. Async/await
15. Generators
16. Typescript

𝗕𝗮𝘀𝗶𝗰 𝗛𝗧𝗠𝗟 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:

1. block element
2. import
3. etc – infinite questions

𝗕𝗮𝘀𝗶𝗰 𝗖𝗦𝗦 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:

1. Class and other selectors
2. Pseudo Classes
3. Box Model
4. Pseudo Elements
5. CSS type – flex, grid, normal
6. How to centre
7. pseudo classes and elements
8. All element states – active, hover
9. Media queries
10. Pre-processors – SCSS or LESS
11. mixins
12. CSS constants
13. BEM
14. Import

𝗕𝗮𝘀𝗶𝗰 𝗪𝗲𝗯 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:

1. Page rendering cycle
2. http/https/https2
3. CORS
4. Local storage/Session storage
5. Cookie
6. JWT
7. XHR
8. Micro Frontend
9. REST/GraphQL/Socket connection
10. Browser Concepts
11. Debugging Application
12. Chrome Dev Tool Features

𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:

1. OOPs concept
2. Design Patterns a. Singleton b. Provider c. Prototype d. Observer e. Module f. HOC

3. Understanding V8 in depth
a. JIT
b. Interpreter
c. Execution
d. Compiler

1. Currying

𝗕𝗮𝘀𝗶𝗰 𝗥𝗲𝗮𝗰𝘁𝗝𝗦 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 (bonus): –

1. Introduction JSX
2. React Component
3. Component State and Props
4. Adding Style (CSS)
5. Functional and Class components
6. React Lifecycle Methods
7. Virtual DOM
8. React Hooks
9. Custom Hooks
10. Context API
11. Synthetic Events
12. Routing
13. Data Flow (Redux/Flux)
14. Server-Side Rendering
15. Unit Testing
16. Jest & React Testing library
17. Mocking Data
18. Understanding Webpack (Bundler)
19. Babel, env, prettier, linter

Save it for future reference ❤️

𝐃𝐨 𝐋𝐢𝐤𝐞, 👍 𝐒𝐡𝐚𝐫𝐞 𝐚𝐧𝐝 𝐂𝐨𝐦𝐦𝐞𝐧𝐭 💬