## JavaScript Web Dev Expert Roadmap ### - [Apurv Khare](https://bio.link/apurvkhare/)

This guide contains the details about tech that anyone from fresher to senior can learn to become a fullstack 🧱 javascript developer 👨‍💻 alongwith the learning resources 📚 from where you can learn those tech

I have created this guide from my 6 years of experience as a web developer 🕸️ Also, this guide is for web developers who want to specialize in frontend 🖼️ as I explain frontend technology in detail

Except for some, all the learning resources provided in this guide are free 🆓. And the paid 💰 ones are NOT sponsored but provide a great value for its price

If this roadmap 🛣️ helps you in anyway, kindly share it with others too and let me know your feedback on LinkedIn

### HTML - HTML (HyperText Markup Language) is the most basic building block of the Web - It defines the structure of your web page - Learn the concepts of semantic tags, attributes, meta tags, etc - Learning resource - best free [resources](https://apurvkhare.vercel.app/learnwebdev) curated by me - [w3schools](https://www.w3schools.com/html/default.asp) - [Mozilla Firefox Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference)

### CSS - CSS (Cascading Style Sheet) is used to describe the presentation of a document written in HTML - CSS describes how elements should be rendered on screen, on paper, in [speech](https://www.w3.org/TR/css-speech-1/), or on other media. - CSS has tons of properties to learn, learning CSS is a life-long thing - Some of the important concepts of CSS are box-model, postioning, specificity, flex box, pseudo-classes, z-index, media query

### CSS learning Resources - [Learn CSS](https://web.dev/learn/css/) by Google - best free [resources](https://apurvkhare.vercel.app/learnwebdev) curated by me - [Flexbox](https://flexbox.io) - [CSS Grid](https://cssgrid.io) - [Mozilla Firefox Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

### Build Websites - Watch a tutorial from [here](https://apurvkhare.vercel.app/learnwebdev) or any youtube tutorial and follow along and build websites - Learn basic [git & github](https://www.youtube.com/watch?v=RGOj5yH7evk) - Push the project on github and deploy on [netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) or [vercel](https://vercel.com/docs/concepts/deployments/overview) for free - Build, build, build - For project ideas refer [FrontendMentor](https://www.frontendmentor.io/challenges) and [this](https://github.com/florinpop17/app-ideas) git repo

### Javascript - Javascript is the only programming language (except for [web assembly](https://webassembly.org/)) that the browser natively understands - You might have heard of languages and frameworks like [GWT](http://www.gwtproject.org/), [Dart](https://dart.dev/web), etc which can be used for frontend development. But all these compile and translate their code into javascript and then the javascript code is executed on the browser - So, as a Frontend Developer you must have a great command over Javascript

#### Javascript important concepts - Javascript program execution - Execution context, variable environment, call stack - Higher order functions & callbacks - Closure - Application of Closure - currying - [memoization](https://apurv.hashnode.dev/memoization) - this keyword - call, apply, bind - behavior of this in arrow functions

- Hoisting, let & const - temporal dead zone - Function scope v block scope - IIFE(Immediately invoked function expression) - [ES6 features](https://github.com/apurvkhare/react-in-depth/blob/main/chapter-0/JSPrerequisite.md) - Array higher order methods(map, filter, reduce, etc) - DOM API concepts - [Event delegation, bubbling & capturing](https://apurv.hashnode.dev/event-delegation-capturing-and-bubbling)

- Pure functions - pass by value, pass by reference, [object deep comparison](https://apurv.hashnode.dev/javascript-objects-deep-comparison) - Function constructor - Prototype chaining - OOPS in JS - [async tasks, event loop, web APIs](https://www.youtube.com/watch?v=b9Alqh5xWmU) - callback hell - promise - async/await(yield & generators)

### JavaScript learning Resources - [Udemy](https://www.udemy.com/course/the-complete-javascript-course/) (paid resource) - [Namaste Javascript](https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) - My [Javascript slides](https://ak-javascript-slides.netlify.app/) (currently works only on laptop) - Best free [resources](https://apurvkhare.vercel.app/learnwebdev) curated by me

### Build web apps - Follow along some [youtube tutorials](https://apurvkhare.vercel.app/learnwebdev) which build websites with HTML, CSS and JS - Build couple of the projects on your own - For project ideas refer [FrontendMentor](https://www.frontendmentor.io/challenges) and [this](https://github.com/florinpop17/app-ideas) git repo - Now before you build more websites, there are some important concepts that you should be aware, check the next slides

#### Basic client-server concepts - URL - HTTP protocol - Client - Server - Learning these concepts in brief from [here](https://www.youtube.com/watch?v=RsQ1tFLwldY) - fetching data from server the right way using fetch API and concepts of [debounce](https://apurv.hashnode.dev/debouncing) and throttling

### Critical Rendering Path - The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and Javascript into pixels on the screen - Optimizing the critical render path improves render performance - Learning resource - [Udacity](https://www.udacity.com/course/website-performance-optimization--ud884) - [blog](https://bitsofco.de/understanding-the-critical-rendering-path/)

### Web vitals - Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web - There are three main metrics - LCP: largest contentful paint - FID: first input delay - CLS: cumulative layout shift

- We can measure these metrics locally by generating lighthouse report from chrome devtools and use [pagespeed insights](https://pagespeed.web.dev/) to measure these metrics for a deployed website - Learning resource - [google blog](https://web.dev/learn-web-vitals/) - [google youtube video](https://www.youtube.com/watch?v=AQqFZ5t8uNc) - [blog](https://www.contentkingapp.com/academy/core-web-vitals/)

### Build build build - Now by learning all the important frontend concepts and HTML, CSS and JS build at least three projects keeping the user experience and performance in mind - Build apps like - email client UI eg: outlook, gmail - data tables - registration forms - Play with some the [web APIs](https://developer.mozilla.org/en-US/docs/Web/API) provided by browser and use them to build your web apps

### Frontend Framworks - Now it's time to choose a framwork for developing bigger applications - But first know why do you even need a framework? If you have already built 3-4 web apps with plain Javascript, then you should be able to answer this yourself

- Now choose a framework/library among the following - [React](https://reactjs.org/) (Recommended!!!) - [Svelte](https://svelte.dev/) - [Vue](https://vuejs.org/) - [Angular](https://angular.io) - You can play around with all or some of these frameworks/library and decide what you want to pick but the rest of the roadmap is based on React

### Why React - It has a great community support - The Facebook React team is continuously improving the React library and introducing amazing features - There are numerous resources to learn anything related to React - But most important, the demand of React developers is sky-rocketing - And if you are a capable frontend/fullstack developer who knows React, you can get a job at amazing product companies with handsome compensation

### React concepts - React.createElement() & ReactDOM - JSX & the role of Babel(transpiler) - Virtual DOM (very important) - adding style to JSX - What is state? - React class components and state management - Functional component and useState Hook

- React component life-cycle phases and methods - useEffect Hook - props, children prop, prop validation - conditional rendering - display list of data - controlled component - lifting the state up

### React intermediate concepts - Higher order component - Event handling, synthetic events - prop drilling and its soltuion - composition - context API & useContext Hook - useReducer Hook & useRef Hook - Pure component & React.memo - useCallback and useMemo

### React advanced concepts - useLayoutEffect, useImperativeHandle, useDebugValue - React concurrent mode - Suspense - code-splitting - Error Boundary

### React Learning Resource - My [React slides](https://ak-react-slides.netlify.app/) (works only on laptops) - Best free [resources](https://apurvkhare.vercel.app/learnwebdev) curated by me - [Kent's Blogs](https://kentcdodds.com/blog) (very important) - [EpicReact](https://epicreact.dev/), paid and expensive resource but the best course to learn React You can now build a basic React App by following any [youtube tutorial](https://apurvkhare.vercel.app/learnwebdev), there are plenty

### React state management - Although React's built in hooks do help manage the state of your apps very well but there are many battle tested state management libraries available to manage your server state - [Redux](https://redux.js.org/introduction/getting-started) (Important) - [react-query](https://react-query.tanstack.com/overview) (Recommended) - [X-state](https://xstate.js.org/docs/), [Recoil](https://recoiljs.org/docs/introduction/getting-started), etc

#### state management learning resource - learn redux from the creator of redux himself from [here](https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867) and [here](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) - [react-query](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2) - [x-state](https://www.youtube.com/watch?v=JauJhGTBFsc) - [recoil](https://www.youtube.com/watch?v=wHe6-2-ZX6Y) Now build a React app using any of the state management library

### Styling framworks in react - There are again, plenty of CSS frameworks to style your React app - [Material-UI](https://mui.com/)(Recommended) - [Ant design](https://ant.design/docs/react/introduce) - [Tailwaind](https://tailwindcss.com/docs/installation) - [React Bootstrap](https://react-bootstrap.github.io/getting-started/introduction), etc

#### Css framworks learning resources - [Material-UI](https://www.youtube.com/watch?v=aTPkos3LKi8) - [Ant design](https://www.youtube.com/playlist?list=PLiUrl-SQRR7LM5cw7azA2H_FZwFx2UgkI) - [Tailwaind](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) - [React Bootstrap](https://react-bootstrap.github.io/getting-started/introduction), etc Now build a React app using any of the CSS framework

### build build build - Build at least 2 React apps on your own which has some state mangement library and CSS framework - Use publicly available APIs from [RapidAPI](https://rapidapi.com/) - Can use Firebase for quick backend features, authentication, and database - Also keep in mind web security while building the apps, will talk about this in next slide

### web security - Learn about the world's [top 10](https://owasp.org/www-project-top-ten/) web security risks - Cross-Site scripting(XSS) - Cross Origin Resource Sharing(CORS) - Cross-Site Request Forgery(CSRF) - SQL injection [Learn](https://www.youtube.com/playlist?list=PL1y1iaEtjSYiiSGVlL1cHsXN_kvJOOhu-) about averting these security risks while building the React Apps

### React design patterns While building complex apps or libraries with React you would come across some problems and there are already well-tested solutions for the most repeated problems Follwing slide lists such advanced design patterns

- Context Module functions - Compound components - Flexible Compound components - Prop collections and getters - State Reducer - Control Props You can learn about these and any other such advanced design patterns from [Kent's Blog](https://kentcdodds.com/blog) and [here](https://www.patterns.dev/posts/reactjs/)

### testing javascript - Testing your code is a skill that is expected by almost all companies - Unit tests are part of DoD(definition of done) - First understand what unit test means - Then test some of the plain javascript apps that you made using [Jest](https://jestjs.io/docs/getting-started) - Learn testing from this free [Udacity course](https://www.udacity.com/course/javascript-testing--ud549)

### testing react - Now test your React app with [React testing library](https://testing-library.com/docs/react-testing-library/intro/) (Recommended) - You can even use [Enzyme](https://enzymejs.github.io/enzyme/) - Learning Resource - [React testing library](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gm4_-5UsNmLqMosM-dzuvQ) - [Enzyme](https://www.youtube.com/playlist?list=PL-Db3tEF6pB8Am-IhCRgyGSxTalkDpUV_) - Paid and best [course](https://testingjavascript.com/) to learn testing javascript and react

### NodeJS - First of all, understand that Node is NOT a framework - Node is a Javascript runtime thereby helping in executing your javascript code outside the browser - Most commonly used for server side code, Node provides a set of built-in modules

### NodeJS important concepts - Node internals, module.exports, require() - REPL mode - Built-in modules: http, fs, crypto, os, stream, etc - Events, [LibUV](https://libuv.org/) - [Udemy course](https://www.udemy.com/course/complete-nodejs-developer-zero-to-mastery/)(paid resource) to learn Node - [Youtube tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU) to learn node

### Full-stack development - Now that you have already learned Node, you need to learn a few more things to develop fullstack apps - Learn either [Express](https://expressjs.com/en/starter/installing.html) or [Fastify](https://www.fastify.io/docs/latest/)(Recommended), a wrapper over http module of node - Now learn a database and an ORM(object relational mapping)/middleware - Learn either mongoDB or postgresSQL and mongoose or prisma respectively

- Build a full-stack MERN App by following along a youtube tutorial - Learning Resource - [PostgresSQL](https://www.youtube.com/watch?v=qw--VYLpxG4) - [Prisma](https://www.youtube.com/watch?v=HCJmlvgO2WY) - [MongoDB & Mongoose](https://www.youtube.com/watch?v=5QEwqX5U_2M) - [PERN project](https://www.youtube.com/watch?v=ldYcgPKEZC8) - [MERN project](https://www.youtube.com/watch?v=mrHNSanmqQ4)

### React fullstack Frameworks - Now if you have already learned React and Node so you can develop fullstack app using fullstack frameworks - [NextJs](https://nextjs.org/docs/getting-started) and [Remix](https://remix.run/docs/en/v1) are the best React fullstack frameworks currently - Learn NextJs from [youtube tutorial](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH) - Learn Remix from [Kent's tutorial](https://www.youtube.com/watch?v=hsIWJpuxNj0) - Build some projects using NextJs from [youtube tutorials](https://www.youtube.com/watch?v=svlEVg0To_c) and then on your own

### PWA - Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase - [Learn](https://web.dev/learn/pwa/) PWA fundamentals like the Web App Manifest, Service Workers - Make any of the React app that you have built, a progressive web app

### Typescript - Typescript is a super-set of javascript - TypeScript adds additional syntax to JavaScript to support static typing and catch potential runtime errors at compile time itself - TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js - TypeScript is going to be must know language soon based on how its catching up in javascript developer community

- Watch [this video](https://www.youtube.com/watch?v=GkN15uEWxII) to understand why you should learn TypeScript - [Learn Typescript](https://docs.microsoft.com/en-us/learn/paths/build-javascript-applications-typescript/) free from its creators and maintainers itself - Microsoft - TypeScript [youtube tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI) - React with TypeScript [youtube tutorial](https://www.youtube.com/playlist?list=PLC3y8-rFHvwi1AXijGTKM0BKtHzVC-LSK) - React TypeScript [cheatsheet](https://react-typescript-cheatsheet.netlify.app/) for quick reference while developing React app with typescript

### E2E testing - End to End testing is a software testing method that validates entire software from starting to the end along with its integration with external interfaces - It simulates actual user workflows and should include as many functional areas and parts of the technology stack used in the application as possible - There are many frameworks for E2E testing but I would recommend [cypress](https://docs.cypress.io/guides/overview/why-cypress) - [Youtube tutorial](https://www.youtube.com/watch?v=OIAzwr-_jhY) to learn cypress

### containerization with docker - Containerizing your apps will help you deploy and scale application easily - Containerization is the packaging together of software code with all it’s necessary components like libraries, frameworks, and other dependencies so that they are isolated in their own container - [Learn Docker](https://www.youtube.com/watch?v=9zUHg7xjIqQ) to containerize your application - You can even [learn Kubernetes](https://www.youtube.com/watch?v=X48VuDVv0do), also known as K8s, an open-source system for automating deployment, scaling, and management of containerized applications

### CI/CD - Continuous integration (CI) is the practice of automating the integration of code changes from multiple contributors into a single software project - Automated tools are used to assert the new code’s correctness before integration - Continuous Deployment (CD) is a software release process that uses automated testing to validate if changes to a codebase are correct and stable for immediate autonomous deployment to a production environment

- Use [Github actions](https://docs.github.com/en/actions/quickstart) to practice CI/CD with your project - Another good CI tool is [CircleCI](https://circleci.com/) - Learning Resource - [youtube tutorial 1](https://www.youtube.com/watch?v=R8_veQiYBjI) - [youtube tutotial 2](https://www.youtube.com/watch?v=X3F3El_yvFg)

### cloud computing - Learn cloud computing with any of the following cloud providers - AWS - Azure - GCP - Deploying your app on cloud gives you plenty of features like telemetry logs, realtime performance metrics, deployment at different availability zones, disaster recovery, etc

The End

... for now at least 😅

Now, I plan to teach Javascript, React and Node from basics to intermediate level on youtube starting from 13th February, every Sunday.

And the I plan to teach the rest of everything mentioned in this guide as part of a cohort. The knowledge that I share on youtube itself will help you clear any Javascript interview rounds at any company and also help you develop robust web apps

And then if interested you can decide to join the cohort for becoming javascript web developer expert. More details about the cohort will be shared on my LinkedIn later.