Forem: PRAKASH B

Day - 6 of Learning Web Development

PRAKASH B — Tue, 14 Oct 2025 06:19:57 +0000

Introduction

Hey Guys!! Welcome to my 5th day of learning web development. In this blog we are going to see about the Introduction of HTML , for the last video we saw what is meant by HTML. and Where it is used and its importance.

HTML DOCTYPE Declaration

It is an instruction that appears at the beginning of an HTML document, before the tag.

It is a primary role to tell the web browser which version of the HTML page is written in and ensures that the browser renders the content correctly.

It is not a HTML tag; rather, it is a special tag that specifies how the browser should interpret the html

It always recommends use at the top of the HTML file for HTML5

<!DOCTYPE html>

This is how the declaration looks.

It doesn't tell directly to the web browser what version is being used, but rather it tells the browser to use a specific rendering mode.

there are two main modes

Standards Mode
Quirks Mode

EXAMPLE:

<!DOCTYPE html> <html> <body> <p>welcome to my website</p> </body> </html>

Basics

HTML defines the layout of the webpage using tags and elements, allowing for the display of text, images, links, and multimedia content.

HTML is used 90% of the web page today

Basic Document structure

HTML follows some structure it begins with a document type declaration, setting up the foundation page.

it Introduces basic tags like `head , body, title` although it is not mandatory, it is a good convention to start the document with the below-mentioned tag.

html tag - encloses all the html document
head tag - contains header information about the web page
title tag - used within head tag to define the title of the HTML document.
body tag - visible the content of the web page such as text, images, audio, videos and links.

HTML Headings

HTML heading tags are used to create headings for the content of the web page. These tags are typically placed inside the body tag.

These are mainly six tags that are offered h1 to h6 where each heading differs in font size.

Paragraph Tag

The paragraph tag is used to write a paragraph in the web page. It is mainly return inside of the body tag

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML</title> </head> <body> <p> HTML stands for HyperText Markup Language.<br> It is used to design web pages using a markup language.<br>HTML is a combination of Hypertext and Markup language.<br>Hypertext defines the link between web pages.<br>A markup language is used to define the text document within the tag which defines the structure of web pages. </p> </body> </html>

Break tag

The break tag is used to insert a single line of break in the HTML code

It doesn't require end tag

Horizontal Line

A Horizontal line is used to divide the page into sections by creating a horizontal line that spans from the left to the right side of the web page.

This is an empty tag and it doesn't require any empty tag.

HTML Comments

HTML comments are annotations in your code that are not displayed in your browser.

They are enclosed within tags that are primarily used for documentation, explanation and temporarily code unavailable.

Syntax

Single-line Comment 
Multiline Comment

EXAPMLE

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML</title> </head> <body>  <h1>Welcome to GeeksforGeeks</h1>  <p>Learn HTML, CSS, and JavaScript here.</p> </body> </html>

HTML Images

This tag is used to insert images in your HTML code.

img tag is used here, to insert the image and the source of the image should specified with the src attribute.

img src="source of image".

View HTML Code

While checking the web page, You might want to see the HTML code behind it, you can see it by using the entire code or a specific element.

View the source of the entire page

Press Ctrl+U or Right-click on the page and select the "View page Source" Option.

Inspect the HTML Element on a page

To check the specified element, you can use right-click on the page and select the "Inspect" option.

HTML Tables

HTML tables are used to organize the data in a grid format with rows and columns.they are created by using

the element with tr,td,th

tr - rows,

th- table headers,

td - table data.

Styling CSS in HTML table

While adding CSS in html, such as adding borders, background colors, text alignments, here are some basic styling as follows:

1.Adding Border:
Adding a border in the code is in a set structure; you have to mention it in the code. if you failed to enter, it displays the output without a border.

table, th, td {border: 1px solid black;}

2.Adding cell padding:
It specifies the cell content between the cell and the borders. if we don't specify a padding, the table cells will be displayed without padding.

th, td {padding: 20px;}

3.Adding left and right alignment in an HTML table:
The table headings are bold and centered by default. to align the table headings, we must use the CSS property.

th{text-align:left}

4.Adding border spacing in an HTML table:
Border spacing specifies the space between the cells. To set the border spacing for a table, we must use the CSS border-spacing property.

table{border-spacing:5px;}

5.Adding cells that span many columns in HTML tables:
To make the cell span more than one column, we must use the colspan attribute.

6.Adding cells that span many rows in HTML tables

To make a cell span more than one row, we must use the rowspan attribute.

7.Adding a captions in an HTML table

To add a caption in a table, we must use the "caption" tag.

<table style="width:100%"><caption>DETAILS</caption>

8.Adding a background color to the table

a color can be added as a background in an HTML table using the "background-color" option.

table#t01 {width: 100%; background-color: #f2f2d1;}

9.Creating nested tables

Nested tables simply means creating a table inside another table.Nested table can lead to the complex table layouts, which are visually interesting.

HTML Lists

HTML is allowing you to organize data on web pages into an ordered or unstructured format to make the information easier to read and visually appealing.

Types of Lists

Unordered List
Ordered List
Description list

Unordered List

This list items do not need any specific order. The list items are typically marked with bullets.

Ordered List

This particular list items are used when the order is important. Each item in an ordered list is typically marked with number of letters.

Description List

this letters are used to contain terms and their corresponding descriptions

Description List

Forms

Form defined by using `

` tag , which are used for collecting information in web pages.

They are incoperating varieties of inputs like text fields , numeric fields,emails, passwords, checkboxes, radio buttons and submit buttons

Forms

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML</title> </head> <body> <h2>HTML Forms</h2> <form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> </body>

How to get a source code of any website

Using Inspect Element

you can view the code by using inspect.
1.Go to the website you want to see the code.
2.Right Click -> Click "Inspect"
3.You will see the code.

Using page source

1.Right Click -> Click "View page source"
2.or use CTRL + U

Day - 5 of Learning Web development

PRAKASH B — Thu, 09 Oct 2025 07:54:31 +0000

Introduction

In this blog, we are entering the core concepts of web development. As a base, we started from the front-end language

HTML5

HTML

HTML-Hyper Text Markup Language

HTML5 is the fifth version of hyper text markup language that is used to structure webpages.

It defines how the content of the webpage should be structured or displayed.

Key Points

Multimedia Support - Embeds audio and video files without plugins. New Forms Controls - includes input types such as data and email. Web Storage - Store data offline for better performance. Semantic Elements - using tags like and for better performance. Improved performance - Faster and more efficient, especially on mobile.

Let's see a simple program to create Hello World!:

1.To create a HTML code,
2.Open Notepad or use VS Code
3.Write the HTML code
4.Save the file in .html extension.

[

HTML5 code example

Simple HTML Page

Hello World

This is my website

](https://onecompiler.com/html/43z4gegcf)

It defines a simple HTML5 page with DOCTYPE, , , and tags.
Includes a character set (UTF-8) and viewport settings for mobile responsiveness.
Contains a header, main content, and footer with basic text content.

Evolution of HTML

HTML has gone through several changes to keep growing to meet the needs of web development. These changes have helped improve webdesign, functionality, and accessibility.

Early web development /h1>

In the early days of the web, major creators like Microsoft Internet Explorer (IE), and Mosaic Netscape introduced browser-specific elements to improve the appearance of web pages for their browsers.

They add an extra HTML element to the web page

But the problem is that the site can run only in Microsoft Internet Explorer, but not in Netscape.

HTML 3.2

The World wide Consortium(W3C) recommended the creation of HTML 3.2 in 1996.

The standard includes company-used HTML elements and introduced extensions like the center tag and font tag elements, to control the appearance

But it leads to "browser war" IE vs Mosaic, Netscape

HTML 4.0 (1998) & HTML 4.1 (1999)

HTML 4.0 was released in 1998, and it was updated to 4.1 in 1999.

This is the major update that happens while changing. It contains the HTML control structure (text, heading) and separates how to do the presentation.

Advantages

-Multimedia Support: Native audio and video tags for easier media embedding. - Better Performance: Faster loading times with fewer dependencies. - Cross-Platform: Works across all major browsers and mobile devices. - Geolocation: Access users’ location for location-based features. - Offline Capability: Works offline with Web Storage and AppCache. - Simplified Code: New semantic tags for cleaner, more readable code. - Mobile-Friendly: Optimized for a smoother mobile experience.

Disadvantages

- Browser Inconsistencies: Older browsers may not fully support HTML5 features. - Mobile Compatibility: Some older mobile devices may struggle with certain HTML5 features. - Security Risk: New features like Web Storage can potentially expose user data if not handled properly. - Complexity: Advanced features like WebSockets and APIs can be challenging for beginners. - Lack of Support in Older Internet Explorer Versions: Some older versions of IE (like IE 8 and below) do not support HTML5 at all.

Conclusion

HTML is a skeleton of the webpage, which defines how the website is structured. In this blog, we will see all the basics, tags, and how the structure of the HTML code should be ,for the next blog we will see the fundamentals.

            SEE YOU ON THE NEXT BLOG!! THANK YOU....

Day - 4 of Learning Web development

PRAKASH B — Thu, 09 Oct 2025 05:39:10 +0000

Introduction

In this blog, we are going to see about the

Git

What is mean by Git?, Where it is used for and how it will be used will cover all the topics.

Git

Git is a storage space (repository) where your project files and their complete history of changes are kept. It allows you to manage and track, and collaborate on the code at a time.

Types of Git Repository

Local Repository
Remote Repository

Local Repository

It stores on your computer
You can make changes, commit them and review your project history without needing any internet connection.
EG : it is stored in .git file in your local computer

Remote Repository

It can be hosted on a server like GitHub, GitLab or Bitbucket.
It enables multiple developers to collaborate on the same project.
Supports operations like push, pull, fetch to synchronize changes with the local repository.

Initialization

Before you can start tracking your project files, it is mandatory to initialize the repository in your project folder.

git init

then add the files,

git add file_name or git add . -> Adding the current repository to the staging area.

Add specific files in the staging area.

git add--all

to add the files with the extension.txt in the current directory

git add *.txt

To add all text files with the .txt extension of the docs directory to the staging area.
git add docs/*.txt

to add a text files of a particular directory.
git add docs/

to add a particular directory to the staging area.
git add "*.txt"

Moving Stag area to commit area in a git repository

we have to give the commit command git commit .
commiting process is done in the staging area on the files where added to the git add command.

git commit -m "Add existing file"

Cloning and Synchronizing with remote repositories

Git allow you to clone (create copy) the project files in your local machine , you can edit and make changes in the project files.

To sync with others, Git provides commands to synchronize local repositories with remote ones.

Push
Pull

Push

Push command is used to push all the commits of the current repository to the tracked remote repository. This can be push your repository to multiple repositories at once.

Pull

This command updates your local repository by fetching and merging challenges from the remote repository.

It ensures your copy stays synchronized when others have made updates

Additional Git Commands

Git Status

It is used to check the status of whether the files are committed or not in the GitHub repository

git status

Git Log

It is used to track all the changes made in the repository

If you want to hide any file while uploading online, then create a .gitignore file and write all the files that you want to ignore.

Git Merge

It merges two repositories without losing data. It merges the specified repository into the current repository. `git merge `

Git Checkout

It is used to rollback to the previous version of the project which was committed earlier

Conclusion

Git is a major role player for creating and managing projects , we can clone, commit, update the project files and it can only be used the above commands.

             See you on the next blog! Thank You

Day - 3 of Learning Web Development

PRAKASH B — Mon, 22 Sep 2025 05:38:04 +0000

Introduction

In this blog, we will see what is meant by version control and why version control is used in web development.

Version Control

1. Version control is a system that helps track and manage changes to a project's codebase over time.
2. It allows multiple developers to work on the same project simultaneously without conflicts.
3. It maintains a history of all changes and enables easy rollback to previous versions if needed.

Uses

Collaboration
Track History
Experimentation
Automatic backup
Accountability

Git

Git is a distributed version control that helps developers change their source code.

It allows you to work efficiently in teams by maintaining project history.

Git is a cloud-based platform that hosts Git repositories.

It provides tools for managing, sharing, and reviewing code in a collaborative environment.

Feautures of Git

Distributed Version Control
Efficient Branching and Merging
Speed and Performance
Open Source and Reliable

Version Control with Git

Example: if you are writing a research paper, how can you manage the work?

Version 1: Write the introduction and save it as "paper_v1.doc."
Version 2: You add new sections and fix some typos, then save "paper_v2.doc".
Version 3:Your team revises the conclusion, then saves "paper_v3_.doc".

This is same as in Git,
Each time you commit a change, Git takes a snap of the current state of your files.

These snapshots are stored in versions. you can go back to any one of them.

Multiple people can work on the same project and merge it finally.

Conclusion

Today we are covered about what is mean by version control , why it is used for , what is the purpose of the version control will grind it depply in the upcoming topics, See you on the next blog
Thank you.

Day - 2 of Learning Web Development

PRAKASH B — Thu, 18 Sep 2025 12:47:59 +0000

Introduction :

This is day 2 of mastering the web development concepts. In this blog we are going to about the

Web Hosting and Installation of IDEs

Content Management System

A Content Management System (CMS) helps a company easily create, edit, and maintain websites, blogs, or landing pages without the need of code every time.

Why Companies Use CMS:

Easy website updates
Saves time and Cost
Multiple Users
SEO and Plugins

Wordpress

WordPress is the most widely used CMS in the world.
It is a versatile tool used for writing blogs, building websites, and creating business pages and even e-commerce platforms.
It has nearly 43% of websites globally.
It launched a blogging platform in 2003.

Popular Plugins

Yoast SEO : Improve SEO Performance
WooCommerce: Convert website into online store
Elementor: A drag-and-drop builder that builds code.
WP Rocket: Improve performance optimization.

Payload CMS

With a payload, developers can take full control of the front end and can use their preferred technologies to display the content, These are faster, more flexible, and better suited for building advanced, scalable websites and applications.

Popular Plugins

Payload Visual Editor: offering an easy-to-use interface for content creators to manage and modify content without diving into code.
Payload AI: This plugin integrates artificial intelligence for content creation and management.
payload-auth-plugin: Designed to simplify authentication.

Web Hosting

Web hosting is what makes your website visible on the internet. It stores your website’s files on special computers called servers and delivers them to visitors when they type in your domain name.

When someone enters your domain (like ⁣www.geeksforgeeks.org), the server sends the website files to their browser, and it allows websites to be online 24/7 by storing files (images, text, and code) on servers.

The most important thing is stability— a server needs to stay online 24/7 so that we can use it for the Linux operating system.

To host a website, here are some essential steps to follow:

Pick a unique website name -> address for your website.
Find the service provider -> allocate space on the server.
Then configure the server; once it is done, upload the website files, and set up necessary databases.
To make your server accessible, configure the DNS (Domain Name System) to point your domain to the server IP.
Then the website is live.
Last but not least, maintenance.

How DNS Works

You simply type the domain name.
Local Cache Check—if you already visit the website.
DNS Resolver Query: If the IP address isn’t in the local cache, your computer sends a request to a DNS resolver. The resolver is typically provided by your Internet Service Provider (ISP) or your network settings.
Root DNS Server: The resolver sends the request to a root DNS server. The root server doesn’t know the exact IP address for www.geeksforgeeks.org but knows which Top-Level Domain (TLD) server to query based on the domain’s extension (e.g., .org).
TLD Server: The TLD server for .org directs the resolver to the authoritative DNS server for geeksforgeeks.org.
Authoritative DNS Server: This server holds the actual DNS records for geeksforgeeks.org, including the IP address of the website’s server. It sends this IP address back to the resolver.
Final Response: The DNS resolver sends the IP address to your computer, allowing it to connect to the website’s server and load the page.

Types of Domains

Generic Domain—Top-level domain recognized across the world(.com, .org, .edu)
Country Domain—Represents specific countries (.in, .uk, .us)
Inverse Domain—Used for reverse DNS lookups, these domains help map IP addresses back to domain names.

DNS Lookup

DNS translates human-readable into machine-readable domain.

DNS lookup starts when a user types a domain name into their browser.
The query goes through a series of servers: the DNS resolver, Root server, TLD server and authoritative server.
Each server plays a role in finding the correct IP address for the domain.
Once the IP address is found, the browser connects to the website’s server and loads the page.

Types of DNS Queries

Recursive query—if DNS couldn't find the record, it ask this query to show some error message or the requested source record.

Iterative Query—Needs the best answer from the DNS server.

Non-recursive query -DNS resolver queries a DNS server for some record that has access to it because of the record that exists in its cache.

Installing IDEs
How to Download Vs code

Conclusion

Today we explore web hosting, the domain name system, how it works, and installation. We will see you on the other topic on the next blog.

Web Development [MERN]

PRAKASH B — Tue, 16 Sep 2025 12:14:29 +0000

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:

Low code / No code:create a website with no coding.
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.

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.

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.

You type www.pizzayum.com into the browser.
DNS translates the URL to an IP address.
HTTP(S) request is sent to the server.
The server checks its database for the requested data (like the pizza menu).
The server sends the HTML, CSS, and JavaScript back to the browser.
Your browser uses HTML, CSS, and JavaScript to render the page and display the pizza menu.
If applicable, SSL/TLS encrypts your communication, and cookies/sessions keep you logged in for future visits.
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": "sara@example.com",
"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.