🛣 Front-End Web Development Roadmap
HTML & CSS → 🧑💻 → JavaScript → 🧑💻
↓
🧑💻 ← Tailwind* ← 🧑💻 ← TypeScript
↓
React* → 🧑💻 → Next.js* → 🧑💻 → 🏁
A step-by-step complete guide:
HTML & CSS → 🧑💻 → JavaScript → 🧑💻
↓
🧑💻 ← Tailwind* ← 🧑💻 ← TypeScript
↓
React* → 🧑💻 → Next.js* → 🧑💻 → 🏁
A step-by-step complete guide:
➊ 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:
x.com
✧ 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:
x.com
➋ 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
x.com
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
x.com
➌ 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.
Also, it's better to have hands-on of any component libraries.
➤ Shadcn
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.
Also, it's better to have hands-on of any component libraries.
➤ Shadcn
➎ 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.
x.com
Apart from the DOM API and Fetch API, you may have to use many other built-in APIs for building a great web application.
x.com
➄ 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-Practice-Practice
Practice during each step alongside learning. Apply your creativity wherever possible.
Here are some practice sites:
➤ javascript30.com
➤ frontendmentor.io
➤ theodinproject.com
Practice during each step alongside learning. Apply your creativity wherever 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 some topic or may learn multiple topics in parallel.
All the best.
✧ 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 some topic or may learn multiple topics in parallel.
All the best.
جاري تحميل الاقتراحات...