Education
Technology
programming
Web Development
JavaScript
Tech
CSS
HTML
Frontend Development
TypeScript
CSS Frameworks
Frequently Asked Questions
Practice
UI Frameworks
Other Skills
Server-side Frameworks
🛣 Beginner's Roadmap for Front-End
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← Tailwind* ← 👩💻 ← TypeScript
↓
React* → 👩💻 → Next.js* → 👩💻 → 🏁
And, become a Pro.
⇩
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← Tailwind* ← 👩💻 ← TypeScript
↓
React* → 👩💻 → Next.js* → 👩💻 → 🏁
And, become a Pro.
⇩
What would we cover?
➊ HTML & CSS
➋ JavaScript
➌ TypeScript
➍ CSS Frameworks
➎ UI Frameworks
➏ Server-side Frameworks
➐ Practice, Practice and, Practice
➑ Other Skills
➒ Frequently Asked Questions
➊ HTML & CSS
➋ JavaScript
➌ TypeScript
➍ CSS Frameworks
➎ UI Frameworks
➏ Server-side Frameworks
➐ Practice, Practice and, Practice
➑ Other Skills
➒ Frequently Asked Questions
➊ HTML & CSS
⬘ Your Front-End journey shall always start from HTML & CSS and, ends with these as well.
⬗ Don't overburden yourself to learn everything at once. It's a continuous subject.
⬙ Do not separate HTML from CSS. That's unnecessary.
⬘ Your Front-End journey shall always start from HTML & CSS and, ends with these as well.
⬗ Don't overburden yourself to learn everything at once. It's a continuous subject.
⬙ Do not separate HTML from CSS. That's unnecessary.
➋ JavaScript
JavaScript is essential. You should start with basics and move to complex subjects.
❍ JavaScript Syntaxes
(preferably ES6 onwards)
❍ HTML DOM API
❍ Event Handling
❍ Fetch API
JavaScript is essential. You should start with basics and move to complex subjects.
❍ JavaScript Syntaxes
(preferably ES6 onwards)
❍ HTML DOM API
❍ Event Handling
❍ Fetch API
➌ TypeScript
⬘ JavaScript initially looks 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 for your rescue.
⬘ JavaScript initially looks 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 for your rescue.
➍ CSS Frameworks
CSS Framework is necessary if you are planning to be a professional developer.
There are so many options available.
❍ Tailwind CSS
❍ Bootstrap
❍ Chakra
❍ Bulma
❍ Foundation
❍ Skeleton
❍ Pure CSS
Start with anything. You can switch any time.
CSS Framework is necessary if you are planning to be a professional developer.
There are so many options available.
❍ Tailwind CSS
❍ Bootstrap
❍ Chakra
❍ Bulma
❍ Foundation
❍ Skeleton
❍ Pure CSS
Start with anything. You can switch any time.
➎ UI Frameworks/Libraries
To build a complex application, you will start using a UI framework sooner or, later.
They are,
❍ React
❍ Vue.js
❍ Angular
❍ Svelte
Go through their documentation. Choose according to your requirement, and future interests.
To build a complex application, you will start using a UI framework sooner or, later.
They are,
❍ React
❍ Vue.js
❍ Angular
❍ Svelte
Go through their documentation. Choose according to your requirement, 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 Server-Side frameworks.
❍ Next.js
❍ Gatsby
❍ NuxtJS
Client-side UIs (or, Single Page Applications) are
❍ Slow at startup
❍ Not fully SEO friendly
❍ Difficult to grow
Adapt to Server-Side frameworks.
❍ Next.js
❍ Gatsby
❍ NuxtJS
➐ Practice, Practice and, Practice
⬘ Don't just read books and, articles or, watch videos. To learn effectively, you have to practice.
⬙ Practising after each step is very very important.
I am here sharing a few practice sets.
⬘ Don't just read books and, articles or, watch videos. To learn effectively, you have to practice.
⬙ Practising after each step is very very important.
I am here sharing a few practice sets.
➐.➀ Practice Questions
➐.➁ Practice CSS
➐.➂.➀ Practice JavaScript (#1)
➐.➂.➁ Practice JavaScript (#2)
➐.➃ Build Projects
➑ Other Skills
These are some mandatory skills
➀ Git
Knowledge of Git is a must and, it should be as early as possible. Use clients 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, it should be as early as possible. Use clients 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 which 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 which are not available in CSS. There, CSS Preprocessors help a lot.
We can choose from
❍ Sass
❍ LESS
❍ Stylus
❍ PostCSS
➃ Web APIs
Apart from DOM API and Fetch API, you may have to use many other built-in APIs for building a great web application.
Apart from 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
➒ Frequently Asked Questions
➀ Can I learn JavaScript before HTML & CSS?
Yes. You can learn basic syntax.
For DOM API and Event Handling etc., you would need knowledge of HTML & CSS.
➀ Can I learn JavaScript before HTML & CSS?
Yes. You can learn basic syntax.
For DOM API and Event Handling etc., you would need knowledge of HTML & CSS.
➁ Is it mandatory to learn TypeScript before React & 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 JS Framework of your choice.
➄ Why are only JS frameworks mentioned?
I have prepared this roadmap keeping JS frameworks in mind. You can choose any framework.
It's just for illustration. You can choose any JS Framework of your choice.
➄ Why are only JS frameworks mentioned?
I have prepared this roadmap keeping JS frameworks in mind. You can choose any framework.
➅ There are no CSS Preprocessors?
CSS Preprocessors are helpful, no doubt. But, in most circumstances, you may not need them. Use them as per the need.
➆ 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 the need.
➆ 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. For other stacks, I will share separate roadmaps.
⬗ I didn't time-bound it. But, on average it takes 6 to 8 months.
⬙ There is no linear track in any roadmap. It's just an illustration for simplicity.
⬘ This roadmap is prepared with JavaScript stacks in mind. For other stacks, I will share separate roadmaps.
⬗ I didn't time-bound it. But, on average it takes 6 to 8 months.
⬙ There is no linear track in any roadmap. It's just an illustration for simplicity.
Hey 👋
I am a Tech Educator and, Mentor from India 🇮🇳
I am sharing Tutorials, Tips, Infographics, Cheat Sheets, Practice Questions, Project Ideas and Roadmaps on Web Development, DSA and, Databases.
To never miss anything,
➜ Follow me ✅
➜ Keep 🔔 ON
I am a Tech Educator and, Mentor from India 🇮🇳
I am sharing Tutorials, Tips, Infographics, Cheat Sheets, Practice Questions, Project Ideas and Roadmaps on Web Development, DSA and, Databases.
To never miss anything,
➜ Follow me ✅
➜ Keep 🔔 ON
Loading suggestions...