Web Development Road Map

Front-end Development
1:- HTML (Hyper Text Markup Language)

HTML is used for the structure of a web page

 Learn What is HTML

 Learn How web works
 Learn Some basic elements :
o Structure to write HTML
o Text Elements
 Paragraph Tag
 em tag
 italic tag (etc)
o Heading Elements
o HTML Entities
o Hyper Link
o Image Tag
o Video & Audio Tag
o Difference B/w Relative URL and Absolute URL
o List Tag
o Table
o Difference B/w Block level Elements & Inline Elements
 Learn about semantic HTML

Make a Dummy website with no styling to practice HTML mentioned above.

Best Resources to Learn

Paid Course:-

 https://codewithmosh.com/p/the-ultimate-html-css

Free Youtube Course:-

 https://www.youtube.com/watch?v=N8YMl4Ezp4g&list=PLC3y8-rFHvwhuX4qGvFx-
wPy_MEi6Jdp7
2:- CSS (Cascading Style Sheet)

CSS is used for the Design a web page.

 Learn some basic properties of CSS

 Ways to implement CSS in HTML
 Basic selectors of CSS
 Advance Selectors of CSS
o Relational Selectors
o Direct Child Selector
o Pseudo class selector
o Pseudo element selector
 Selector specificity
 Inheritance
 Colors
o Named colors
o RGB colors
o HSL colors
o Hexadecimal colors
 Basics of Gradients
 Basics of Shadows
 Box Model
o Margin
o Padding
 Measurement Units
o Absolute ( px , in , cm , pt , mm)
o Relative ( vh , vw , em , rem
 Positioning
o Absolute Position
o Relative Position
o Static Position
o Fixed Position
o Sticky Position
 Z-Index
 Layouts
o Flex Box
o Grid
 Basic of Transition
  Learn about media queries

Best Resources to Learn

Paid Course:-

 https://codewithmosh.com/p/the-ultimate-html-css

Free Youtube Course:-

 Basic CSS
 https://www.youtube.com/watch?v=Icf5D3fEKbM&list=PLC3y8-rFHvwhuX4qGvFx-
wPy_MEi6Jdp7&index=2
 FlexBox
 https://www.youtube.com/watch?v=z62f2k38s64&list=PLC3y8-rFHvwhuX4qGvFx-
wPy_MEi6Jdp7&index=3
 Grid
 https://www.youtube.com/watch?v=p4Ith5qRM1g&list=PLC3y8-rFHvwhuX4qGvFx-
wPy_MEi6Jdp7&index=4

3:- Make some projects with HTML CSS

 Try to add responsiveness with media queries without any CSS framework
 Follow this channel to build projects.
 https://www.youtube.com/@TraversyMedia
 Make project by watching his videos. Then try to make your own projects without
watching

4:-Bootstrap (CSS Framework)

 How bootstrap grid system works

 Learn to make responsive web pages with bootstrap

Best Resources to Learn

 https://www.youtube.com/watch?v=wkSA9bfCmKU&list=PL0b6OzIxLPbz1cgxiH5KCBsy
Qij1HsPtG
 Watch just first 20 videos of above playlist and make 2 projects with HTML CSS and
Boostrap
 https://getbootstrap.com/docs/5.2/getting-started/introduction/
5:- Javascript

 Fundamentals of Javascript
o Variables
o Conditionals
o Loops
o Data Types (Reference / Premetives)
o Type Conversion , Coersion
o Math Object
o String Methods
o Arrays
o Objects
o Functions
 Function Declaration
 Function Expressions
 Arrow Functions
 IIFEs (Immediate Invokeable Function Expression)
 Object oriented Javascript
o What is OOP
o Pillars of OOP
o Constructor Function
o Prototype
o Prototypal Inheritance and Prototype Chain
o ES 6 Classes
o Inheritance B/w classes
 Learn about DOM manipulation (just basic)
o What is DOM
o Selecting in the DOM
o Collection vs Node list
o Traversing +Element creation and Deletion etc
o Events (Mouse Events , Keyboard Events)
o Event Bubbling and Event Delegation
 Asynchronous Javascript
o What is Asynchronous Programming
o xmlHTTPRequest Object
o Callbacks
o Callback hell
o Promises
 o Async , Await
 Theoretical stuff for interviews like
o Hoisting
o closures
o let vs var vs const
o TDZ
o Event loop
o How js works
o Execution context

Best Resources to Learn

Paid Course:-

 https://www.udemy.com/course/the-complete-javascript-course/
 https://codewithmosh.com/p/ultimate-javascript-series

Free Youtube Course:-

 https://www.youtube.com/watch?v=XIOLqoPHCJ4&list=PLC3y8-rFHvwhuX4qGvFx-
wPy_MEi6Jdp7&index=5
 https://www.youtube.com/watch?v=R9I85RhI7Cg&list=PLC3y8-rFHvwhuX4qGvFx-
wPy_MEi6Jdp7&index=6
 https://www.youtube.com/watch?v=exBgWAIeIeg&list=PLC3y8-rFHvwhuX4qGvFx-
wPy_MEi6Jdp7&index=7
 https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vN
aUccPVNP

6:- Build Projects with HTML CSS Javascript and BOOTSTRAP

 Todo application
 Music player app
 Calculator app
 Weather app
 Attractive portfolio
 Movies data fetcher app
7:- React JS (Javascript Framework)

 Fundamentals of React
o Create React app
o Functional Components
o Class Components (Just Basic)
o JSX
o Props and state
o useState and useEffect Hook
o setState and LifeCycle method(For interview Purpose)
o Conditional Rendering
o Lists and keys
o Building simple forms
 Advance Topics of React
o Context API
o Higher Order Components
o Refs
o Portals
o Error Boundaries
 Advance Hooks
o useContext
o useReducer
o useRef
o useMemo
o useCallback
o Custom Hooks
 React Ecosystem
o Redux (State Management)
o React Router v6

Best Resources to Learn

Paid Course:-

 https://www.udemy.com/course/react-the-complete-guide-incl-redux/
Free Youtube Course:-

 https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-
rFHvwgg3vaYJgHGnModB54rxOk3
 https://www.youtube.com/watch?v=UWYOC8g5N_0&list=PLC3y8-
rFHvwjkxt8TOteFdT_YmzwpBlrG

8:- Learn Redux and use it with React

 First you need to know what is Redux?

 Why there is need of Redux?
 What is the difference between Context API and Redux?
 You should use Context API before learning redux so that you can get some hands on
experience with built in state manager.
 Remember one thing, its always preferable to use built-in tools of React Rather then to
use some third party tools.
 Start with very basics like
o Folder structure
o What are actions
o What are reducers
o What is the flow of redux
o How to create store in Redux
o How to send values to store and get values from store
 Don’t use any middleware like thunk at beginning
 Make some small applications with redux such as TODO so that you can understand the
flow of redux alright?
 After understanding the flow and building one or two small sized projects in which there
are no asynchronous operations.
 Now its time to learn how to perform async operations with redux then you will learn
about thunk middleware learn how to configure thunk with redux learn how to
configure redux dev tools
 What will be the flow if we use some middlwares with redux right?
 In this way you can fully understand the flow and use of redux with theoretically and
practical hands on knowledge of redux.
 Make 2 projects without using Thunk
 Then make 2 projects with thunk.
  Don’t think about redux toolkit at first.
 If you fully understand the actual redux toolkit usage becomes really very easy easy for
you.

Best Resources to Learn

 https://youtu.be/qNjNn9BCWCc
 https://youtu.be/npxOGQ9zZY4
 https://youtu.be/0W6i5LYKCSI
 https://youtu.be/JDZRfLGNWdc
 https://redux.js.org/
 For Toolkit
 https://youtu.be/EnIRyNT2PMI
 https://youtu.be/FeYTMsWpgQo
 https://youtu.be/VEp9dW0MeDA

Project Ideas that you can build add them to your portfolio to get a job

 1:- Calculator
 2:- Expense tracker (With json mock backend)
 3:- Weather Application using OPEN weather api
 4:- Movie application using Omdb api
 5:- Github finder using Github rest api
 6:- Quiz Application
 7:- Personal Portfolio
 8:- Google search engine clone using Rapid Api
 9:- Advance expense tracker using firebase in the backend and google oauth for
authentication authorization and speechly to add functionality to write expense with
your voice.
 10:- E-commerce Application.