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
โฌ 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.
https://t.co/XiPrKuQrnB
โ 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
https://t.co/MAkUW8h22i
โ 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.
โ 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.
โ 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.
โ 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
โ 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.
โ.โ Practice Questions
https://t.co/bteEMoeFMV
โ.โ.โ Practice JavaScript
https://t.co/VgO5EM1ykb
โ.โ.โ Practice JavaScript
https://t.co/B7ic7F6gR9
โ.โ Build Projects
https://t.co/kNf0P0JlBk
โ 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.
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
โ Web APIs
Apart from DOM API and Fetch API, you may have to use many other APIs for building a great web application.
https://t.co/ISM6631s7N
โ 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
โ
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
โ 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 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.
โ 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.
โ
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.
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
*Final
Git โ DSAโ
HTML & CSS โ ๐ฉโ๐ป โ JavaScript โ ๐ฉโ๐ป
โ
๐ฉโ๐ป โ React* โ ๐ฉโ๐ป โ Tailwind*
โ
TypeScript โ ๐ฉโ๐ป โ Next.js* โ ๐ฉโ๐ป โ ๐