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

Mohammed Junaid ApMohammed Junaid Ap
6 min read

1️⃣ Internet:

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

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

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

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

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

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

2️⃣ HTML:

💢 YouTube.

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

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

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

💢 Websites.

  1. 🔗 https://t.co/lBHImm9nuw

  2. 🔗 https://t.co/Svvh9VDy4o

💢 HTML Roadmap By @_georgemoller

https://t.co/sMK3bIOaFp

3️⃣ CSS:

💢 YouTube.

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

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

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

💢 Websites.

  1. 🔗 https://t.co/leznvNyARB

  2. 🔗 https://t.co/E107e05Fcc

  3. 🔗 https://t.co/CVAQ5NHEIG

💢 CSS Roadmap By @_georgemoller

https://t.co/GO4QT6pM9C

  1. 🔗 https://t.co/OGbRLZw2r4

  2. 🔗 https://t.co/khYAqp6MKb

  3. 🔗 https://t.co/a5YYYrsxhj

💢 Improve CSS Skills By Playing GAMES.

  1. 🔗 https://t.co/ovGtjAFeua

  2. 🔗 https://t.co/OY7lyZO4Fn

  3. 🔗 https://t.co/cVMofgjYMs

  4. 🔗 https://t.co/w4jKZ7hoaP

  5. 🔗 https://t.co/XQ9So0qxFV

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

💢 YouTube.

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

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

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

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

  5. https://t.co/lNDjTC2ooq

  6. https://t.co/efMC0zaemg

💢 Websites to Practice front end Skills.

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

5️⃣ JavaScript

💢 YouTube

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

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

  3. Namaste JavaScript Course 🔗 https://t.co/am4r93ltnB

4. Some Useful threads👇

A. https://t.co/q8bVYaaZLj

B. https://t.co/IPzIRfIJ6W

C. https://t.co/pYMkLPmQKV

D. https://t.co/Z3HFFuNFgl

E. https://t.co/krf94LkFl4

D. https://t.co/iiApZVx2Wz

  1. https://t.co/R2M23o2qxA

  2. https://t.co/0QcNyTxWpG

  3. https://t.co/0QcNyTxWpG

💢 Build Projects Using JavaScript.

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

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

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

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

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

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

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

  8. https://t.co/lNDjTC2ooq

6️⃣ Git

💢 Youtube

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

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

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

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

💢 Websites

  1. https://t.co/AvaZN0o9J0

  2. https://t.co/C3miJlS8vl

  3. https://t.co/UjJvO5jS2T

💢 CheatSheets.

  1. https://t.co/UHJL8oBw3W

  2. https://t.co/tnG3QvCXU4

  3. https://t.co/vg7qe5kk15

  4. https://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: https://t.co/biRzjiSlBg

💢 Youtube

  1. https://t.co/0EJa85wx14

  2. https://t.co/wayaYjRHJw

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

💢 Websites.

  1. https://t.co/EdontsY4GS

  2. https://t.co/XLK5DkGOj3

💢 Projects to Practice Tailwind CSS.

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

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

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

⭕ Bootstrap.

Official Website: https://t.co/rVcCQEIsCu

💢 YouTube.

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

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

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

💢 Websites.

  1. https://t.co/QTFevc51M1

  2. https://t.co/xHhPYT7j0Q

  3. https://t.co/5XzYNc2ICJ

💢 Projects to practice Bootstrap.

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

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

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

⭕ Bulma CSS Framework.

Official Website: https://t.co/cmRgmCcxCF

💢 YouTube.

  1. Bulma Tutorial. 🔗 https://t.co/slYOeaSoRA

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

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

💢 Websites.

  1. https://t.co/JTdfKSizsL

  2. https://t.co/ZQuJc94JOf

💢 Projects to Practice BULMA CSS.

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

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

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

8️⃣ JavaScript Frameworks.

⭕ REACTJs

Official Website: https://t.co/ImSGpOkTcq

💢 YouTube.

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

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

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

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

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

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

💢 Website:

  1. https://t.co/chZMjz5QVz

  2. https://t.co/7OOEwbqM4s

  3. https://t.co/UzPcHDnMv2

💢 Build Projects to Practice ReactJs.

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

🔗 https://t.co/PGD3dncMZt

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

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

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

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

⭕ Vue Js.

Official Website: https://t.co/WanCacrMgk

💢 YouTube.

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

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

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

💢 Websites.

  1. https://t.co/sHPDP3CP4W

  2. https://t.co/hphI0EMi2N

  1. https://t.co/ezePvheQli

  2. https://t.co/LN5wQisjRj

💢 Projects to practice VueJs

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

  2. Covid Tracker. 🔗 https://t.co/Qz0UupNBrp

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

⭕ Angular.

Official Website: https://t.co/Sdeth8ouSe

💢 YouTube.

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

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

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

💢 Website.

  1. https://t.co/QOaiXVAMLP

  1. https://t.co/cAl5uGEhBd

  2. https://t.co/sqtIvX6ed7

  3. https://t.co/6gsw2Fjsf7

💢 Projects to Practice Angular.

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

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

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

⭕ Svelte

Official Website: https://t.co/rKNEo0U9SZ

💢 YouTube

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

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

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

💢 Websites.

  1. https://t.co/nLUzh4oPgT

  2. https://t.co/sUT4lvs3uB

  1. https://t.co/Hw9yyFGcmY

💢 Projects to Practice Svelte Js.

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

  2. https://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

22
Subscribe to my newsletter

Read articles from Mohammed Junaid Ap directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Frontend Developmentfront-endfront end devFrontend frameworksfrontend

Written by

Mohammed Junaid Ap
Mohammed Junaid Ap

Building @codemarch • I help web developers & designers to find the best resources and tips to save their hours of research