Becoming a frontend developer seems daunting, especially if you are entirely new to the field of coding. The easiest way to begin any work is to strategize with a roadmap. A roadmap is the best way to kick-start your attempt to become a frontend developer.
Many people have pinged me on chat asking about what bare-minimum topics for working on product-based organisation. I have interacted many people who basically working with product-based organisation and building enterprise level applications. On basis of my interaction, I have collated following topics which might give a direction to define a good frontend developer path.
Basic JavaScript Concepts :
- Data types (tinyurl.com/43hxnjdn)
- 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
Basic HTML concepts:
- block element
- import
- etc – infinite questions
Basic CSS concepts:
- 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
Basic Web concepts:
- 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
Advanced JavaScript concepts:
- OOPs concept
- Design Patterns
- Singleton
- Provider
- Prototype
- Observer
- Module
- HOC
- Understanding V8 in depth
- JIT
- Interpreter
- Execution
- Compiler
- Currying
Basic ReactJS concepts (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
Once you have mastered the basics, you can go ahead and learn advance frontend technologies, which will give you an edge over others. Follow a structured path and equip yourself steadily rather than trying to learn the entire web development spectrum.
Hi