Thread by @RegRafik

Front-end developement Roadmap step by step for beginners 🔥

Thread 🧵

#100DaysOfCode #Coding #DEVCommunity

1️⃣ Internet -->
How does the internet work?
What is HTTP?
Browsers and how they work?
DNS and how it works?
What is Domain Name?
What is hosting?

2️⃣ HTML -->
Learn the basics
Writing Semantic HTML
Forms and Validations
Conventions and Best Practices
Syntax and Basic Constructs
Accessibility
SEO Basics

3️⃣ CSS -->
Learn the basics
Making Layouts (display, positioning, CSS grid, Flexbox...)
Responsive design and Media Queries.

4️⃣ JavaScript -->
Syntax and Basic Constructs
Learn DOM Manipulation
Learn Fetch API/ Ajax (XHR)
ES6+ and modular JavaScript
Understand the concepts (hoisting, Event Bubbling, Scope, Prototype, Shadow DOM, strict...)

5️⃣ Pick CSS framework -->
Tailwind CSS
Materialize UI
Radix UI
Chakra UI

6️⃣ Pick a framework -->
React
Angular
Vue js

7️⃣ Package Managers -->
npm
yarn
npm and yarn both are fine, pick one or learn both, there is not much difference.

8️⃣ Web security Knowledge --> Get at least a basic knowledge of all of these.

HTTPS
Content Security Policy
OWASP Security Risks
CORS

9️⃣ Build real Projects -->
portfolio website
clone website
Crud web application
API-connected website
To-do list...