Web Development RoadMap & Resources
For all my cuties,
From where to do
How much to do
Important points
Resources:
MDN web docs
W3Schools
CSS-tricks
Stack overflow
YouTube
Step 1: Full Stack Development
Frontend
HTML, CSS
HTML for structure and CSS for design
SuperSimpleDevs (short and precise) / CodeWithHarry sigma dev 1-53 (a
little time waste but more information)
You just need to understand how it works and from where to refer and code.
You don’t need to memorize everything or anything or make notes for it, refer
documentation/ resources/ ai.
JavaScript (JS) and DOM Manipulation
To add logic to the project since HTML cannot implement logic and
programming, DOM for selecting and manipulating HTML elements directly
CodeWithHarry sigma dev 53-84 (enough for dev), for clearing interviews
related to webdev, the following books to be read entirely: EloquentJS,
YouDontKnowJS
Just the basics required for frontend. promises, async await, promises,
functions -> Advanced JS required for full stack. even more detailed
knowledge and explanation required for clearing interviews.
Prepare notes and read the books slowly and steadily for interviews (not
obviously in a single go).
Backend
ExpressJS, NodeJS, NPM, EJS
Till now, the websites we made using simple js were synchronous. For
handling various functions asynchronously, Nodejs (a run-time environment
that allows js to run on browser AS WELL AS on your server/device/system)
For example, if amazon/flipcart were to use only js, in order to scroll or use
any other functionality, you had to wait for all the images, data, etc. to load up
from the database. Instead, Nodejs allows the fetching/loading functionality to
work asynchronously and hence other features can be used meanwhile.
Expressjs is a framework made for easy usage of nodejs.
Node Package Manager that allows various libraries and packages that have
been made and open sourced to be used easily by everyone. Includes various
commands to be used directly in the terminal.
EJS is used for adding logic and programming to html page itself using js
syntax.
CodeWithHarry sigma webdev 85-93 (includes api, routing, postman,
middlewares, etc)
Learn how to use, read, and understand libraries from
https://www.npmjs.com/, the basic structure and features of express and the
rest you would get while making projects.
Create separate and organized folder for every feature and functionality in
order to refer and use it in your real projects
APIs
Includes RESTapi, middlewares, status codes, etc
Covered in code with harry playlist but for better understanding, refer
PiyushGarg Master Nodejs 12-17 (content would be a little repetitive)
Get only the basic understandings of WHAT and HOW
Database
SQL : PostgreSQL, non SQL : MongoDB. PostgreSQL is more in demand as
of now but MongoDB is equally important as well. Learn both to my opinion.
CodeWithHarry sigma webdev 94-97 for MongoDB and mongoose,
DipeshMalvia for PostgreSQL.
No need to learn the syntax -> refer official documentation or npmjs.com for
code and functionality.
Side by Side also learn how to use online server for these.
Authentication, Authorization and Security
PiyushGarg Master Nodejs 23-26 (basics -> JWT, cookies, sessions),
HelloWorld (passportJS, bcrypt, salting, hashing)
PassportJs along with bcrypt are the most important and efficient as well as
most commonly used. The traditional ways of JWT, cookies, sessions etc are
complicated.
Implement Google OAuth 2.o, signin with facebook/discord etc. using
passport only.
Related Sexy frameworks and libraries
jQuery
Used for simplifying code and easy manipulation in js, no longer in demand
codeWithHarry
No need to learn in depth, get a simple overview of it
BootStrap
Provides pre-built components, used mainly for easy responsiveness of the
website mainly.
codeWithHarry
Just refer to the official bootstrap docs and that’s it
TailwindCSS
Used for building custom css components easily through low level utility
classes.
CodeWithHarry sigma webdev 98 and 101
// BootStrap provides readymade components but customization is complex and
cannot be done in most cases while tailwind allows custom creation
Step-2 MERN stack
MongoDB done, Express done, React to be done, Node done
ReactJS
reactJS is a JS library for frontend (user interface)
ChaiAndCode entire playlist
NextJS
ReactJS framework adding for more features as well as Backend
Functionality
ChaiAndCode entire playlist
