Education
Technology
Web Development
JavaScript
Tech
HTML & CSS
Frontend Development
TypeScript
CSS Frameworks
Frequently Asked Questions
Practice
FrontEnd
UI Frameworks
Serverside Frameworks
Other Skills
🛣 Beginner's Roadmap for Front-End
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← React* ← 👩💻 ← Tailwind*
↓
TypeScript → 👩💻 → Next.js* → 👩💻 → 🏁
⇩
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← React* ← 👩💻 ← Tailwind*
↓
TypeScript → 👩💻 → Next.js* → 👩💻 → 🏁
⇩
What would we cover?
➊ HTML & CSS
➋ JavaScript
➌ CSS Frameworks
➍ UI Frameworks
➎ TypeScript
➏ Server-side Frameworks
➐ Practice, Practice and, Practice
➑ Other Skills
➒ Frequently Asked Questions
➊ HTML & CSS
➋ JavaScript
➌ CSS Frameworks
➍ UI Frameworks
➎ TypeScript
➏ 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 over burden 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 over burden 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
➌ 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
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 documentations. Choose according to your requirement, future interest.
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 documentations. Choose according to your requirement, future interest.
➎ 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 (biggest advantage as well) 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 (biggest advantage as well) of JavaScript is its dynamic typing. TypeScript is for your rescue.
➏ 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.
❒ Practicing after each step is very very important.
I am here sharing few practice sets.
❑ Don't just read books and, articles or, watch videos. To learn effectively, you have to practice.
❒ Practicing after each step is very very important.
I am here sharing few practice sets.
➐.➀ Practice Questions
➐.➁ Practice CSS
➐.➂.➀ Practice JavaScript
➐.➂.➁ Practice JavaScript
➐.➃ Build Projects
➑ Other Skills
These are some mandatory skills
➀ Git
Knowledge of Git is must. You can 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 must. You can 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 APIs for building a great web application.
Apart from DOM API and Fetch API, you may have to use many other 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 to use
❍ Redux
❍ Mobx
❍ React Query
❍ xstate
Managing data (state) in a UI application becomes a tough task when they become abundant.
You may consider to use
❍ Redux
❍ Mobx
❍ React Query
❍ xstate
➅ GraphQL
Traditional data fetching from server 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 server 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.
➁ Can I learn TypeScript before React & Tailwind?
Yes. This is for illustration only. 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.
Yes. This is for illustration only. 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 chose 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 chose 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. The Web Development is evolving every day. So, don't stop.
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. The Web Development is evolving every day. So, don't stop.
Hey 👋
I am a Tech Educator from India 🇮🇳
Here, I am sharing Tutorials, Tips, Infographics, Cheat Sheets, Interview Questions, Project Ideas and Roadmaps on Web Development, DSA and, Database.
To never miss anything,
➜ Follow ✅ me
➜ Keep 🔔 ON
I am a Tech Educator from India 🇮🇳
Here, I am sharing Tutorials, Tips, Infographics, Cheat Sheets, Interview Questions, Project Ideas and Roadmaps on Web Development, DSA and, Database.
To never miss anything,
➜ Follow ✅ me
➜ Keep 🔔 ON
*Final
Git ➘ DSA➘
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← React* ← 👩💻 ← Tailwind*
↓
TypeScript → 👩💻 → Next.js* → 👩💻 → 🏁
Git ➘ DSA➘
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← React* ← 👩💻 ← Tailwind*
↓
TypeScript → 👩💻 → Next.js* → 👩💻 → 🏁
Loading suggestions...