Web Development Prerequisites

If you’re thinking about starting web development, you’re about to begin an exciting journey!

Before you dive in and start coding, it helps to understand the basics of how the web works. Getting familiar with the core concepts and tools early on gives you a clearer picture and saves time later.

Ever wondered what actually happens when you click a link or type a website address into your browser?

Imagine this: you're sitting at home craving pizza, so you open an app or website to place an order.

1. Starting Your Web Adventure: The Browser

You open your favorite web browser, let's say Chrome, and type in the web address of your beloved pizza place, like www.pizzayum.com. Your browser, which is basically your gateway to the web, is about to get busy.

Imagine a web browser as your personal butler. Whenever you need something from the internet, whether it’s the latest news or a new pair of shoes, your browser fetches it for you. Popular browsers include Google Chrome, Mozilla Firefox, and Safari.

Your browser takes your request for www.pizzayum.com and starts the process to fetch and display the required data to you. 

2. Web Server 

A web server refers to both the hardware and software responsible for storing and delivering website data. It acts as the central system that hosts website files and responds to requests made by browsers.

This is a computer that holds all the data and files for websites. When you type in a web address, your browser sends a request to the server that says, "Hey, can you show me this website?" The server replies, "Sure thing," and sends back the information your browser needs to display the page.

Where as an HTTP server like Apache or Nginx server is the software that processes HTTP/HTTPS requests. It manages communication between the browser and the server, ensuring that the correct content is delivered over the HTTP protocol.

Now, let’s get to know how servers respond.

• Receiving the Request: The server receives the HTTP request from your browser.
• Processing: It processes the request, fetches the right web page, or performs any necessary actions (like checking the latest deals).
• Response: The server then sends the correct HTML files back to your browser. Think of this as the server handing over the pizza menu to you.

URL Parsing

A URL (Uniform Resource Locator) is the address used to access resources on the web, such as websites, images, or files. Your browser breaks down the URL (www.pizzayum.com) into components:

• Protocol: https:// or http://
• Domain: pizzayum.com
• Path: /menu (optional part)
• Query parameters: ?id=123 (optional)

DNS Lookup

The DNS translates the human-friendly domain name (www.pizzayum.com) into an IP address (for example, 192.0.2.1), which tells your browser the exact location of the server. Without DNS, you would need to remember and type in numeric IP addresses instead of domain names. Once the browser gets the IP address, it’s ready to connect to the server and continue the process.

HTTP Request

Once the browser knows the server's address, it sends an HTTP (Hypertext Transfer Protocol) or HTTPS (Secure version) request to the server. This request is like calling the pizza place to ask for their menu.

3. Web Protocols: Communication Between Browser and Server

Now that we know the request is sent, we need to understand the protocols that make all this communication possible.

HTTP/HTTPS (Hypertext Transfer Protocol / Secure)

HTTP is the protocol that facilitates the communication between your browser and the web server.

• HTTP: Used for basic requests and responses.
• HTTPS: A more secure version, using encryption (SSL/TLS), to ensure data integrity and privacy.

TCP/IP (Transmission Control Protocol/Internet Protocol)

HTTP runs on top of TCP/IP, which is the protocol that ensures data is correctly sent and received over the internet. It ensures that all the data you request from a website is correctly reassembled and delivered to you.

TLS/SSL (Transport Layer Security/Secure Sockets Layer)

When using HTTPS, SSL/TLS ensures that the data exchanged between the browser and server is encrypted, protecting you from hackers trying to intercept your data.

4. Database: Storing and Retrieving Content

Many websites, including the pizza place’s website, rely on databases to store dynamic content. These databases hold everything from the pizza menu, your past orders, and even customer reviews. Let’s see how this fits into the process:

What is a Database- A database is like a digital filing cabinet where information is stored. Web servers interact with databases to fetch, insert, update, or delete data, depending on the website's needs.

For instance, when you visit www.pizzayum.com/menu, the server might query a database to pull up all the pizza options, prices, and descriptions. It then sends that data (usually in the form of HTML and JSON) to your browser to render the page

• SQL (Structured Query Language): The server uses SQL to talk to the database, requesting specific pieces of data.
• NoSQL Databases: Some websites use non-relational databases (like MongoDB) to store data in a more flexible, unstructured format. This is often used for larger, more complex applications (like social networks or large e-commerce platforms).

5. Back to Your Screen: Rendering the Web Page

With the data now in hand (HTML, CSS, images, etc.), the browser’s job is to render the page and display it for you.

• HTML to Visuals: The browser reads the HTML (Hypertext Markup Language) to structure the content of the page. This includes headers, paragraphs, and links.
• CSS Styling: The browser then reads CSS (Cascading Style Sheets), which adds color, layout, fonts, and spacing.
• JavaScript Magic: If the page has interactive elements (like selecting pizza toppings or checking out), JavaScript is loaded. It makes sure these dynamic features work smoothly.

6. Web Security: Protecting You on the Internet

Security is essential when interacting with websites. Here are the key elements of web security:

Encryption (SSL/TLS)

As mentioned earlier, SSL/TLS encrypts the data between your browser and the web server. This ensures that any information (like credit card details or passwords) you send is protected from hackers.

Authentication and Authorization

• Authentication: This is the process of proving who you are (e.g., logging into your account with a username and password).
• Authorization: Once authenticated, the server checks what you're allowed to access (e.g., viewing your order history or changing your delivery address).

Cookies and Sessions

Cookies are small pieces of data stored by your browser that can help remember your login details or keep track of items in your cart. Session management ensures that when you’re logged in, the server knows who you are as you interact with the website.

Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF)

These are common security threats:

• XSS allows attackers to inject malicious scripts into web pages, which can steal sensitive information.
• CSRF tricks users into making unwanted requests, like changing account settings without their consent.

Web developers use various security measures to protect against these, such as validating inputs, using HTTP headers, and enabling Content Security Policies (CSP).

7. The Full Process in Action:

Below is the full process of how a webpage loads from start to finish:

1. You type www.pizzayum.com into the browser.
2. DNS translates the URL to an IP address.
3. HTTP(S) request is sent to the server.
4. The server checks its database for the requested data (like the pizza menu).
5. The server sends the HTML, CSS, and JavaScript back to the browser.
6. Your browser uses HTML, CSS, and JavaScript to render the page and display the pizza menu.
7. If applicable, SSL/TLS encrypts your communication, and cookies/sessions keep you logged in for future visits.
8. Your secure, interactive pizza menu is ready to explore!

Now, coming to the development perspective…!!

What is Web Development?

Web development is the process of building and maintaining websites or web applications. It's like constructing a building, but instead of bricks and mortar, you're using code. Web developers use various programming languages, tools, and frameworks to create everything from simple static websites to complex, dynamic web applications.

When you visit a website like Amazon or Facebook, you're interacting with a web application that's been developed by a team of developers. Behind that user-friendly interface, there’s a lot of complex code working together to deliver the experience you see and use.

The Two Main Parts of Web Development: Front-End and Back-End

In web development, we generally talk about two major parts:

1. Front-End Development: The "Face" of the Website

Front-end development focuses on everything users see and interact with on a website. It includes the visual layout, design elements, and interactive features that create a smooth user experience.

• HTML (HyperText Markup Language):HTML is used to create the basic structure of any webpage. It tells the browser what to display (like headings, paragraphs, and images).
• CSS (Cascading Style Sheets):CSS makes your webpage look good. It controls the style, layout, and design of your HTML elements. For example, it controls the color, fonts, and positioning of content on the page.
• JavaScript:JavaScript adds interactivity to a webpage. It lets you create dynamic content like pop-up messages, interactive forms, image sliders, and even games. Without JavaScript, websites would be static and uninteresting.

Real-World Example:

Imagine you’re shopping online. When you click on a product image, it zooms in. When you click on the "Add to Cart" button, the cart icon updates with the number of items inside. All of this interactivity is thanks to front-end development.

2. Back-End Development: The Engine Under the Hood

Back-end development is like the engine of a car. It's not something users directly see or interact with, but without it, nothing would work. It handles the behind-the-scenes processes that power websites, ensure smooth performance, and keep data flowing securely and efficiently.

• Retrieves and sends the correct data between the server and the user.
• Stores information securely and keeps server operations running smoothly.

Back-End Technologies

Following are the basic technologies used to build the back end of a website:

• Server: A server is where your website lives. It’s a powerful computer that stores all the files, data, and information necessary for your website to function.
• Databases: Websites often need to store data like user profiles, blog posts, or product inventories. Databases like MySQL, MongoDB, and PostgreSQL keep all this information organized and accessible.
• Programming Languages: Back-end developers use programming languages like PHP, Python, Ruby, and Java to create the logic that powers the website. For example, when you log in to a website, the back-end code checks your credentials and lets you in if everything matches.

Real-World Example:

Let’s say you’re logging into your online bank account. When you enter your username and password, the back-end system checks if your information matches what’s stored in the database. If everything checks out, you’re granted access. All of this happens behind the scenes, thanks to back-end development.

Full-Stack Development: Combining Both Worlds

If front-end is the face of a website and back-end is the engine, full-stack development is the person who knows how to build both. Full-stack developers are skilled in both front-end and back-end development and can create complete web applications on their own.

Tools in Web Development

Text Editors: Developers write code in text editors. Some popular ones include:

• VS Code (Visual Studio Code): A powerful, user-friendly editor with a lot of features to help developers.
• Sublime Text: A lightweight text editor known for its speed and simplicity.

Version Control: As a developer, you’ll often work with teams, and it’s crucial to keep track of all changes made to a project. This is where version control comes in.

• Git: A tool that helps you track changes in your code and collaborate with others. GitHub is a platform where developers store and share their code.

Web Browsers:Browsers like Chrome, Firefox, or Safari are where you test and preview your websites. Developers also use developer tools in browsers to debug code and check for errors.

Frameworks and Libraries: These are pre-written pieces of code that help developers build websites faster. For example:

• React: A JavaScript library for building user interfaces.
• Bootstrap: A CSS framework that helps you create responsive, mobile-friendly websites.
• Node.js: A JavaScript runtime for building back-end applications.