➊ HTML & CSS
➋ JavaScript
➌ CSS Frameworks
➍ UI Frameworks
➎ TypeScript
➏ Server-side Frameworks
➐ Practice, Practice and, Practice
➑ Other Skills
➒ Frequently Asked Questions
🛣 Beginner's Roadmap for Front-End
HTML & CSS → 👩💻 → JavaScript → 👩💻
↓
👩💻 ← React* ← 👩💻 ← Tailwind*
↓
TypeScript → 👩💻 → Next.js* → 👩💻 → 🏁
⇩
➊ HTML & CSS
➋ JavaScript
➌ CSS Frameworks
➍ UI Frameworks
➎ TypeScript
➏ Server-side Frameworks
➐ Practice, Practice and, Practice
➑ Other Skills
➒ Frequently Asked Questions
⬘ 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
Beginner's Roadmap for HTML & CSS
— Swapna Kumar Panda \uea00 (@swapnakpanda) April 18, 2022
\u21e9
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
\U0001f6e3 Roadmap for JavaScript Absolute Beginners
— Swapna Kumar Panda \uea00 (@swapnakpanda) March 29, 2022
\u21e9
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.
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.
❑ 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.
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
❑ 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.
https://t.co/bteEMoeFMV
Practice 50+ "Difference" Questions
— Swapna Kumar Panda \uea00 (@swapnakpanda) March 25, 2022
\u274d HTML
\u274d CSS
\u274d JavaScript
\u21e9
https://t.co/WMbP2AtiBz
50+ CSS Problems for Practice
— Swapna Kumar Panda \uea00 (@swapnakpanda) March 4, 2022
\u21e9
https://t.co/VgO5EM1ykb
\U0001f469\u200d\U0001f4bb Practice 100+ Problems
— Swapna Kumar Panda \uea00 (@swapnakpanda) April 8, 2022
Using your favourite language
\u274d C
\u274d C++
\u274d Python
\u274d Java
\u274d C#
\u274d PHP
\u274d JavaScript
Or, anything.
\u21e9
https://t.co/B7ic7F6gR9
\U0001f469\u200d\U0001f4bb Practice 50+ Problems
— Swapna Kumar Panda \uea00 (@swapnakpanda) April 21, 2022
Using your favourite language
\u274d C
\u274d C++
\u274d Python
\u274d Java
\u274d C#
\u274d PHP
\u274d Golang
\u274d JavaScript
Crack your next Interview.
\u21e9
https://t.co/kNf0P0JlBk
100+ Project Ideas for JavaScript Beginners
— Swapna Kumar Panda \uea00 (@swapnakpanda) March 26, 2022
\u21e9
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.
➂ 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
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
11 Web APIs for Advanced Web Development
— Swapna Kumar Panda \uea00 (@swapnakpanda) April 1, 2022
\u21e9
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
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
➀ 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.
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.
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.
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.
