The Layman's Guide to How Websites Work ft. Developer's Perspective

This guide is ideal for students pursuing degrees in BSCS, BSIT , and BSSE who aspire to embark on a career in web development. It provides a comprehensive breakdown of the web development process and highlights relevant computer science subjects that can greatly benefit their educational journey and future careers."his guide is best for the BSCS/BSIT/BSSE students who want to pursue web development as their career. A breakdown of web-flow and CS subjects that should help them.

Have you ever wondered how websites actually work? They seem like magic portals to a world of information and entertainment, but in reality, they follow a simple step-by-step process. In this guide, we'll demystify the workings of websites in plain, everyday language.

If you're a BSCS (Bachelor of Science in Computer Science) student, you'll find this guide particularly relevant, as it breaks down the website flow into concepts that directly relate to your studies and future career in web development.

How do the Websites Work?

Here is a breakdown of how websites actually function.

Step 1: Typing the Website Address

Imagine you want to visit a website, like "www.example.com." So, you open your web browser (like Chrome, Firefox, or Safari) and type this address in the address bar and hit "Enter." 

Step 2: Finding the Website 

Your browser doesn't know where "www.example.com" is. It's like asking for directions to a place you've never been. Here's where the internet's Address Book, known as DNS (Domain Name System), comes into play. It converts "www.example.com" into a unique number called an IP address that the internet understands. 

Step 3: Requesting the Webpage 

Now that your browser knows where to go, it sends a request to the website's computer (known as a server) using the IP address. Think of it as sending a letter to a friend asking for a copy of their favorite book. 

Developer's Perspective:

You can see the actual request sent to a server. All you need to do is to inspect the web page of your browser. Once the Devtool is opened, go to your network Tab. In the picture below, you can see that this particular blog sends 68 requests to the server. All of these requests get a response back from the server which in turn shows you the whole page you are currently visiting (See the next point). 

Subjects Relevant to BSCS/BSIT/BSSE Students:

• Networking DNS (Domain Name System)
• Client-Server Communication

    Requesting the Web Page

Step 4: Receiving the Webpage 

The website's server receives your request, finds the webpage you want, and sends it back to your browser. It's like your friend sending you the book you asked for. 

Developer's Perspective:

Click on any of the requests from earlier and you'll be directed to a new user interface where you'll see several tabs. Let's break down some of the tabs.

Headers

In the "Headers" tab, you can see all of the request items that you sent to the server. You wouldn't send the letter to your friend without the address and the letter itself, right? The same goes here, you send each request featuring a request (Uniform Resource Locator)URL, the request method, and more. If you are someone who's just a student of BSCS, BSIT, BSSE, or any other IT degree, then this knowledge is enough for you to excel in your studies. 

Subjects Relevant to BSCS Students: 

• Server-Side Technologies 
• HTTP Protocol

Headers Tab

Response

The response tab is where you'll see what you are actually getting back from the server. In the above example, you have reached the stage where you can see the book in your hand. In the picture below, you can see that the server returned the complete HTML code in your response which in turn generated the web page (See the next point). 

 Response Tab

Step 5: Understanding the Webpage 

The webpage arrives in a language called HTML (Hypertext Markup Language). It's like a recipe that tells your browser how to display the page, and where to put text, images, and links. 

Developer's Perspective:

• At this stage, we're dealing with the web page's structure and content, which is written in HTML (Hypertext Markup Language). 
• The principles learned in Programming Fundamentals (PF), such as variables, data types, and control structures, are crucial. 
• While PF might teach you C++, the concepts are transferable to web development. HTML is the foundation of webpages, acting like the skeleton of our cake. It's where we define headings, paragraphs, images, links, and more.

BSIT, BSCS, and BSSE Subjects Relevant to Front-End:

• Web Design
• HTML
• CSS
• JavaScript (You'll learn most of the programming concepts in C++, and C, but the same concepts can be applied to JavaScript)

Step 6: Making it Pretty 

HTML alone is like a plain cake. To make it look good, your browser uses CSS (Cascading Style Sheets). CSS is like the frosting and decoration on the cake, adding colors, fonts, and layouts to the webpage. 

Developer's Perspective:

• To make our HTML cake look appealing, we use CSS (Cascading Style Sheets). 
• The concepts of PF still apply, but now, it's more about organizing and styling elements. 
• Think of CSS as the frosting and decorations on our cake. 
• You'll use CSS to set colors, fonts, and margins, and create layouts that are visually pleasing.

Step 7: Adding Interactivity 

Websites aren't just static pictures; they can respond to your actions. This is where JavaScript comes in. It's like the magic ingredient that brings the webpage to life. JavaScript lets you click buttons, play games, and do all sorts of interactive things on the site. 

Developer's Perspective:

• JavaScript is the ingredient that brings our webpage to life with interactivity. 
• Concepts learned in PF, like variables and control structures, transition smoothly to JavaScript, which is like the magic sauce that makes our cake interactive. 
• With JavaScript, you can create buttons, forms, animations, and dynamic content.

Step 8: User Interaction 

As you click links, fill out forms, or play games, your browser may send new requests back to the server. It's like asking for more pages in the same book or telling your friend what parts of the story you like. 

Developer's Perspective:

• Here, users click links, submit forms, and interact with any site. 
• The skills learned in DSA and Algorithms come into play. 
• Understanding how to handle user input efficiently, sort data, and manage interactions is crucial.
• JavaScript is your tool for capturing user actions and communicating with the server without refreshing the entire page.

Step 9: Behind the Scenes 

Sometimes, websites need to store and retrieve data, like your login information or your high score in a game. They do this using databases and server-side code, which is like the secret recipe the chef uses to make the cake. 

Developer's Perspective:

• Behind the scenes, there's more to the web server than meets the eye. 
• Knowledge of PF and OOP is valuable when working on server-side code. 
• Languages like Python (with Django), Ruby (with Ruby on Rails), or C# (with ASP.NET) are common choices. 
• This code handles tasks like user authentication, data storage, and calculations. It's like the secret recipe for the cake filling.

BSIT, BSCS, and BSSE Subjects Relevant to BackEnd:

• Programming Fundamentals (PF)
• Data Structures and Algorithms (DSA)
• Object-Oriented Programming (OOP) 
• Server-Side Programming Languages (Python, Ruby, C#)
• Databases (MySQL, SQL, MSSQL)

Step 10: Displaying the Results 

Finally, your browser puts everything together – the HTML, CSS, JavaScript, and any new information from the server – to show you the complete webpage. It's like getting a fully decorated cake ready to be enjoyed. 

Developer's Perspective:

• The final step is putting everything together and showing it to the user. At this stage, databases come into play. 
• Understanding Database concepts, such as data modeling and SQL queries, is crucial. It's like the chef's recipe book where all the ingredients are stored. 
• The server retrieves data from the database and combines it with HTML, CSS, and JavaScript to create a complete, dynamic webpage.

Real-Life Hypothetical Scenario (Must Read for Students)

When a user visits a website, their browser sends a request to the website's server. The server then processes the request and sends back a response to the browser. The response typically includes HTML, CSS, and JavaScript code. The browser then interprets this code and displays the web page to the user.

Front-end development focuses on the user interface and user experience of a website. Front-end developers use HTML, CSS, and JavaScript to create web pages that are visually appealing and easy to use.

Back-end development focuses on the server-side logic of a website. Back-end developers use server-side programming languages and databases to store and retrieve data, process user requests, and generate dynamic content.

Database development focuses on the design, development, and maintenance of databases. Database developers use database concepts and SQL to create and manage databases that can store and retrieve data efficiently.

All three of these areas are important for the development of modern websites. Front-end developers create the user interface and user experience, back-end developers handle the server-side logic, and database developers develop and maintain the databases that store data.

Example:

Here is a simplified example of how the front-end, back-end, and database development work together to create a website:

• A user visits the website and clicks on a button. 
• The front-end JavaScript code sends a request to the back-end server. 
• The back-end server retrieves the user's data from the database. 
• The back-end server processes the user's request and generates a response. 
• The back-end server sends the response back to the front-end code. 
• The front-end JavaScript code updates the web page to display the results of the user's request.

Final Thoughts 

Websites are like well-orchestrated recipes with many ingredients. The next time you visit a website, remember that it's the result of a series of steps, just like baking a delicious cake. The magic is in how all these parts work together to give you the web experience you love.