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.
