DEV Community

Cover image for All About Web Development
Harshit Dugar
Harshit Dugar

Posted on

All About Web Development

Technology plays a huge role in our daily lives, from the simplest of apps to the most groundbreaking inventions. Every website or piece of software that we encounter has been built by a web developer—but what exactly is web development, and what does a web developer do?

In this guide, we’ll go through the basics of web development.
And one more important point , there is no prerequisite to learn web development , if you are a beginner or from non technical background then also you can get started .

There are three phases to become a FULL STACK WEB DEVELOPER.

1. Know the basic essentials

2. Front End

3. Back End

Now the question comes how to get started and which resources to follow .
I will be giving all the resources and how to get started in a particular manner .

1. Basic Essentials -

As you are going to start your web development journey you should know some basic knowledge of HTTP , API and how internet works .
Not to worry about this that how we will learn . It will not take much time . Here is the list

a. Git and Github

image
Git is a version control system which basically manages your project i.e. every change you make in your project it will keep a record of it .
Now from where to learn --

b. HTTP and Browser system

HTTP means Hyper Text Transfer Protocol, to learn more about http and how server client works you can read this article click here

c. API

API i.e. Application Programming Interface , is a two way system between softwares . to learn more about API click here

2. Front End Development

Now as you have learned basic essentials now lets get started to real web development .
Front end means the actual page you see like YouTube page , Facebook and other websites . They are basically made of 3 components 1.) HTML 2.) CSS 3.) JavaScript
When you make a request to the server to load the website it basically sends you HTML CSS Js code to the browser and you are able to see that web app.
To get started --

a. HTML5

image
HTML Hypertext Markup Language makes the skeleton of you web page . It is very easy to learn and implement . As a beginner I will not suggest you to do 100% of HTML as there are some advanced concepts like svg and canvas which is not used as a beginner .
Here is a documentation from where you can learn HTML

b. CSS3

image
CSS i.e. Cascading Style Sheet is a styling language that provides styles and enhancement to the web page .
All the images collars and effects are done by css .
click here

c. JavaScript

image
JavaScript is a programming language . It is the brain of you whole web page, it decides the behaviour of web page , you can think it as a full working system . How the button will be clickable and what to do when a particular action is taking place is done through js. For full tutorial of javascript click here
After doing Javascript I will suggest to do Bootstrap which is a css framework. You cam do this from w3schools.
Also do react a javascript library which is developed by Facebook click here
This completes the front end part .
But only learning is not important I will also recommend to do some small projects while learning .

3. Back End Development

As you have successfully completed Front End you are good to go for back end .
All the server side process like searching and storing data to cloud happens in backend part . Backend gives full functionality to our website , we can communicate with data on the server using backend .
To get started first you have to learn a backend programming language , it can be Python , PHP , Java , node.js
I will recommend to use node.js as there is a big community for this language.

a. Node.js

image
Node.js is used for backend development . It is a server side language .Click here for full documentation .

b. Database Management System (DBMS)

As we move forward and make a responsive website it is also important to know Database Management System. It is a way to store and manage data . You will be storing some data to your page or your website will ask for user input , this all Data will be stored and managed using DBMS. And to do all these task you need Query language. SQL,MongoDB are best and I will recommend to do MongoDB (NoSQL) if you are doing node.js.Click here

What is a stack (MERN vs MEAN)

Stack means set of technologies , in web development stack means set of technology or languages used to make a single project .

There are main two stacks in web development -

1. MERN stack

This is the most recommended stack as it is most used in the industry level.
M => MongoDB
E => Express.js
R => React
N => Node.js
In the above guide I have discussed about MERN stack

2. MEAN stack

M => MongoDB
E => Express.js
A => Angular
N => Node.js

This was all about the full roadmap to become a Full Stack Web Developer.
Thanks for reading article, if you found it helpful do comment your reviews.

Top comments (0)