The best way to learn frontend for beginner | Frontend Development Roadmap 2022

What is Frontend ?

In simple term , whatever you see on your screen is front-end. The User Interface with which the end user / customer directly interacts is frontend.

Watch Video Instead

Do Prior knowledge of coding required to learn frontend ?

No/Yes.

If you already know coding , it well and good.

If you do not have any prior idea about coding , then also its completely OK.

HTML

Blog(w3 school) – https://www.w3schools.com/html/default.asp
Video(crash course) – https://www.youtube.com/watch?v=pN7BFLfSjFw
Video (playlist) – https://www.youtube.com/watch?v=Y1BlT4_c_SU&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

Important things to learn in HTML - 
html tag , meta tag , body tag , div tag ,  form control - (input , select ,checkbox , textarea , search),  date , image , list , tables

Time Taken – 4 days

CSS

Blog(w3 school) – https://www.w3schools.com/css/default.asp
Video (crash course)- https://www.youtube.com/watch?v=TFrFx7H5ZI8
Video (playlist) – https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
CSS Grid – https://www.youtube.com/watch?v=BNmxUzPRYdw
CSS Flexbod – https://www.youtube.com/watch?v=5qVuORLniwM

Important thing to learn in CSS- 
id, class , 
margin , padding
inline , internal , external 
 container  , selector
flexbox , grid ,
media queries 

Time Taken : 10 days

Bootstrap

Docs – https://getbootstrap.com/docs/5.0/getting-started/introduction/
Bootstrap 5 – https://www.youtube.com/watch?v=Qb8DLdSYBAo

Time Taken – 7 days

Project Using HTML and CSS

Project 1 – https://www.youtube.com/watch?v=oYRda7UtuhA
Project 2 (Portfolio Website) – https://www.youtube.com/watch?v=hpX9ypF4ytE

Java Script

Blog – https://javascript.info/
Blog(w3 school) – https://www.w3schools.com/js/default.asp
Crash Course (16 hr video) – https://www.youtube.com/watch?v=KGkiIBTq0y0
Java Script (playlist) – https://www.youtube.com/watch?v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

Main things to learn in Java Script - 
---------------------------------------
data types - var , let , const , 
 - object , array , string
dom manipulation , regex expression , error handling , this keyword, arrow function , callback , scope , hoisting, closure, bind, call, apply,  event propagation , setInterval , setTimeout , json
>async await 
>map , filter , reduce
>how to use console 
>how to debug code and check error

Time Taken : 25 – 30 days

Project using HTML , CSS and Java Script

Java script form validation project – https://www.youtube.com/watch?v=WLUCzSaH5kI
3 simple project in 30 min – https://www.youtube.com/watch?v=mCQ1-iDSnto
Java Script Todo list – https://www.youtube.com/watch?v=Ttf3CEsEwMQ
5 projects in 5 hr – https://www.youtube.com/watch?v=JkeyKeK3V24
Java Script Project Playlist – https://www.youtube.com/playlist?list=PLpwngcHZlPadhRwryAXw3mJWX5KH3T5L3

React JS

React Js Docs – https://reactjs.org/docs/getting-started.html
React Js Playlist – https://www.youtube.com/watch?v=tiLWCNFzThE&list=PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ

Project In React

Todo list using react js – https://www.youtube.com/watch?v=XXRptlP5P6U
5 Project using React Js – https://www.youtube.com/watch?v=EHTWMpD6S_0

Tim taken – 30 days

Angular JS

Angular Docs – https://angular.io/docs
Angular Crash Course – https://www.youtube.com/watch?v=0LhBvp8qpro
Time Take – 30-45 days

Vue Js –

Vue Docs – https://vuejs.org/guide/introduction.html
Vue Js Crash Course – https://www.youtube.com/watch?v=qZXt1Aom3Cs

Time Taken – 30 days

API

API – https://www.youtube.com/watch?v=Mykv_Ee1IeU
Json – https://www.youtube.com/watch?v=XaImobROZAY
Async Await – https://www.youtube.com/watch?v=bWaucYA1YRI
Simple CRUD project – https://www.youtube.com/watch?v=Mykv_Ee1IeU
CRUD Project – https://www.youtube.com/watch?v=-rNQeJi3Wp4
Project to learn API & Async Await – https://www.youtube.com/watch?v=XaImobROZAY

GIT (Version Control)

GIt crash course – https://www.youtube.com/watch?v=uaeKhfhYE0U

Web Fundamentals

- http/https
- how browser works
- cors
- domain / hosting / DNS

How to host a website on live server – https://www.youtube.com/watch?v=72FNoKoKOqc

Link : https://www.freecodecamp.org/news/web-application-security-understanding-the-browser-5305ed2f1dac/

Conclusion

All the required resources, topic and points are covered in step by step manner.

Now go ahead and start your frontend journey.

Thankyou.

Help Others

Himanshu Shekhar

Hey. I am a software engineer with 3+ years. Along with my job, I create content regarding coding and software engineering in general. I would request you to follow my blog and my video, which will help you in your software engineering journey. Follow me on Youtube →
View All Articles

Leave a Reply

Your email address will not be published.