🛣 Front-End Development Roadmap
HTML & CSS → 🧑💻 → JavaScript → 🧑💻
↓
🧑💻 ← Tailwind* ← 🧑💻 ← TypeScript
↓
React* → 🧑💻 → Next.js* → 🧑💻 → 🏁
A complete guide for becoming a Pro.
⇩
HTML & CSS → 🧑💻 → JavaScript → 🧑💻
↓
🧑💻 ← Tailwind* ← 🧑💻 ← TypeScript
↓
React* → 🧑💻 → Next.js* → 🧑💻 → 🏁
A complete guide for becoming a Pro.
⇩
What's inside?
➊ HTML & CSS
➋ JavaScript
➌ TypeScript
➍ CSS Frameworks
➎ UI Frameworks
➏ Server-side Frameworks
➐ Other Important Skills
➑ Practice Questions
➒ Frequently Asked Questions
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
➑ Practice Questions
➒ Frequently Asked Questions
P.S:
➤ ➌ ➍ ➎ ➏ are totally optional
➤ ➌ ➍ ➎ can be done in any order
➊ HTML & CSS
⬘ Your front-end journey should always start with HTML & CSS and they'll remain with you till the very end.
⬙ So, never overburden yourself by trying to learn everything at once. You'll learn throughout.
Detailed Roadmap
⬘ Your front-end journey should always start with HTML & CSS and they'll remain with you till the very end.
⬙ So, never overburden yourself by trying to learn everything at once. You'll learn throughout.
Detailed Roadmap
➋ JavaScript
JavaScript is essential. 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. 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
⬘ JavaScript initially appears to be enough. But once projects become complex and bigger, you will notice how tough it's getting to handle.
⬙ The biggest drawback (debatable) of JavaScript is its dynamic typing. TypeScript is to the rescue.
⬘ JavaScript initially appears to be enough. But once projects become complex and bigger, you will notice how tough it's getting to handle.
⬙ The biggest drawback (debatable) 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 Questions
⬘ Don't just read books and articles or watch videos. To learn effectively, you need to practice a lot.
⬙ Practice during each step. Here are a few practice sets.
➤ Practice CSS
➤ Project Ideas
⬘ Don't just read books and articles or watch videos. To learn effectively, you need to practice a lot.
⬙ Practice during each step. Here are a few practice sets.
➤ Practice CSS
➤ Project Ideas
➒ 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 6 to 8 months.
⬙ It's not mandatory to learn linearly. You may skip something or you may learn 2 or more subjects in parallel.
⬘ This roadmap is prepared with JavaScript stacks in mind.
⬗ I didn't time-bound it. But, on average, it would take 6 to 8 months.
⬙ It's not mandatory to learn linearly. You may skip something or you may learn 2 or more subjects in parallel.
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✅ Tutorials
✅ Tricks
✅ Career Tips
✅ Cheat Sheets
✅ Practice Questions
✅ Roadmaps
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✅ Tutorials
✅ Tricks
✅ Career Tips
✅ Cheat Sheets
✅ Practice Questions
✅ Roadmaps
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
Loading suggestions...