Thread by @swapnakpanda

🛣 Beginner's Roadmap for Front-End

HTML & CSS → 👩‍💻 → JavaScript → 👩‍💻
↓
👩‍💻 ← React* ← 👩‍💻 ← Tailwind*
↓
TypeScript → 👩‍💻 → Next.js* → 👩‍💻 → 🏁

⇩

💭 Why is this thread?

❑ Beginners willing to start their Front-End journey are often get confused about what all they have to learn and explore.

❒ This is my honest attempt to help them by sharing a clear roadmap.

❑ It is from my 15 years of Web Development experience.

📋 Table of Contents

➊ HTML & CSS
➋ JavaScript
➌ CSS Frameworks
➍ UI Frameworks
➎ TypeScript
➏ Server-side Frameworks
➐ Others
➑ What is essential?

➊ 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://twitter.com/swapnakpanda/status/1498974860936056832?s=20&t=e64QYVKQpPSO8EZUZKgpHQ

➋ 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

➌ 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

➐ Others

What else?

❑ Git
In today's development world, knowledge of Git is one of the 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.

➑ What is essential?

❑ 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 CSS

https://twitter.com/swapnakpanda/status/1499706918218067968?s=20&t=e64QYVKQpPSO8EZUZKgpHQ

➑.➁ Practice JavaScript

https://twitter.com/swapnakpanda/status/1496061799862575106?s=20&t=e64QYVKQpPSO8EZUZKgpHQ

➑.➂ Build Projects

https://twitter.com/swapnakpanda/status/1490220519396098052?s=20&t=e64QYVKQpPSO8EZUZKgpHQ

*Final

Git ➘ DSA➘
HTML & CSS → 👩‍💻 → JavaScript → 👩‍💻
↓
👩‍💻 ← React* ← 👩‍💻 ← Tailwind*
↓
TypeScript → 👩‍💻 → Next.js* → 👩‍💻 → 🏁

💭 Feedbacks

✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?

Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.

I am a Tech Educator from India 🇮🇳

I am sharing

🧵 Tutorial Threads
💡 Tips, Techniques
🌆 Infographics
🗒 Cheat Sheets
❓ Interview Questions
🛣 Roadmaps

on Web Development, DSA and, Database.

Are you interested? I am sure, you are.

To never miss anything, Follow Me ✅