The Internet is full of websites, moreover, we can say that everything on the internet is a web application. But have you ever thought of making one? Let's see in detail the components of a website and how to build one.
For most of you developers who are reading this article, you might have already might have tried making simple web applications and I bet it is a tedious job. But this article is mainly at a beginner level, where learners just want to know how a website works and make one. This will be 2 part article, in this article, we shall be seeing the functionalities and all the theories of it. In the next article, we will be getting hands-on particles by building and deploying a full-stack application.
How does a website work?
You need to question yourself what is the use of it, before learning anything, and how it works. So how does a website works, and what solutions does it provide?
In a naïve way, you can tell that a website is a collection of documents and pages waiting for a user to make a request and send relevant information to him. Consider a simple example of a Wiki page, if you search for world war 1 in Wikipedia, you get a document having all the information about WWI, the same goes for other websites like YouTube, Facebook, Instagram etc.
But What makes a website unique? and how do website looks so different from each other?
The technologies behind websites making so different from other websites are based on 2 things.
First the niche or main idea of the website, Second the technologies they are using to develop the website. Niche or Idea is the purpose or cause for which you're developing the website. In the case of Wikipedia, providing the information is a cause. In the case of Facebook, providing a social media platform. Every website has been developed by taking an idea and implementing it, thinking other users will like the idea and try to use it.
Second the technologies, In a broader view we can say that a website consists of 3 main parts. HTML, CSS, JavaScript. HTML is like the skeleton of the webpage. All the information is written using this language. Almost Every website literally 99% of sites uses HTML. Next up is CSS, you cannot just show information without adding creativity to it, right? CSS will help in this aspect, it stands for Cascading Style Sheets. It specifies how different components of the HTML need to look by changing different attributes like colour, margins, background, images, borders etc. Next up we need a Programming language to add functionality to the website.
There are various technologies we can use for building a website. JavaScript was mainly used for adding functionality in the early stages. Moreover, JavaScript can only run in a chrome web engine and is not a programming language like python or C. Later on, the development of Node.js enabled JavaScript to evolve as a programming language. There are other different languages which can be used as a backend for a website. Like Python, Java, Golang, PHP, Rust etc.
Wait But what does Backend Mean in web development?
Most of you who are new to web development might have heard terms like frontend, backend or full-stack products. These are some technical terms used to describe the role of a developer. In frontend development, we are concerned about the front or customer side of the website, Which is nothing but the UI-UX. UI-UX? what is that?
UI stands for User Interface and UX stands for User Experience. The Experience and interface the website has with its customers or users matter while developing one, as in the long run it is the main reason for user Retention. A good Design will always attract users and increase the page time of the website. The frontend developers are good at CSS and Styling websites, they are capable of designing unique wireframes for websites.
We talked about the user's side but what about the functionalities and working of the website? This is where the backend developer comes into the picture. All the database handling and data handling is done in the backend. The backend interacts with the front using an API which stands for Application Program Interface. This can be understood with a simple analogy, consider going to a restaurant, so you the customer are the user who is using the website. The waiter which asks you for the orders is the same as the API, which just connects you with the chefs. The Chefs are the main component of the restaurant that makes the dishes, as backend developers in the case of the website.
There is a popular Architecture for understanding a website which is MVC Architecture where M stands for Model, V for View, and C for the controller. The Model is nothing but the data which you work on, the data which you show to the user or perform operations on it. The view focuses on the outer look of the website, all the UI-UX functionalities come in this category. Controller stands for the functionalities of the website, how you are going to implement the code to perform operations on the model and show in the view.
In the next article let's get a hands-on comparison of different programming languages and their website-building stacks. Also, let's see how to build a basic website and deploy it on the internet.