How to Make a Website - Everything you should know about Web development

After reading this article you will never ever search for a web development guide neither on Google nor on YouTube. I will cover all the basics to advance stuff related to web development. So this article is for beginners as well as intermediate programmers who don't know about web development but want to dive into this web development world.

Many of you may hear some names related to the web development fields like PHP, Django, WordPress, Node Js, React Js or Bootstrap, etc. Yes, you are right. All these terms are from the web development field. Don't worry about all these things and don't think too much. I will keep things as simple as possible (As I always do) to make this tutorial helpful to you.

So leave all your worries aside, just keep calm and I am pretty sure at the end of this article you will have a huge basic knowledge about web development. I will explain all those famous terms that are used in web development. So just bare with me.

Before going to the technical terms, first, let me explain the basic structure of a website. We can divide a website's structure into 2 main parts :
1. Front end
2. Back end

The Front end is the part which the client machine renders i.e. the part which is accessed by users through a browser. You are reading this article on your mobile/PC/Tablet etc. So this is the Front end of my website. The front end may consist of HTML, CSS, Javascript, Bootstrap, etc. which are discussed in the next section below.
Now, talking about the Back end, the back end is the server-side part. This is the part where data manipulations occur as per client requests. For example, you send a request to this website's server through a URL to access this article and the back end part of Solution-hub.com website provides you with the requested data in response. Python, Java, Javascript, and PHP are examples of server-side languages.

Front End

So talking about the front end, as stated above front end is part of a website that is accessed on the client's machine. The data is represented in the browser with the help of HTML. So HTML is the basic thing because this is the raw data. Now, to make the webpage look attractive we have to do some styling. And this styling is done with the help of CSS. For example, the background colors, text color/size, manipulating image size, etc. all these things are done with the help of CSS. So CSS makes the webpage magnificent.

So HTML & CSS are the basic needs for the Front end. Now some of you might be thinking about Javascript. I know your excitement but javascript is not mandatory for the front end. But I would like to say that "JavaScript can be avoided if you are not using a javascript architecture like MEAN or MERN for web development". Don't worry, I will make these things clear to you in the Javascript section below.
So, for now, HTML and CSS are the minimum requirements for the front end of a website. The communication or the basic architecture of a website is expressed in the following figure. Requests are made through the client machine or browser using URLs. Then the server makes some manipulations as per the request and returns some responses back to the client machine.

Back End

The back end is the most complex part of a website. Think of a waiter in a restaurant. You are the client or consider yourself a browser or client machine. The restaurant's kitchen is the database and the waiters are just like back-end functions. You request something, then the waiter does some manipulations with the help of the kitchen and provides you with your desired food.

So back end is the main part of a website. Now, I am not enlisting the minimum or fundamental requirements for the back end part because it depends. For example, if you are using the Django framework for developing your website then you have to use Python in the back end. If you are using Spring framework then you have to use Java in the back end. So I would say it totally depends on the framework or platform that you are using for web development and I will talk about these platforms below.

Response

Before talking about the frameworks I want to specify one another thing that is pretty simple and interesting as well i.e. the Response. The server sends a response in return for a request and the response can be in the following form :
1. HTML
2. XML
3. JSON
I am pretty sure that you have heard all these terms already. HTML is the response for browsers and in browsers, we don't want to send the whole webpage again if only a little change has to be made in it. For this purpose, we use either JSON or XML. Before 2013 (about) we were used to sending the data packets using XML (Extensible Markup Language). But after 2013 JSON comes with some new good features and developers also start using JSON (JavaScript Object Notation) formats. These are the terms nothing to take seriously as a beginner but I wanted to elaborate the term response, so I put some light on this too. But again don't be afraid of these

Frameworks & Libraries

So now, you are aware of the basic architecture of a website. In this section, I will cover all famous Frameworks and Libraries that are used for web development. If you want to know "what is the difference between a Library and Framework", then you should read this article
Library vs Framework

1.) BootStrap: BootStrap is a famous CSS framework. It is open-source and developed to make the templates responsive w.r.t the device used in the front end. It contains Javascript and CSS-based templates for forms, buttons, navigation bars, etc. You can also do all these things with the help of CSS on your own but Bootstrap makes the process fast and efficient which saves developers time. All you have to do is just remember the inbuilt CSS classes and use them directly in your templates.
You can take the help of Bootstrap's Documentation which is pretty simple and easy to understand.
Here I want to make my point. If you are a beginner then don't go for bootstrap. Just make webpages/templates by your own with the help of CSS only. This makes you understand things deeply and meaningfully.

2.) Wordpress: Wordpress is an open-source Content Management System (CMS). This is developed in PHP. If you don't want to learn programming then just go for wordpress. It is super easy to make a website on WordPress. About 76 million websites are running with the help of WordPress. There are plugins for everything in WordPress, If you want to do some manipulations in your interface or in response then you will definitely get a plugin for it. WordPress uses MySQL.

Languages & Their Frameworks

Now I will explain the rest of the frameworks with respect to the programming languages. This will help you to choose the right framework for developing your personal website, for the job, for freelancing, etc. Each and every framework have its own advantages and disadvantages over one another. At the end of this article, I will also give my personal opinion about a framework.

1.) Python: Python is growing day by day, you can do almost everything from web development to Machine Learning with the help of Python. Python has many frameworks to make a website like Flask, Django, Bottle, web2py, etc. But Django is the most popular one. Flask, Bottle, and web2py are used for developing small-scale websites. Django is very flexible and used for high-level complex websites. It was initially released in 2005. You can customize almost everything in Django as per your requirement.

The main feature of Django is, you don't have to worry about the database. You can use any database from SQLite to MySQL, MongoDB, etc. The good thing is that you don't need to write SQL queries to generate database tables i.e. everything is done with the help of Python, which is a great feature.

Django is based on MVT architecture i.e. Model View Template. This Means data is stored in models, request handling is done by Views (a Python file containing Python functions). And the response is rendered with the help of Template.

2.) Java: The popular framework named Spring is based on Java. So Java is the heart of Spring. Honestly, I never used Spring so I am not writing too much stuff about this framework. But this is an old framework that was initially released in 2002. Spring is based on the MVC arch


3.) JavaScript: Javascript is everywhere. Basic information about Javascript is elaborated on in this article.
Javascript Basics
So, You can make a website that is totally based on javascript. Javascript was first introduced in 1995 with some front-end features only. You can use Javascript in the front end only to make some cool effects or animations which may not be possible with CSS. This is the reason that some developers say that "HTML, CSS & javascript" are the requirements for the front end. But as a beginner I suggest you make some webpages or maybe a website without using javascript and yes that is possible.

When you make a website just by using CSS, you will come to know the effectiveness of javascript when you compare your website with other websites. But yes, you can definitely make a website without using javascript. For example, if you are using Django then javascript is not compulsory.

Now let's talk about javascript frameworks. The website which uses javascript can be based on 2 types of architectures i.e :
1.) MEAN : MongoDB + Express + Angular + Node Js
2.) MERN : MongoDB + Express + React + Node Js

The only difference between MEAN and MERN is of Angular js and React js. These are used in front-end development and both are amazing. If you want to know the difference between React and Angular then you should read this article :
React vs Angular

Databases

Now Let's talk about the databases. There are 2 types of databases :
1.) Relational database
2.) NoSQL database
The relational databases are slow as compared to NoSQL databases but relational databases are secure as compared to NoSQL. MySQL is an example of a relational database whereas MongoDB is an example of a NoSQL database.
If you want to read more about relational and NoSQL databases then you should read this article :
NoSQL vs Relational database
But in a short explanation NoSQL databases are used to handle high traffic. For example, a website like Google, youtube, facebook etc. uses NoSQL databases. On the other hand, due to security reasons, relational database like MySQL is used for banking-related websites.

Tips

So at the end of this article, I hope you have a huge knowledge of web development. But now I want to make my personal tips and suggestions for you. If you are a complete beginner then I suggest you go with Python and Django (which is my personal favorite). Python is a powerful language. It is easy to learn.
Here are some reasons for learning Django :
Why Django

HTML, CSS, and Python are the fundamental requirements if you want to make a website using Django.

On the other hand, you should use WordPress if you don't want to learn any programming language. Everything is already cooked up for you on the WordPress platform.
At last, if you are learning web development for the job then javascript is a must. You must have to learn Javascript in this era if you want a job in the IT sector. You should start with MEAN or MERN whichever you like. But according to me first, you have to learn the basics of javascript. Just implement the basic knowledge and then try your hands with MEAN or MERN.