Scribd
Upload
13 views30 pages

Unit 1 Full Stack

The document provides a comprehensive overview of HTTP request and response messages, detailing their structure, components, and methods such as GET, POST, PUT, and DELETE. It explains the roles of web clients and servers in the client-server architecture, including how they communicate through the request-response cycle. Additionally, it includes an example of an HTML5 form for user feedback and discusses HTTP as a stateless protocol, along with methods for state management.

Uploaded by

kaishwarya978
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views30 pages

Unit 1 Full Stack

The document provides a comprehensive overview of HTTP request and response messages, detailing their structure, components, and methods such as GET, POST, PUT, and DELETE. It explains the roles of web clients and servers in the client-server architecture, including how they communicate through the request-response cycle. Additionally, it includes an example of an HTML5 form for user feedback and discusses HTTP as a stateless protocol, along with methods for state management.

Uploaded by

kaishwarya978
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

16 MARKS

1. **Structure and Components of HTTP Request and Response


Messages**
- **HTTP Request:**
A message from a client (like a browser) to a server asking for data or resources
(e.g., a web page).
- **Request Line:**
- ThIs line includes the HTTP method, the URL path of the resource, and the
HTTP version.
- Example: `GET /index.html HTTP/1.1`
- `GET` Is the method used to request data from the server.
- `/index.html` Is the path to the resource on the server.
- `HTTP/1.1` indicates the version of HTTP used for the request.
- **Headers:**
- Headers provide additional information about the request. They are key-value
pairs sent after the request line.
- Common headers include:
- `Host:` Specifies the domain name of the server (e.g., `Host:
www.example.com`), which Is essential for virtual hosting.
- `User-Agent:` Provides details about the client making the request, such as the
browser or application (e.g., `User-Agent: Mozilla/5.0`).
- `Accept:` LIsts the media types the client can handle (e.g., `Accept:
text/html`), guiding the server on the content format to return.
- **Body:**
- The body of the request contains data sent to the server, used mainly in POST
and PUT requests.
- Example: For a POST request to submit form data, the body might include
`name=JohnDoe&[email protected]`.
- **HTTP Response:**
The server's reply to the request, containing the requested data or an error
message.

- **Status Line:**
- ThIs line includes the HTTP version, a status code, and a status message.
- Example: `HTTP/1.1 200 OK`
- `HTTP/1.1` Is the version of HTTP used for the response.
- `200` Is the status code indicating a successful request.
- `OK` Is the status message that provides a human-readable explanation of the
status code.
- **Headers:**
- Response headers give information about the response and how to handle it.
- Common headers include:
- `Content-Type:` Describes the media type of the response body (e.g.,
`Content-Type: text/html`), indicating how the client should interpret the
content.
- `Content-Length:` Specifies the size of the response body in bytes (e.g.,
`Content-Length: 1234`), helping the client to process the body correctly.
- `Set-Cookie:` Sends cookies from the server to the client (e.g., `Set-Cookie:
sessionId=abc123`), allowing the server to track sessions or state.
- **Body:**
- The body contains the actual data or content returned from the server.
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
- Example: An HTML document, JSON data for an API response, or binary data
like an image file.
- **HTTP Methods:**
- **GET:**
- Used to retrieve data from the server. It requests a resource without making
changes to it.
- Example: `GET /products` fetches a lIst of products.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
- It Is safe and idempotent, meaning repeated requests have the same effect.
- **POST:**
- Used to submit data to the server, often resulting in a change or addition to the
resource.
- Example: `POST /submit-form` sends form data to be processed by the server.
fetch('https://api.example.com/data', {
method: 'POST',
body: JSON.stringify({ name: 'John', age: 30 }),
headers: { 'Content-Type': 'application/json' }
});
- It Is not idempotent, meaning multiple requests can result in different
outcomes.
- **PUT:**
- Used to update or create a resource at a specified URL.
- Example: `PUT /update-item/123` updates the resource with ID 123.
Example:
fetch('https://api.example.com/data/1', {
method: 'PUT',
body: JSON.stringify({ name: 'John', age: 31 }),
headers: { 'Content-Type': 'application/json' }
});
- It Is idempotent, meaning repeated requests will have the same effect.
- **DELETE:**
- Used to remove a resource from the server.
- Example: `DELETE /delete-item/123` deletes the resource with ID 123.
Example:
fetch('https://api.example.com/data/1', {
method: 'DELETE'
- It Is idempotent, meaning multiple requests will have the same result.

Web Clients vs. Web Servers: Roles in Client-Server Architecture


Web Clients
 Definition: A web client Is software, such as a web browser, that requests
resources or services from a web server.
 Purpose:
o Fetch and dIsplay content like web pages, images, and videos to
the user.
o Provide an interface for users to interact with web applications.
 Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari.
 Key Features:
o Sends HTTP requests to web servers.
o Renders web pages by interpreting HTML, CSS, and JavaScript.
o Stores cookies for session management.
o Allows users to input data through forms and submit it to servers.
Web Servers
 Definition: A web server Is software or hardware designed to store,
process, and deliver web pages to clients.
 Purpose:
o Respond to client requests by serving the requested content or data.
o Manage backend logic and database interaction.
 Examples: Apache HTTP Server, Microsoft IIS, Nginx.
 Key Features:
o LIstens for and processes HTTP requests from clients.
o Hosts static and dynamic content (e.g., HTML files, APIs).
o Implements security protocols like HTTPS.
o Handles multiple concurrent client requests.

ComparIson Between Web Clients and Web Servers


Aspect Web Client Web Server
Role Requests content or services. Provides content or services.
Hosting platforms for websites
Example Web browsers.
or APIs.
Communication Initiates HTTP requests. Responds to HTTP requests.
Stores temporary data Stores permanent data (files,
Data Storage
(cookies, cache). databases).

How Web Clients and Servers Communicate


Web clients and servers communicate using the HTTP/HTTPS protocol within
a request-response cycle. ThIs Is the foundation of internet communication.
Request-Response Cycle
1. Request from Web Client:
o A web client (browser) sends an HTTP request to a web server.
o Example: When a user types a URL into the browser or clicks a
link, the browser sends an HTTP request to the server hosting that
URL.
o Components of the request:
 Request Line: Specifies the HTTP method (GET, POST,
PUT, DELETE), URL, and protocol version.
 Headers: Include metadata like browser type, accepted file
formats, and cookies.
 Body (optional): Contains data, such as form submIssions
(used in POST requests).
2. Processing by Web Server:
o The server receives the request and processes it:
 Static Content: Directly serves files like HTML, CSS,
JavaScript, or images.
 Dynamic Content: Uses server-side scripts (e.g., PHP,
Python) to generate a response by interacting with databases
or APIs.
o Determines the appropriate response code (e.g., 200 OK, 404 Not
Found).
3. Response from Web Server:
o The server sends an HTTP response back to the client.
o Components of the response:
 Status Line: Includes HTTP version, status code, and status
message (e.g., "200 OK").
 Headers: Provide metadata like content type, server details,
or cache instructions.
 Body: Contains the requested resource, such as a web page
or JSON data.
4. Rendering by Web Client:
o The client receives the response and renders the content.
o If the response includes resources like images or scripts, the client
makes additional requests to fetch them.

Key Roles of Web Clients and Servers


Web Client’s Role
 Initiates communication by sending requests.
 Decodes and dIsplays the response (HTML, images, etc.).
 Allows users to interact with web applications (e.g., filling forms,
clicking buttons).
Web Server’s Role
 Waits for incoming requests from clients.
 Processes requests and generates appropriate responses.
 Ensures secure and efficient delivery of content.

Simple Illustration of Request-Response Cycle


1. User Action: User enters www.example.com in a browser.
2. Client Request: The browser sends an HTTP GET request to
example.com.
3. Server Processing: The web server finds the file (e.g., index.html) and
prepares an HTTP response.
4. Server Response: The server sends the HTML file back to the browser.
5. Client Rendering: The browser interprets the HTML and dIsplays the
web page.
ThIs cyclical interaction forms the backbone of the client-server model.
Develop a HTML5 form to collect user feedback. Include the following
elements: a text input for the user's name, a text area for comments, a file
input for uploading a profile picture, a rating input using stars, and a
submit button. Use appropriate HTML5 control elements and ensure the
form Is accessible
Here's the same HTML form with a separate CSS file for styling:
HTML (index.html):

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Feedback Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>User Feedback Form</h1>
<form action="#" method="POST" enctype="multipart/form-data">
<!-- Name input -->
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter
your name">
<br><br>

<!-- Comments text area -->


<label for="comments">Your Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"
placeholder="Enter your feedback here..." required></textarea>
<br><br>

<!-- Profile Picture upload -->


<label for="profile-picture">Upload Profile Picture:</label>
<input type="file" id="profile-picture" name="profile-picture"
accept="image/*">
<br><br>

<!-- Rating input using stars -->


<label for="rating">Rate Us:</label>
<div class="rating">
<input type="radio" id="star5" name="rating" value="5"><label
for="star5">⭐</label>
<input type="radio" id="star4" name="rating" value="4"><label
for="star4">⭐</label>
<input type="radio" id="star3" name="rating" value="3"><label
for="star3">⭐</label>
<input type="radio" id="star2" name="rating" value="2"><label
for="star2">⭐</label>
<input type="radio" id="star1" name="rating" value="1"><label
for="star1">⭐</label>
</div>
<br><br>

<!-- Submit button -->


<button type="submit">Submit Feedback</button>
</form>
</body>
</html>
CSS (styles.css):
css
Copy code
/* General styling for the page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

h1 {
text-align: center;
color: #4CAF50;
}

/* Styling for the form */


form {
width: 50%;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Input fields and text areas */


input[type="text"], input[type="file"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
textarea {
resize: vertical;
}

/* Styling for the rating stars */


.rating {
dIsplay: inline-block;
}

.rating input[type="radio"] {
dIsplay: none;
}

.rating label {
font-size: 24px;
cursor: pointer;
color: #FFD700;
}

.rating input[type="radio"]:checked ~ label {


color: #FFD700;
}

/* Submit button */
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #45a049;
}

/* Accessibility improvements */
label {
font-weight: bold;
margin-bottom: 5px;
dIsplay: block;
}

input:focus, textarea:focus {
border-color: #4CAF50;
outline: none;
}
Explanation of the CSS:
1. General Styles:
o The body tag has a light background color and a clean font.
o The h1 tag Is centered and styled with a green color.
2. Form Styling:
o The form Is centered and has padding, a white background,
rounded corners, and a light shadow.
o Inputs (text fields, file upload, and textarea) have consIstent
padding, width, and rounded corners.
3. Rating Stars:
o The rating class hides the radio buttons and shows clickable star
labels.
o When a radio button Is checked, the corresponding stars change
color to gold.
4. Submit Button:
o The submit button Is styled with a green background and white
text. It changes color on hover.
5. Accessibility:
o Labels are bold and clear for better readability.
o :focus styles are applied to input fields for better accessibility when
navigating via keyboard.
ThIs setup ensures your form Is clean, responsive, and vIsually appealing while
maintaining accessibility.

(i) What Is HTTP? How does it work? Give appropriate example. (8)
HTTP (HyperText Transfer Protocol) Is a protocol used for transferring
hypertext requests and information on the internet. It Is the foundation of data
communication on the World Wide Web. HTTP Is an application layer protocol
that facilitates the request and response mechanIsm between a client (usually a
web browser) and a server.
How HTTP Works:
1. Client-Server Model: HTTP works on a client-server architecture where
the client sends a request to the server, and the server processes the
request and sends back the response.
2. Request: The client sends an HTTP request to the server. The request
typically contains a URL (Uniform Resource Locator) that identifies the
resource, along with headers that provide additional information about the
request.
3. Processing: The server processes the request, locates the requested
resource, and prepares an HTTP response. The server may fetch data
from a database or perform computations as needed.
4. Response: The server sends back an HTTP response that includes a status
code, headers, and, if applicable, the body of the response (e.g., HTML,
JSON, image).
Example:
 When you vIsit a website, such as www.example.com, your browser
sends an HTTP request to the server hosting the website.
 The server processes the request and sends back an HTTP response that
includes the HTML code for the webpage.
 The browser renders the page based on the response received.
Request Example:
vbnet
Copy code
GET /index.html HTTP/1.1
Host: www.example.com
Response Example:
less
Copy code
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<html>...</html>
(ii) Why HTTP Is called stateless protocol? EnlIst various methods for state
management and also give advantages and dIsadvantages of each method.
(8)
Why HTTP Is Called Stateless? HTTP Is called a stateless protocol because
each request made by a client to a server Is independent of any previous or
future requests. The server does not store any information about previous
interactions once the request Is completed. ThIs means that each request Is
treated as if it Is the first request, and the server does not retain any state
between requests.
State Management Methods:
1. Cookies:
o Description: Cookies are small pieces of data stored on the client’s
device. They can be used to remember information such as user
preferences, session identifiers, and authentication data.
o Advantages:
 Simple to implement.
 Can store data for long periods (persIstent cookies).
 Commonly used for session management and tracking users.
o DIsadvantages:
 Limited storage capacity (usually up to 4KB).
 Can be dIsabled by users.
 Privacy concerns (can be used for tracking).
2. Sessions:
o Description: Sessions store data on the server side, and a session
ID Is sent to the client as a cookie or URL parameter. ThIs ID Is
used to retrieve session data from the server.
o Advantages:
 More secure than cookies because data Is stored server-side.
 Can store more data compared to cookies.
o DIsadvantages:
 Server resources are required to manage session data.
 Can be vulnerable to session hijacking if not implemented
securely.
3. URL Parameters:
o Description: State information Is embedded within the URL as
query parameters, allowing data to be passed between client and
server.
o Advantages:
 Easy to implement.
 Does not require additional storage.
o DIsadvantages:
 Exposes state information in the URL, which can lead to
security and privacy Issues.
 Limited in size and can clutter the URL.
4. Local Storage:
o Description: Local storage Is a browser feature that allows data to
be stored on the client side, persIsting across sessions.
o Advantages:
 Large storage capacity (5MB or more).
 Data persIsts even after the browser Is closed.
o DIsadvantages:
 Can be accessed by malicious scripts (XSS vulnerabilities).
 Not suitable for storing sensitive data.
5. Web Storage (SessionStorage):
o Description: Similar to local storage, but the data Is only available
for the duration of the session (until the browser tab Is closed).
o Advantages:
 More secure than cookies.
 Fast access to stored data.
o DIsadvantages:
 Data Is cleared when the session ends.
 Limited to the browser’s current session and cannot persIst
across different sessions.
Each method has its use cases, and the choice depends on the specific
requirements of the application, such as security, scalability, and ease of
implementation.
To create a well-structured table with a map for dIstrict comparIson in Tamil
Nadu, you can use HTML for the table structure and CSS for styling. The table
will include columns for dIstrict name, population, area, and other relevant data.
The map of Tamil Nadu can be added using an image or interactive map plugin.
Here’s an example of HTML and CSS code to create the table and format it,
along with a placeholder for the Tamil Nadu map:
HTML and CSS Code:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamil Nadu DIstrict ComparIson</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
width: 90%;
margin: 20px auto;
text-align: center;
}
h1 {
color: #4CAF50;
margin-bottom: 20px;
}
.map-container {
margin-bottom: 30px;
}
.dIstrict-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
.dIstrict-table th, .dIstrict-table td {
padding: 12px 15px;
text-align: center;
border: 1px solid #ddd;
}
.dIstrict-table th {
background-color: #4CAF50;
color: white;
}
.dIstrict-table tr:nth-child(even) {
background-color: #f2f2f2;
}
.dIstrict-table tr:hover {
background-color: #ddd;
}
.dIstrict-table td {
font-size: 14px;
}
.map-container img {
width: 100%;
max-width: 800px;
border-radius: 8px;
}
</style>
</head>
<body>

<div class="container">
<h1>Tamil Nadu DIstrict ComparIson</h1>

<div class="map-container">
<h2>Tamil Nadu DIstricts Map</h2>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Tamil_Nadu
_in_India_%28dIsputed%29.svg/800px-Tamil_Nadu_in_India_%28dIsputed
%29.svg.png" alt="Tamil Nadu Map">
</div>

<table class="dIstrict-table">
<thead>
<tr>
<th>DIstrict</th>
<th>Population</th>
<th>Area (km²)</th>
<th>Capital</th>
<th>Literacy Rate (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chennai</td>
<td>7,088,000</td>
<td>426</td>
<td>Chennai</td>
<td>90.33</td>
</tr>
<tr>
<td>Coimbatore</td>
<td>3,420,000</td>
<td>4,400</td>
<td>Coimbatore</td>
<td>85.90</td>
</tr>
<tr>
<td>Madurai</td>
<td>1,544,000</td>
<td>3,579</td>
<td>Madurai</td>
<td>84.75</td>
</tr>
<tr>
<td>Tirunelveli</td>
<td>1,370,000</td>
<td>6,220</td>
<td>Tirunelveli</td>
<td>81.60</td>
</tr>
<tr>
<td>Trichy</td>
<td>2,045,000</td>
<td>4,232</td>
<td>Tiruchirappalli</td>
<td>89.10</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>
Explanation of Code:
1. HTML Structure:
o The <table> element Is used to create the table for comparing
dIstricts in Tamil Nadu.
o Inside the table, there are five columns: DIstrict, Population, Area
(km²), Capital, and Literacy Rate (%).
o A map of Tamil Nadu Is added above the table using the <img>
tag, where the source URL points to an SVG image of Tamil Nadu.
2. CSS Styling:
o The table has a modern design with alternating row colors for easy
reading and hover effects to highlight rows when the user moves
the mouse over them.
o The map image Is dIsplayed with a maximum width of 800px and
a border radius to make it look aesthetically pleasing.
o The font-family, padding, and text-align properties are used to
ensure the table and text are well-formatted and aligned.
3. Map:
o The map of Tamil Nadu Is sourced from Wikimedia and dIsplayed
in the map-container div.
o You can replace the map image URL with a more interactive map if
desired, or use JavaScript to embed an interactive map.
Result:
 When thIs code Is rendered in a browser, you'll see a well-structured table
with dIstrict comparIson details and a map of Tamil Nadu dIsplayed
above the table.
Construct a CSS animation that animates a bouncing ball effect. The ball should
bounce up and down while also rotating. The animation should last 4 seconds
and repeat indefinitely. Additionally, ensure that the ball changes color at the top
of the bounce...
ChatGPT said:
ChatGPT
Here's a CSS animation that achieves a bouncing ball effect, including rotation,
color change at the top of the bounce, and a 4-second duration that repeats
indefinitely.
HTML
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncing Ball Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ball"></div>
</body>
</html>
CSS
css
Copy code
/* styles.css */
body {
margin: 0;
dIsplay: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
overflow: hidden;
}

.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: relative;
animation: bounce 4s infinite ease-in-out, rotate 4s infinite linear;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
background-color: red; /* Base color */
}
25% {
transform: translateY(-200px);
background-color: blue; /* Color at the top */
}
50% {
transform: translateY(0);
background-color: red;
}
75% {
transform: translateY(-100px);
background-color: blue;
}
}

@keyframes rotate {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
}
Explanation:
1. Bouncing Animation:
o The @keyframes bounce creates a vertical motion using translateY.
o The ball changes color (red to blue) at its peak.
2. Rotation Animation:
o The @keyframes rotate handles the ball's continuous rotation.
3. Combination:
o Both animations (bounce and rotate) are applied simultaneously
using the animation property.
4. Infinite Loop:
o The infinite value ensures that the animations repeat continuously.
5. Ease-in-out:
o Provides a smooth acceleration and deceleration for the bounce.
4o
You said:
sample output image
ChatGPT said:
ChatGPT
Here Is a sample image representing the bouncing and rotating ball effect
described in your animation.
You said:
Develop a web page using CSS with the following requirements (i) Paint the
background grey (ii) Paint the sidebar yellow (iii)Set the artIst h1 to be only
uppercase (iv) Set the title h2 to be uppercase-first letter (v) Set a line spacing
between the lines (vi) Set letter spacing between the letters in each span of type
instruction.
ChatGPT said:
ChatGPT
Below Is the implementation of a web page with CSS to meet your specified
requirements.
HTML
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<aside class="sidebar">Sidebar Content</aside>
<main class="content">
<h1 class="artIst">Famous ArtIst</h1>
<h2 class="title">The Magnificent Artwork</h2>
<p>ThIs Is a paragraph demonstrating line spacing. Notice the space
between the lines.</p>
<p><span class="instruction">Follow</span> <span
class="instruction">these</span> <span
class="instruction">instructions</span>.</p>
</main>
</div>
</body>
</html>
CSS
css
Copy code
/* styles.css */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: grey; /* Background of the page */
color: black;
}

.container {
dIsplay: flex;
min-height: 100vh;
}

.sidebar {
width: 20%;
background-color: yellow; /* Sidebar background */
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.content {
flex-grow: 1;
padding: 20px;
}

/* Uppercase for h1 */
.artIst {
text-transform: uppercase;
}

/* Capitalize only the first letter for h2 */


.title {
text-transform: capitalize;
}

/* Line spacing (line height) for paragraphs */


p{
line-height: 1.6; /* Adjust the value as needed */
}

/* Letter spacing for spans with class instruction */


.instruction {
letter-spacing: 2px; /* Adjust spacing as needed */
dIsplay: inline-block;
margin-right: 5px; /* Adds space between spans */
}
Features Explained:
1. Background Color:
o Set to grey for the entire page using the background-color property.
2. Sidebar:
o Set to yellow using background-color for the .sidebar class.
o Added box-shadow for a subtle separation.
3. ArtIst Heading (h1):
o Applied text-transform: uppercase; to make the text fully
uppercase.
4. Title (h2):
o Used text-transform: capitalize; to ensure only the first letter of
each word Is uppercase.
5. Line Spacing:
o Set line-height for paragraphs to control the spacing between lines.
6. Letter Spacing:
o Applied letter-spacing to spans with the instruction class for
consIstent spacing between letters.

You might also like