Web Development Prerequisites

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

But before you jump in and start coding, it’s a good idea to understand the basics of how the web works. Knowing all the key concepts and tools before you actually start learning them will help you get a clearer picture and save time later. 

It’s like learning the rules of a game before you play – it makes everything easier and more fun!

By the end, you’ll have a solid understanding of what goes on behind the scenes, even if you’re not yet ready to start building websites.

So, let's get started:

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

Picture this: you're sitting at home craving pizza, so you decide to order one online.

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.

What is a Web Browser: 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 

What is a Web Server - 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.

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

Here’s where DNS (Domain Name System) comes in. The DNS is like the internet’s phonebook. When you type a web address (e.g., www.pizzayum.com), your browser needs to know the IP address of the server that hosts the website. IP addresses are numerical addresses, but people find it easier to remember names like www.pizzayum.com.

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. It defines how requests and responses should be formatted and processed.

• HTTP: Used for basic requests and responses.
• HTTPS: A more secure version, using encryption (SSL/TLS), to ensure data integrity and privacy. This is especially important for websites involving sensitive data, like banking or e-commerce.

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 ask for the pizza menu, the server queries the database to retrieve the most up-to-date options.

Database Interaction:

• 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).

Example:

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.

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.

How Rendering Works:

• 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.

How the Browser Renders:

• DOM (Document Object Model): The browser creates a representation of the page in memory (called the DOM), using the HTML and CSS.
• Rendering Pipeline: The browser processes this data and draws it on your screen, showing the pizza menu, along with all the interactive elements.

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:

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 (Client-Side)
2. Back-End Development (Server-Side)

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

Front-end development deals with everything that users interact with directly. It’s what you see on a website: buttons, images, text, videos, and everything else that makes the website functional and aesthetically pleasing. 

Front-end developers use languages like HTML, CSS, and JavaScript to create the layout, design, and interactive features of a website.

Think of the front-end as the window display of a store. It’s what makes the store inviting and appealing, and it’s designed to attract customers. Similarly, the front-end of a website makes the user experience (UX) enjoyable.

Key Front-End Technologies:

HTML (HyperText Markup Language):

• This is the basic structure of any webpage. It tells the browser what to display (like headings, paragraphs, and images).
• HTML uses tags like <h1>, <p>, <a>, and <img> to define content.
• The browser reads HTML code and renders the content accordingly. It creates a structure from the tags, displaying text, images, and other elements as instructed.
• HTML defines the layout of the page, but doesn’t determine how elements look. It focuses on content, like which text is a heading, which is a paragraph, and where links are placed.

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.
• CSS uses selectors to target HTML elements (like p, .class, #id) and applies properties to them (like color, font-size, margin).
• CSS follows the "cascading" rule, meaning styles can be inherited or overridden. More specific selectors override general ones.
• CSS controls the layout of a page with techniques like flexbox, grid, positioning, and margins to arrange elements precisely.

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.
• JS is a scripting language, meaning it runs inside the browser. It’s used to manipulate HTML elements, modify CSS styles, and respond to user actions.
• JS listens for events like clicks, mouse movements, or keyboard input and responds by executing code (e.g., showing a popup when a button is clicked).
•  The browser’s JavaScript engine reads and executes JS code to perform tasks like changing content on the page, making calculations, or fetching data from a server.

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. The back-end is responsible for managing and storing data, processing requests, and ensuring everything runs smoothly.

Back-end developers work with servers, databases, and application logic to make sure that when you request information (like looking up a product on an e-commerce website), the correct data is retrieved and displayed quickly. They also make sure your data is securely stored and that everything on the server side is running efficiently.

Key Back-End Technologies:

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.

Full-stack developers need to understand both the user experience and how the server and databases work. They must know how to make a website not only look good and be interactive but also ensure that all the functionality runs smoothly and that data is processed correctly.

Key Tools in Web Development

Now that we know what front-end and back-end development involve, let’s take a quick look at some tools developers use to make the process more efficient and streamlined.

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.

How Does Web Development Work Together? (With an Example)

Let’s walk through how the front-end and back-end work together using an example: ordering a product from an online store.

1. User Interacts with the Front-End

You visit an online store (www.onlineshop.com) and see a product you like. You click "Add to Cart." This is you interacting with the front-end (what you see and click on).

2. Front-End Sends Requests to the Back-End

When you click "Add to Cart," the front-end sends a request to the back-end to check the product's details (like availability and price). It’s like telling a waiter, “I’d like to add this item to my order.”

3. Back-End Processes the Request

The server (back-end) checks the database to make sure the product is in stock and prepares the required data (product details, stock quantity, etc.).

4. Back-End Sends Data to the Front-End

Once the server processes the request, it sends the updated data back to the front-end, such as the product added to your cart and the updated total price.

5. User Sees the Result

The front-end then updates the page, showing your shopping cart with the new product and total price. You can now see the result of your action.

This is how the front-end and back-end work together to give you a smooth, interactive web experience!

Quick Recap:

Here's a quick recap of the key points covered in this article:

1. Web Basics: Understanding the fundamental workings of the web, like how browsers fetch data from servers, is essential before starting web development.
2. Web Browsers and Servers: Browsers serve as the user's gateway to the internet, while servers store website data and handle requests.
3. Rendering Web Pages: Browsers display web pages using HTML for structure, CSS for style, and JavaScript for interactivity.
4. Web Development: Involves front-end development (user interface) using HTML, CSS, and JavaScript, and back-end development (server operations) using technologies like databases and server-side languages.
5. Full-Stack Development: Combines front-end and back-end skills to build complete web applications.
6. Development Tools: Includes text editors, version control systems, and frameworks that facilitate efficient coding and collaboration.
7. Front-End and Back-End Interaction: Illustrated by the process of adding a product to a shopping cart, showing how the front-end communicates with the back-end to update the user interface based on server responses.

Wrapping Up:

In conclusion, web development is an exciting journey that combines creativity and technical skills to bring ideas to life on the internet. By understanding the basics of how the web works, from browsers and servers to front-end and back-end development, you're setting a strong foundation for your learning.

Whether you choose to focus on designing user-friendly interfaces, building powerful back-end systems, or mastering both as a full-stack developer, the possibilities are endless.

So, take your first step, explore, and start building – the web is waiting for your contributions!