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.
𝗕𝗮𝘀𝗶𝗰 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
- Data types
- Functions
- Scope in JavaScript
- Closure
- Event loop
- Prototype and prototype chain
- Class and inheritance
- DOM
- bind/call/apply
- Promise
- WebAPI
- Task queue
- Call stack
- Async/await
- Generators
- Typescript
𝗕𝗮𝘀𝗶𝗰 𝗛𝗧𝗠𝗟 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
- block element
- import
- etc - infinite questions
𝗕𝗮𝘀𝗶𝗰 𝗖𝗦𝗦 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
- Class and other selectors
- Pseudo Classes
- Box Model
- Pseudo Elements
- CSS type - flex, grid, normal
- How to centre
- pseudo classes and elements
- All element states - active, hover
- Media queries
- Pre-processors - SCSS or LESS
- mixins
- CSS constants
- BEM
- Import
𝗕𝗮𝘀𝗶𝗰 𝗪𝗲𝗯 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
- Page rendering cycle
- http/https/https2
- CORS
- Local storage/Session storage
- Cookie
- JWT
- XHR
- Micro Frontend
- REST/GraphQL/Socket connection
- Browser Concepts
- Debugging Application
- Chrome Dev Tool Features
𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
- OOPs concept
- 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
- Currying
𝗕𝗮𝘀𝗶𝗰 𝗥𝗲𝗮𝗰𝘁𝗝𝗦 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 (bonus): -
- Introduction JSX
- React Component
- Component State and Props
- Adding Style (CSS)
- Functional and Class components
- React Lifecycle Methods
- Virtual DOM
- React Hooks
- Custom Hooks
- Context API
- Synthetic Events
- Routing
- Data Flow (Redux/Flux)
- Server-Side Rendering
- Unit Testing
- Jest & React Testing library
- Mocking Data
- Understanding Webpack (Bundler)
- Babel, env, prettier, linter
Save it for future reference ❤️
𝐃𝐨 𝐋𝐢𝐤𝐞, 👍 𝐒𝐡𝐚𝐫𝐞 𝐚𝐧𝐝 𝐂𝐨𝐦𝐦𝐞𝐧𝐭 💬
Top comments (3)
thanks for sharing
Informative, thanks for sharing your knowledge of frontend development skills.
Much helpful. Thanks