DEV Community

gaurbprajapati
gaurbprajapati

Posted on

Frontend development skills for Product based companies 🔥

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 ❤️

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

Top comments (3)

Collapse
 
chiennd profile image
Nguyen Dang Chien

thanks for sharing

Collapse
 
julioherrera profile image
Julio Herrera

Informative, thanks for sharing your knowledge of frontend development skills.

Collapse
 
tharapearlly profile image
Thara Pearlly

Much helpful. Thanks