Published on

Frontend Developer Roadmap 2024

Frontend Developer Roadmap 2024

Frontend Developer Roadmap 2024

Roadmap to become Frontend Engineer

Frontend Engineers or Frontend Developers or Web Developer are one of the most demanding position in the Tech industry. Web development today is completely different from what it was a few years ago with the rise of modern javascript frameworks like React, Angular, Vue, etc. Modern web development needs a deep knowledge of web fundamentals, different frameworks, development process, web performance etc apart from HTML, CSS & JS. Below is the detailed analysis of each topics

FRONTEND ROADMAP (4)

1. Web Fundamentals

  • Internate, HTTP, DNS, Domain, Hosting ets
  • Browser and How it works?
  • Web Accessibility
  • Storage, cookies

2. HTML

3. CSS

  • CSS basics and Box Model
  • CSS Positions
  • Responsive Designs and Media Queries
  • CSS Grid
  • Flex Box
  • Preprocessor Scripting languages (SASS, LESS etc)
  • Other CSS libraries ( Tailwind, Bootstrap ) etc

4. Javascript

  • JS basics and fundamentals
  • Native JS Functions and their Polyfills ( Array Methods )
  • DOM Manipulations
  • Functions and Classes in Javascript
  • How Javascript works ?
    1. Var, let, const, temporal dead zone
    2. This Keyword in JS
    3. Hoisting
    4. Scope chain
    5. Closure in Javascript
    6. JavaScript Engine, Execution context, Runtime Environment, Call Stack and Event loop
  • Object Oriented Javascript
    1. Objects in Javascript
    2. Classes in Javascript
    3. Object Oriented Concept and Prototype inheritance
  • Asynchronous Javascript

5. Javascript Framework

  • React Js
    1. Next Js
    2. Gatsby
  • Angular
  • Vue
  • Svelte

6. State Management Library

  • Redux
  • React Context

7. JS Tools

  • Task Runner - Gulp, Grunt
  • Module bundlers - Webpack, Browserify
  • Package Manager - NPM, Yarn
  • Linting tool - ESlint, JSlint

8. Version Control System

9. Testing

  • UNIT Testing
  • E2E Testing

10. Type Checker

  • Typescript

ADVANCED TOPICS

1. Web Performance and Optimisation

  • Rail Model
  • Performance Metrics
  • Tool used - Devtool, Lighthouse
  • How the browser renders a web page? — DOM, CSSOM, and Rendering

2. Progressive Web App(PWA)

  • PWA Architecture
  • Offline Capabilities
  • Service Worker
  • Push Notification

3. Rendering

  • Different types of rendering Methods Like SSR, CSR and Mixed
  • What is the pros and cons of each and when to use particular rendering.