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.
