ClearCut.. Complete Frontend Development Roadmap 2021 with 140+ Resources 🤩🚀🔥

1️⃣ Internet:

1. How does Internet Works? 🔗 t.co/xzyO8cMfRw

2. What is HTTP? 🔗 t.co/dftCCarGvk

3. How do Browsers Work? 🔗 t.co/3mwSrLhXvY

4. What is Domain? 🔗 t.co/2ekY8qdGsN

5. What is Hosting? 🔗 t.co/wdTzfhh00C

6. DNS and How it Works? 🔗 t.co/hLfxOsLEdd

2️⃣ HTML:

💢 YouTube.

1. Introduction to Web Development: 🔗 t.co/xmV0JHPIQd

2. HTML Tutorials for Beginners [2021] 🔗 t.co/NN6qmbKdsY

3. HTML Crash Course for Absolute Beginners. 🔗 t.co/TCXbF0KPAt

💢 Websites.

1. 🔗 t.co/lBHImm9nuw

2. 🔗 t.co/Svvh9VDy4o

💢 HTML Roadmap By @_georgemoller

t.co/sMK3bIOaFp

3️⃣ CSS:

💢 YouTube.

1. CSS Tutorial - Zero to Hero. 🔗 t.co/V7Z4AxS8he

2. CSS Crash Course for Absolute Beginners. 🔗 t.co/dUCUgXv3vu

3. Learn CSS in 20 Minutes. 🔗 t.co/810g4KOlCQ

💢 Websites.

1. 🔗 t.co/leznvNyARB

2. 🔗 t.co/E107e05Fcc

3. 🔗 t.co/CVAQ5NHEIG

💢 CSS Roadmap By @_georgemoller

t.co/GO4QT6pM9C

💢 Paid Courses to Learn HTML and CSS.

1. 🔗 t.co/OGbRLZw2r4

2. 🔗 t.co/khYAqp6MKb

3. 🔗 t.co/a5YYYrsxhj

💢 Improve CSS Skills By Playing GAMES.

1. 🔗 t.co/ovGtjAFeua

2. 🔗 t.co/OY7lyZO4Fn

3. 🔗 t.co/cVMofgjYMs

4. 🔗 t.co/w4jKZ7hoaP

5. 🔗 t.co/XQ9So0qxFV

4️⃣ Build Projects Using HTML and CSS for PRACTICE.

💢 YouTube.

1. Build a website with Responsive Layout 🔗 t.co/iEpiG4v7kr

2. Microsoft Homepage Clone. 🔗 t.co/f4BwaYSRDi

3. Build a Pricing Block Using HTML and CSS 🔗 t.co/h2bGBb9hFY

4. Create a Website with Video Background. 🔗 t.co/eO14T4Qczg

5. t.co/lNDjTC2ooq

6. t.co/efMC0zaemg

💢 Websites to Practice front end Skills.

1. 🔗 t.co/OJdKepVkUx
2. 🔗 t.co/nBjYusozad
3. 🔗 t.co/T25dT1rj35
4. 🔗 t.co/e8deJdqvKf

5️⃣ JavaScript

💢 YouTube

1. JavaScript Tutorials for Beginners. 🔗 t.co/47ftH0XilL

2. Playlist of Awesome JavaScript 🔗 t.co/TSUEZSEvKA

3. Namaste JavaScript Course 🔗 t.co/am4r93ltnB

4. Some Useful threads👇

A. t.co/q8bVYaaZLj

B. t.co/IPzIRfIJ6W

C. t.co/pYMkLPmQKV

D. t.co/Z3HFFuNFgl

E. t.co/krf94LkFl4

D. t.co/iiApZVx2Wz

💢 Paid Courses to Master JavaScript

1. t.co/R2M23o2qxA

2. t.co/0QcNyTxWpG

3. t.co/0QcNyTxWpG

💢 Build Projects Using JavaScript.

1. Build 15 JavaScript Projects By @freeCodeCamp 🔗 t.co/VGjU2urFW6

2. 10 JavaScript Projects in 10 hours by @florinpop1705 🔗 t.co/GS346ZdGqx

3. Learn JavaScript By building 7 Games by @ania_kubow 🔗 t.co/302gbHaHdb

4. Build a Calculator. By @DevSimplified 🔗 t.co/wcN0pIe6zT

5. Build an Analog Clock. 🔗 t.co/jMDtgVXzgZ

6. JavaScript Form Validation. 🔗 t.co/eyrduSlcmq

7. Shopping Cart Using JavaScript. 🔗 t.co/1Ewqf5ucWr

8. t.co/lNDjTC2ooq

6️⃣ Git

💢 Youtube

1.Git tutorials for Beginners. 🔗 t.co/MiNqmJOPvb

1. Git and GitHub for Beginners. 🔗 t.co/8QFY8gaemT

2. Git and GitHub full Course in 5 hours. 🔗 t.co/U60ikWYt5O

3. Free Git and GitHub course on Udemy 🔗 t.co/LV6bNiVqDy

💢 Websites

1. t.co/AvaZN0o9J0

2. t.co/C3miJlS8vl

3. t.co/UjJvO5jS2T

💢 CheatSheets.

1. t.co/UHJL8oBw3W

2. t.co/tnG3QvCXU4

3. t.co/vg7qe5kk15

4. t.co/RR4sppuTNx

7️⃣ CSS Frameworks.

Pro tip: Before getting into any Frameworks,

Make Sure that your CSS basics are Strong.

These 3 are Popular Frameworks 🔥

⭕ Tailwind CSS.

Official Website: t.co/biRzjiSlBg

💢 Youtube

1. t.co/0EJa85wx14

2. t.co/wayaYjRHJw

3. Tailwind CSS Crash Course. 🔗 t.co/2uEj6eb1Xq

💢 Websites.

1. t.co/EdontsY4GS

2. t.co/XLK5DkGOj3

💢 Projects to Practice Tailwind CSS.

1. Your first Tailwind Website. 🔗 t.co/NtFiaw8FUx

2. Build a Gym Website. 🔗 t.co/zwmx410tXd

3. Build a Modern Landing Page. 🔗 t.co/OGxR8Su1Kr

⭕ Bootstrap.

Official Website: t.co/rVcCQEIsCu

💢 YouTube.

1. Getting started with Bootstrap 5 for beginners. 🔗 t.co/aca6PIbXsM

2. Bootstrap 5 tutorial. 🔗 t.co/fyttpoMzzb

3. Bootstrap 5 Crash Course 🔗 t.co/u4LCwCwkok

💢 Websites.

1. t.co/QTFevc51M1

2. t.co/xHhPYT7j0Q

3. t.co/5XzYNc2ICJ

💢 Projects to practice Bootstrap.

1. Build Responsive food and Restaurant Website. 🔗 t.co/zbG7vcqPoT

2. Build a Website. 🔗 t.co/cDMPvGhbdq

3. Landing Page Website. 🔗 t.co/gEU60cMLKz

⭕ Bulma CSS Framework.

Official Website: t.co/cmRgmCcxCF

💢 YouTube.

1. Bulma Tutorial. 🔗 t.co/slYOeaSoRA

2. Bulma CSS Framework Crash Course. 🔗 t.co/2R5zaCIQBj

3. Bulma CSS Framework Complete Tutorial. 🔗 t.co/7oWlGg6yPh

💢 Websites.

1. t.co/JTdfKSizsL

2. t.co/ZQuJc94JOf

💢 Projects to Practice BULMA CSS.

1. Build Company Website. 🔗 t.co/9aN8YpkCD2

2. Create Simple Landing Page. 🔗 t.co/TOkiyaKmKw

3. Create a Login Page. 🔗 t.co/uZUyoUpOBl

8️⃣ JavaScript Frameworks.

⭕ REACTJs

Official Website: t.co/ImSGpOkTcq

💢 YouTube.

1. React tutorials for Beginners. 🔗 t.co/vToH5MDBeN

2. ReactJs Crash Course. 🔗 t.co/CMgL3nolEa

3 . React full Course in 12 Hours. 🔗 t.co/IhrRXeMOmT

1. React Full course in 10 hours. By @freeCodeCamp 🔗 t.co/hRyTIMFPmI

2. React from Scratch by @academind_real 🔗 t.co/EtqO3prYGQ

💢 Paid courses to learn React Js

1. Top 6 Course to Learn React. 🔗 t.co/SxU65Sn7h2

💢 Website:

1. t.co/chZMjz5QVz

2. t.co/7OOEwbqM4s

3. t.co/UzPcHDnMv2

💢 Build Projects to Practice ReactJs.

1. Five Top Notch Projects by @MadhavBahlMD to learn React.

🔗 t.co/PGD3dncMZt

1. 15 React Projects. 🔗 t.co/5vzsMLyUJz

2. Chat Application using React Js. 🔗 t.co/16T8IIn5Lk

3. Master ReactJs By Building Real Projects. By @jsmasterypro 🔗 t.co/VBVoNIFDez

4. React Projects Playlist by @traversymedia 🔗 t.co/uFAjPqll3S

⭕ Vue Js.

Official Website: t.co/WanCacrMgk

💢 YouTube.

1. Vue.js 3 tutorial. By @thenetninjauk 🔗 t.co/Y4KFThtErB

2. Vue Js Crash Course by @traversymedia . 🔗 t.co/BgEwgRJOLE

3. Vue Js Crash Course. 🔗 t.co/erNmKX1Ff9

💢 Websites.

1. t.co/sHPDP3CP4W

2. t.co/hphI0EMi2N

💢 Paid Courses for Vue.js

1. t.co/ezePvheQli

2. t.co/LN5wQisjRj

💢 Projects to practice VueJs

1. 6 Hour VueJs and Firebase Project. 🔗 t.co/GpNLSA4GER

2. Covid Tracker. 🔗 t.co/Qz0UupNBrp

3. Hour Tracking App. 🔗 t.co/OfRfVUdOYM

⭕ Angular.

Official Website: t.co/Sdeth8ouSe

💢 YouTube.

1. Angular in 2 Hours. 🔗 t.co/TDpbJowD4V

2. Angular Crash Course 2021. 🔗 t.co/Ipggb6n6FA

3. Angular full Course in 5 hours. 🔗 t.co/Tk5RE9mTgC

💢 Website.

1. t.co/QOaiXVAMLP

💢 Paid Courses to Learn Angular.

1. t.co/cAl5uGEhBd

2. t.co/sqtIvX6ed7

3. t.co/6gsw2Fjsf7

💢 Projects to Practice Angular.

1. build 10 Angular Projects. 🔗 t.co/PMqgB6xJk0

2. Angular for beginners. By @fireship_dev 🔗 t.co/JqT1iQEWut

3. Code project from Scratch. 🔗 t.co/lzXPs3UFT8

⭕ Svelte

Official Website: t.co/rKNEo0U9SZ

💢 YouTube

1. Svelte Tutorials for Beginners. By @thenetninjauk 🔗 t.co/m8CC7U5p4w

2. Svelte Crash Course. 🔗 t.co/mTKVFBxd3B

3. Svelte in 7 Hours. 🔗 t.co/gbm0Lx1oZG

💢 Websites.

1. t.co/nLUzh4oPgT

2. t.co/sUT4lvs3uB

💢 Paid Course to Learn Svelte Js.

1. t.co/Hw9yyFGcmY

💢 Projects to Practice Svelte Js.

1. Build a to-do list. 🔗 t.co/QuVzHXdJaY

2. t.co/ZGjr828LaV

TL;DR

1. Internet

2. HTML

• YouTube Videos
• Websites to learn
• Html Roadmap.

  3. CSS

• YouTube Videos.
• Websites
• CSS Roadmap
• Paid Courses to learn HTML & CSS.
• Improve CSS Skills By Playing Games

  4. Build Projects to Practice HTML CSS.

• Websites to practice Frontend Skills.

  5. JavaScript

• YouTube Videos
• Websites
• Paid Courses to learn JavaScript.

  6. Build Projects to Practice JavaScript.

  7. Git

• YouTube Videos
• Websites
• CheatSheets.

  8. CSS Framework's

  - Tailwind CSS

  - Bootstrap

  - Bulma CSS

  9. JavaScript Framework's

  - React Js

  - Vue Js

  - Angular

  - Svelte Js

Thank you so much ☺️ For Staying till here!!

If you found this helpful!! Then Don’t forget to share!🙏

For More Follow me on Twitter