Education
Technology
Web Development
JavaScript
React
CSS
HTML
TypeScript
FrontEnd Web Development
nextjs
Complete Roadmap for Front-End Web Development
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← Tailwind* ← 👩💻 ← TypeScript
↓
React* → 👩💻 → Next.js* → 👩💻 → 🏁
⇩
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← Tailwind* ← 👩💻 ← TypeScript
↓
React* → 👩💻 → Next.js* → 👩💻 → 🏁
⇩
Skills required for a FE Web Developer:
➀ HTML & CSS
➁ JavaScript
➂ TypeScript *
➃ CSS Frameworks *
➄ UI Frameworks *
➅ Server-side Frameworks *
➆ Other Topics
❯ Git
❯ DSA
Note:
➤ ➂ ➃ ➄ ➅ are totally optional
➤ ➂ ➃ ➄ can be done in any order
➀ HTML & CSS
➁ JavaScript
➂ TypeScript *
➃ CSS Frameworks *
➄ UI Frameworks *
➅ Server-side Frameworks *
➆ Other Topics
❯ Git
❯ DSA
Note:
➤ ➂ ➃ ➄ ➅ are totally optional
➤ ➂ ➃ ➄ can be done in any order
➊ HTML & CSS
✧ Your front-end journey starts with HTML and CSS. And you'll be using them forever.
✧ So don't overburden yourself by trying to learn everything at once. Start from simple topics and move to complex ones.
Here's a detailed roadmap:
✧ Your front-end journey starts with HTML and CSS. And you'll be using them forever.
✧ So don't overburden yourself by trying to learn everything at once. Start from simple topics and move to complex ones.
Here's a detailed roadmap:
➋ JavaScript
JavaScript is essential to Front End development.
You should start with the basics and move on to more complex subjects.
➤ HTML DOM API
➤ Event Handling
➤ Asynchronous
➤ Fetch API
JavaScript is essential to Front End development.
You should start with the basics and move on to more complex subjects.
➤ HTML DOM API
➤ Event Handling
➤ Asynchronous
➤ Fetch API
➌ TypeScript
✧ Initially JavaScript appears to be sufficient. But once a project becomes more complex and bigger, you will find it tough to handle.
✧ The biggest (debatable) drawback of JavaScript is its dynamic typing. TypeScript is to the rescue.
✧ Initially JavaScript appears to be sufficient. But once a project becomes more complex and bigger, you will find it tough to handle.
✧ The biggest (debatable) drawback of JavaScript is its dynamic typing. TypeScript is to the rescue.
➍ CSS Frameworks
CSS Framework is important when you consider a professional WebDev journey.
There are so many options available.
➤ Tailwind CSS
➤ Bootstrap
➤ Chakra
➤ Bulma
➤ Foundation
➤ Skeleton
➤ Pure CSS
Start with anything. You can switch at any time.
CSS Framework is important when you consider a professional WebDev journey.
There are so many options available.
➤ Tailwind CSS
➤ Bootstrap
➤ Chakra
➤ Bulma
➤ Foundation
➤ Skeleton
➤ Pure CSS
Start with anything. You can switch at any time.
➎ UI Frameworks/Libraries
You'll start using a UI framework to build a complex application sooner or later.
They are
➤ React
➤ Vue.js
➤ Angular
➤ Svelte
➤ SolidJS
Go through their documentation. Choose according to your requirements and future interests.
You'll start using a UI framework to build a complex application sooner or later.
They are
➤ React
➤ Vue.js
➤ Angular
➤ Svelte
➤ SolidJS
Go through their documentation. Choose according to your requirements and future interests.
➏ Server-side Frameworks
Client-side UIs (or, Single Page Applications) are
❯ Slow at startup
❯ Not fully SEO friendly
❯ Difficult to grow
Adapt to any server-Side framework.
➤ Next.js
➤ Remix
➤ Gatsby
➤ NuxtJS
➤ SvelteKit
Client-side UIs (or, Single Page Applications) are
❯ Slow at startup
❯ Not fully SEO friendly
❯ Difficult to grow
Adapt to any server-Side framework.
➤ Next.js
➤ Remix
➤ Gatsby
➤ NuxtJS
➤ SvelteKit
➐ Other Skills
These are some mandatory skills.
➀ Git
Knowledge of Git is a must and should be as early as possible. Use services like GitHub, GitLab, etc.
➁ Data Structures
You should learn basic data structures like Array, Stack, Queue, Tree, Graph, etc.
These are some mandatory skills.
➀ Git
Knowledge of Git is a must and should be as early as possible. Use services like GitHub, GitLab, etc.
➁ Data Structures
You should learn basic data structures like Array, Stack, Queue, Tree, Graph, etc.
Below are some "nice-to-have" skills.
➂ CSS Preprocessors
CSS is powerful, but sometimes we may need features that are not available in CSS. There, CSS Preprocessors help a lot.
We can choose from
➤ Sass
➤ LESS
➤ Stylus
➤ PostCSS
➂ CSS Preprocessors
CSS is powerful, but sometimes we may need features that are not available in CSS. There, CSS Preprocessors help a lot.
We can choose from
➤ Sass
➤ LESS
➤ Stylus
➤ PostCSS
➃ Web APIs
Apart from the DOM API and Fetch API, you may have to use many other built-in APIs for building a great web application.
Apart from the DOM API and Fetch API, you may have to use many other built-in APIs for building a great web application.
➄ State Management Libraries
Managing data (state) in a UI application becomes a tough task when they become abundant.
You may consider using
➤ Redux
➤ Mobx
➤ React Query
➤ xstate
Managing data (state) in a UI application becomes a tough task when they become abundant.
You may consider using
➤ Redux
➤ Mobx
➤ React Query
➤ xstate
➅ GraphQL
Traditional data fetching from servers is a repetitive and slower operation.
GraphQL is a nice invention. It's grooming. Consider using any of the below GraphQL clients.
➤ Apollo Client
➤ Relay
➤ GraphQL Request
➤ AWS Amplify
➤ urql
Traditional data fetching from servers is a repetitive and slower operation.
GraphQL is a nice invention. It's grooming. Consider using any of the below GraphQL clients.
➤ Apollo Client
➤ Relay
➤ GraphQL Request
➤ AWS Amplify
➤ urql
➑ Practice at every step
✧ Don't just read books and articles or watch videos. To learn effectively, you need to practice a lot.
✧ Practice during each step alongside learning. Form your own questions when possible.
Here are some practice sites:
➤ javascript30.com
➤ frontendmentor.io
➤ theodinproject.com
✧ Don't just read books and articles or watch videos. To learn effectively, you need to practice a lot.
✧ Practice during each step alongside learning. Form your own questions when possible.
Here are some practice sites:
➤ javascript30.com
➤ frontendmentor.io
➤ theodinproject.com
🏁 Final Words
✧ This roadmap is prepared with JavaScript stacks in mind.
✧ On an average, it would take 6 to 12 months to master it.
✧ It's not mandatory to learn linearly. You may skip something or may learn multiple subjects in parallel.
✧ This roadmap is prepared with JavaScript stacks in mind.
✧ On an average, it would take 6 to 12 months to master it.
✧ It's not mandatory to learn linearly. You may skip something or may learn multiple subjects in parallel.
Loading suggestions...