Roadmap for Web Development

This article guides you through the complete roadmap for learning web
development with all the best resources available for free.

The Client-Server Model

If you open any website, what you are able to see, is just the Frontend of
the website, also known as the Client.

But, there are many things going on, in the Backend part of the website,
also known as the Server

About the roadmap

The path to web development can be divided into 2 phases -

1. Frontend development (or Client-side development)
2. Backend development (or Server-side development)

This roadmap will primarily focus on the MERN stack (MongoDB, Express,
React, Node.js), which is one of the most popular tech stacks of today’s web
developers. Once you master the MERN stack, you can shift to any other
tech stack easily in the future, if needed
Tip: You can use the VS Code editor, as it is the most popular choice of
web developers, and it contains hundreds of extensions available to help
you code smoothly.

HTML and CSS

HTML is the basic skeleton of a web page that gives it structure and CSS is
just the styling of a web page to make it look beautiful.
 1. You can start off by watching this video, which covers the basic
syntax of both HTML and CSS, with many examples.
2. Just go through the basic tags, forms, etc. in HTML from any one
of the below resources :

(a) W3Schools: At least, go through the topics up to “HTML iframes”, in the

HTML tutorial section and try to complete the “HTML Forms” section fully.
You can use the “Try it yourself” option, make some changes in code, run it,
and observe the changes. This will certainly help you in understanding
things better.

(b) Traversy Media’s HTML crash course: If you like learning stuff by
watching videos, then you may prefer watching this crash course.

3. CSS lets you change various properties of the HTML elements to modify
their styling. You need not cram all the properties. You should just have an
idea of the properties, you can use in CSS to change the styles. Just go
through the basic syntaxes, properties, etc. from any one of the below
resources :

(a) W3Schools: At least go through the full CSS tutorial and the topics upto
CSS Text Effect in CSS Advanced.

Apart from this, you can also go through the topics “RWD Images” and
“Media Queries” in the CSS Responsive section, which are used a lot in
today’s world to make the web pages responsive. A responsive website
means the appearance of the website changes, according to the size of the
device (mobile, laptop, tablet) in which it is viewed. For more
understanding of responsive websites, check out
http://ami.responsivedesign.is/ and enter the URL of your favorite
websites there.
(b) Traversy Media’s CSS Crash Course: If you like learning stuff by
watching videos, then you may prefer watching this crash course.

JavaScript (JS)

Learning JS is also beneficial because once you have a strong

understanding of the concepts and syntax of JS, you can expertise both
front-end and back-end development easily because there are frameworks
for both in JS.

For learning JS, at least learn the basic syntax from any one of these :
(a) If you like learning through videos, watch these 2 videos in order:
1. Free course of JS by freecodecamp
2. DOM Manipulation in JS

(b) W3Schools: At least, go through the topics up to “JS Mistakes” in JS

Tutorial, JS Objects fully and JS Functions also fully. Along with this, you
may complete all the topics in the JS HTML DOM section.

After learning JS, I would recommend trying out a few mini-projects

based on HTML DOM manipulation. For this, you may check some of
the videos in this playlist.

OTHER USEFUL RESOURCES

https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q
Front End Development
Frontend development, also known as client-side development
refers to building the UI/UX of a website, to which the user
directly interacts using his browser.

Bootstrap

Bootstrap is the most popular CSS framework for developing responsive

and mobile-first websites. It provides a lot of ready-made components
using some ready-made CSS classes, which saves much time.

For learning Bootstrap, you may go through these in order:

1. Introduction to Bootstrap
2. Grid System of Bootstrap
3. Explore the components that Bootstrap provides
4. Bootstrap Crash Course by Traversy Media (Optional)

Just try to get an overall idea, of what all components, bootstrap provides.
You can just use these components in your project, whenever you like.
There is no point in cramming the classes of these components as you may
explore the documentation, whenever you need it.

React

React is one of the most popular frameworks for frontend development.

React provides a lot of features like Reusable components, Virtual DOM,
 conditional rendering, etc., and allows you to build even complex UI/UX in
a much easy manner.

For learning React, you may go through these, in order:

1. React Tutorial for beginners by Mosh

2. React Documentation (Go through the “Main Concepts” section
only)
3. React Hooks, the modern syntax of React
4. React Tutorial: Build a Quizzing website in React (Optional)

Redux

Once you have learned React, you may observe that you need to pass the
state of one component in the form of props to some other components.
But, when you would be a building large project, which contains hundreds
of components, this passing of state as props, may reduce the code
readability to a large extent.

Basically, you need something to manage your state in some central store,
which can be directly accessed by any of the components, without the need to
pass props to it.

This is what Redux does. Redux maintains the state of an entire application
in a single immutable state tree (object), which can’t be changed directly.
When something changes, a new object is created (using actions and
reducers).
For learning Redux, you may go through these, in order:

1. Redux crash course by Traversy Media

2. Redux documentation (for reference)
It’s very high chance that you may find Redux very complicated, due to lots
of terminologies involved in it. You may skip Redux for now, if so. But
believe me, when you work on 1–2 projects in which you use React and
Redux, you will be confident enough.

Back End Development

Backend development or Server-side development deals with the building

up of an API that can be used by the frontend or web pages to manipulate
data stored in a database.

What is an API?
For a while, you can just understand API is an interface that acts as a
waiter, who brings the data from some database and provides it to the
frontend when requested. Not only this but API can also be used to
manipulate data in a database. You can watch this short video for
understanding this idea more.

Node.js

Node.js is a running time environment for running JS codes. Node.js can be

used to build the backend API. You may go through this video for its
tutorial.

Express

Express is a flexible Node.js framework that allows you to build APIs very
easily. Follow this to learn Express:

1. Watch this video, to get the basics of Express, REST API, and
Postman.
 2. You can view the documentation of Express for reference,
anytime.

3. Go through some good practices for creating a REST API

MongoDB

MongoDB is a flexible NoSQL database. It is easy to use and understand,

for beginners. For learning MongoDB, go through the following:

1. MongoDB crash course

2. A short blog on mongoose (used for validating data and
maintaining relationships between data)
3. A tutorial to build a REST API in Express using MongoDB as
database
4. Setting up Cloud database for MongoDB (optional)

Connecting the frontend and backend

1. Basically, you would need to send a request to an endpoint on
your server. So, just go through the syntax of axios(), which does
this for you.
2. When sending the request from your frontend, you would
generally face the error “blocked by CORS policy”. To fix this
error, read this blog.
3. Sometimes, you may require to store some information in the
local storage or the session of the browser itself, so you should go
through this tutorial to know about how to use the local storage
and session storage.
It’s all done. But if you still face some issues or want to build a complete
project consisting of both frontend and backend using the MERN stack, I
recommend going through this tutorial and code along.

Using SQL as Database in server

Learn SQL from any of the following:

(a) MySQL Tutorial by Mosh
(b) Basic MySQL Tutorial
2. Learn how to use SQL database in Node.js from this video.

Integrate Machine Learning model written in python to your server

1. Learn Python from w3schools.

2. Learn Flask, which is a python framework to create an API, from
this tutorial.
3. Now, to integrate the ML Model with your Flask server, you would
need to save your model first in a .pth file and then use it in your
code to make a prediction. You can go through this blog which
shows in great detail, how to do this.

OTHER USEFUL RESOURCES:

● The complete 2021 web Development Boot camp 2021 -Udemy course