ClearCut.. Complete Frontend Development Roadmap 2021 with 140+ Resources πŸ€©πŸš€πŸ”₯

ClearCut.. Complete Frontend Development Roadmap 2021 with 140+ Resources πŸ€©πŸš€πŸ”₯

Frontend development roadmap 2021

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

  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

  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.

β­• 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

  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

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

  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

Β