Roadmap for Web Development

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

I have also covered many other things like how you can develop great mobile applications using the technology you will learn for web development, how you can integrate a machine learning model to your website, etc.

Also, if you have less time and want to build some good projects in web development, I have shown how you can create a good project in just 7–8 days.

If you don’t want to read the whole article, I have a video on the same topic:

Please subscribe to my channel: Chirag Jain (Thank you)

Before starting with the roadmap, let’s get a brief idea of how a website works.

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.

Let’s see how the client-server model works, with an example.

Suppose you want to book a ticket on a train on the IRCTC website. For this, you want to first check how many seats are available on a particular train. So, you select a train and then click on the “Check availability” button. Within few seconds, you find the number of seats available, visible on your screen.

How does this work?

Client-Server Model

The design of the website, that you can see, is the client. When you click on the “Check availability” button, it will send a request to the server which contains the train no. of the selected train. The server has a database, which contains the details of all the trains. It finds the required number of seats available of that train from this database and sends a response, back to the client. Once, the client receives this response, it displays this number on your screen.

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 gets you started with the necessary common skills required, then provides a path to learn both the phases, one by one, and at last, lets you connect things up.

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.

Let’s get started.

Recommended Common Skills

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.

Note: You should code along with the video tutorials, to get a good grasp of the syntax.

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 any 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)

JavaScript is the only programming language supported by web browsers.

If you are thinking “Why not HTML ?”, you should know that HTML is not a programming language, it is just a markup language i.e. You can’t do stuff like calculating sum of a few numbers, run loops, etc. using HTML.

Source: https://www.reddit.com/r/ProgrammerHumor/comments/8x02or/html_is_a_programming_language/

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.

Whatever syntax you learn in JS, always just try it out, in your browser console. To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use the shortcut Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux). This would really help you later when you want to debug some piece of code later.

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.

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.

Now, a question in your mind would be “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

Now, you must be able to answer the following questions by yourself:

• What is an API?
• What is a REST API? Why is it called REST?
• What is a client?
• What is a server?
• If a client sends a request to a REST API (server), how many responses can he receive, at maximum, for that request?
• What is an endpoint?
• What are the purposes of using different types of requests, like GET, POST, PUT, DELETE
• How can one test an 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.

Build up a project by learning backend only

You can build up a good project by learning only backend. You can follow the below steps:

1. First learn the recommended common skills [ HTML, CSS, JS ]
2. Learn Node.js and Express in the backend part.
3. Go through points (1) and (2) mentioned in the resources for MongoDB.
4. Watch this playlist for creating a complete project from what you have learned till now.

Thus, you can now create a good project in 7–8 days, by learning only backend development.

Build up a project by learning frontend only

You can also build up a good project by learning only frontend. You can follow the below steps:

1. First learn the recommended common skills [ HTML, CSS, JS ]
2. Learn React and Redux in the frontend part.
3. You can watch this tutorial to build a project management website using React, Redux and Firebase.

Thus, you can now create a good project in 7–8 days, by learning only frontend development.

More to Explore

You can explore the following as per your requirements.

Build cross-platform mobile apps using React Native

Actually, if you know React, there is almost nothing new to learn in react native, except the components that you will use.

1. Watch this tutorial for learning React Native.
2. For reference, you can view the documentation of react-native anytime.

Using SQL as Database in server

1. 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.

Make sure you give this article a clap, if you found it useful and want to see more!

Thank you!!