Web Development [MERN]

Introduction :

This is the journey of my web development learning, where I can strengthen the concepts and build a project, so let's start with the fundamentals.

I have a weeks of planning to master the concepts that can strengthen my skills.

WEEK 1 Course Review:

Day 1: What is web development?
Day 2: Web hosting & IDE Setup
Day 3: Version Control & HTML Introduction
Day 4: HTML Fundamentals
Day 5: HTML Intermediate level
Day 6: HTML advance level
Day 7: First Mini Project & Practice

Other than that, we are starting our day-1 of web development , that is what is web development ?

What is web development?

Web development is a grooming technology, where each and every business is needed to present digitally online so they can use websites to make their presence known.

Big giants like Google, Amazon, and Microsoft are still hiring web developers to meet the growing demand for better, faster, and more intelligent digital platforms.

Problem Solving in Web development

Web development isn't about coding; it's about creating something interactive, functional, and engaging.

Problem-solving skills:

• Design APIs
• Building dynamic and responsive user interfaces
• Debugging and troubleshooting complex issues

Evolving technologies:

1. Low code / No code:create a website with no coding.
2. JavaScript frameworks: React.js, Vue.js, Angular remain dominant.

3.AI and Automation: AI and machine Learning are increasingly integrated into web development.
4.WebAssembly (Wasm): Enables high-performance code in web browsers, supporting multiple languages faster.

1. Serverless Computing: Developers can run code without managing servers, making cheaper and easier to scale.

Before moving onto the coding, let's learn how this website works and how the wonder happens when we click the link.

Let's take an example of ordering pizza:

1.Start Browsing: - First, we start type the website's link to order pizza (e.g., www.thepizzahut.com)
Your browser takes your request for www.thepizzahut.com and starts the process to fetch and display the required data to you.

1. 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:
Here's why DNS (Domain Name System) comes in. The DNS is like the internet's phonebook.
if you type the web address , the browser needs to know the hosted IP address of the webiste.
IP is a numerical address.
DNS translates the human friendly domain name (www.pizzayum.com) -> IP address (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.

Once the server address is known, it sends HTTP or HTTPS requests to the server. This request is like calling the pizza place to ask for their menu.

HTTP:

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

Database: - Database is used for storing/retrieving content.
It stores the menu, past orders, and prices like this.

when you visit the link of the website, the database retreive the information and send into the (HTML/Json) format.

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

Rendering the web Page

1.HTML to visuals: - Browser reads the HTML content to structure of the web page.

2.CSS styling: - The browser reads the CSS, which adds colors, layouts, fonts, and spacing.

3.Javascript magic: - This adds interactive elements , when javascript is loaded.these dynamic feautures works smoothly.

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.

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.

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 come into web development,

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.

The Two Main Parts of Web Development:

*Front-End and Back-End *

Front End:

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.

Back End:

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.

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.

Back-end development contains servers, databases, and Programming languages.

Full Stack Development:

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.

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

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!

Terminologies:

Understanding the core terminologies of web development is essential before starting with full stack development. Concepts like **API, JSON, XML, and HTML **form the foundation of how data is transferred, structured, and displayed in modern web applications.

API(Application Programming Interface):

An API (Application Programming Interface) is like a middleman between two software systems.
It allows them to talk to each other and exchange data in a structured way.
It is like an Invisible Connector that makes Apps work and connects your frontend and backend.

Imagine you are using a food delivery app. You enter your address, choose your food and place the order.

The app sends your order details to the restaurant using an API.
The restaurant confirms and updates delivery status — again, through the API.
You get real-time updates — thanks to APIs working in the background.

Why API are essential for Full stack developers:

Fetch Live Data in the Frontend: Use JavaScript to call APIs and bring in real-time data like user profiles, product listings or order status directly into your web app.

Build Powerful Backend APIs: As a full stack developer, you will create your own APIs that handle business logic, interact with databases, and send responses to the frontend.

Integrate External Services: Want to enable payments, maps, or social logins? You will connect with third-party APIs like Stripe, Google Maps, Firebase, or Auth0 to power your app with advanced functionality.

What is Json?

JSON (Javascript Object Notation) is the universal language for web data. Whenever your app talks to an API, the data sent and received needs to be in a format that both the frontend and backend understands.

JSON is a lightweight, human-readable way to structure data.

EG:
{
"name": "Sara",
"email": "[e-mail]",
"isPremiumUser": true
}

• Each piece of data is a key-value pair
• Text values are inside quotes " "
• Booleans (true/false) and numbers don’t need quotes
• Arrays and nested objects are also supported

How You will Use JSON in Full Stack Projects:

As a full-stack developer, JSON will be everywhere. Here is how:

Receive Data from APIs: Get user profiles, product lists, orders, etc., all in JSON format.
Send Data to the Backend: Forms, login info, and checkout details are often submitted as JSON.
Store Data in Frontend Apps: Keep session info, cart data, or UI settings in JSON inside local storage or state.

Concusion

We learned how the websites work. I'll explore how the page interacts with everything, and I'll come up with another topic. See you on the next blog.