Education
Technology
Programming Languages
Web Development
Frontend Development
Web Development Frameworks
🛣 Front-End Development Roadmap
HTML & CSS → 🧑💻 → JavaScript → 🧑💻
↓
🧑💻 ← Tailwind* ← 🧑💻 ← TypeScript
↓
React* → 🧑💻 → Next.js* → 🧑💻 → 🏁
Be a Pro: a complete guide.
⇩
HTML & CSS → 🧑💻 → JavaScript → 🧑💻
↓
🧑💻 ← Tailwind* ← 🧑💻 ← TypeScript
↓
React* → 🧑💻 → Next.js* → 🧑💻 → 🏁
Be a Pro: a complete guide.
⇩
This is how we'll proceed
➊ HTML & CSS
➋ JavaScript
➌ TypeScript
➍ CSS Frameworks
➎ UI Frameworks
➏ Server-side Frameworks
➐ Other Important Skills
❯ Git
❯ DSA
❯ GraphQL
P.S:
➤ ➌ ➍ ➎ ➏ are totally optional
➤ ➌ ➍ ➎ can be done in any order
➊ HTML & CSS
➋ JavaScript
➌ TypeScript
➍ CSS Frameworks
➎ UI Frameworks
➏ Server-side Frameworks
➐ Other Important Skills
❯ Git
❯ DSA
❯ GraphQL
P.S:
➤ ➌ ➍ ➎ ➏ are totally optional
➤ ➌ ➍ ➎ can be done in any order
➊ HTML & CSS
⬘ Your front-end journey will always start with HTML and CSS. You'll be using these forever.
⬙ There is no reason to overburden yourself by trying to learn everything at once. You'll learn throughout.
Detailed Roadmap
⬘ Your front-end journey will always start with HTML and CSS. You'll be using these forever.
⬙ There is no reason to overburden yourself by trying to learn everything at once. You'll learn throughout.
Detailed Roadmap
➋ JavaScript
JavaScript is essential to FE development.
You should start with the basics and move on to more complex subjects.
➤ JavaScript Modern Syntax
➤ HTML DOM API
➤ Event Handling
➤ Asynchronous
➤ Fetch API
Detailed Roadmap
JavaScript is essential to FE development.
You should start with the basics and move on to more complex subjects.
➤ JavaScript Modern Syntax
➤ HTML DOM API
➤ Event Handling
➤ Asynchronous
➤ Fetch API
Detailed Roadmap
➌ TypeScript
⬘ At first, 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.
⬘ At first, 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, Linked List, 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, Linked List, 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
⬘ 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. Ask yourself.
⬘ 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. Ask yourself.
➒ Frequently Asked Questions
➀ Can I learn JavaScript before HTML & CSS?
Yes. You can learn basic syntax.
But for the DOM API and event handling, etc., you would need knowledge of both HTML and CSS.
➀ Can I learn JavaScript before HTML & CSS?
Yes. You can learn basic syntax.
But for the DOM API and event handling, etc., you would need knowledge of both HTML and CSS.
➁ Is it mandatory to learn TypeScript before React and Tailwind?
It's not mandatory, but a good choice. You can always prepare these 3 in any order.
➂ Why Tailwind but no Bootstrap?
It's just for illustration. You can choose any CSS framework of your choice.
It's not mandatory, but a good choice. You can always prepare these 3 in any order.
➂ Why Tailwind but no Bootstrap?
It's just for illustration. You can choose any CSS framework of your choice.
➃ Why no Angular?
It's just for illustration. You can choose any framework of your choice.
➄ Why are only JavaScript frameworks mentioned?
I have prepared this roadmap keeping JavaScript frameworks in mind. You can choose any framework, though.
It's just for illustration. You can choose any framework of your choice.
➄ Why are only JavaScript frameworks mentioned?
I have prepared this roadmap keeping JavaScript frameworks in mind. You can choose any framework, though.
➅ There are no CSS preprocessors?
CSS Preprocessors are helpful, no doubt. But, in most circumstances, you may not need them. Use them as per your needs.
➆ Does 🏁 mean it's finished?
No. Web development is evolving every day. There is no finish point in reality.
CSS Preprocessors are helpful, no doubt. But, in most circumstances, you may not need them. Use them as per your needs.
➆ Does 🏁 mean it's finished?
No. Web development is evolving every day. There is no finish point in reality.
🚥 Disclaimer
⬘ This roadmap is prepared with JavaScript stacks in mind.
⬗ I didn't time-bound it. But, on average, it would take 9 to 12 months.
⬙ 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.
⬗ I didn't time-bound it. But, on average, it would take 9 to 12 months.
⬙ It's not mandatory to learn linearly. You may skip something or may learn multiple subjects in parallel.
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✅ Career Tips
✅ Practice Questions
✅ Roadmaps
on
➠ Web Development
➠ DSA
➠ Databases
If you find it useful, please RT the first tweet. 🙏
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✅ Career Tips
✅ Practice Questions
✅ Roadmaps
on
➠ Web Development
➠ DSA
➠ Databases
If you find it useful, please RT the first tweet. 🙏
Loading suggestions...