EASWARI ENGINEERING COLLEGE
[Autonomous]
CHENNAI
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Academic year 2025-2026
2321CSS103J - Web Essentials
Lab manual
Prepared by, Approved by,
Keerthana.S, AP/CSE HOD
2321CSS103J – WEB ESSENTIALS LABORATORY LTPRC
OBJECTIVES:
• To introduce students to the fundamentals of web development using HTML, CSS, JavaScript,
and Bootstrap.
• To develop practical skills in creating and styling web pages, forms, layouts, and simple
applications.
• To provide hands-on experience in integrating client-side scripting for interactivity and dynamic
content.
• To design and implement basic real-world web projects such as to-do lists and e-commerce
websites.
LIST OF EXPERIMENTS:
1. Set up a basic web development environment
2. Design a basic contact form using HTML
3. Apply CSS for background color, text color, and font style
4. Create a box to demonstrate the CSS box model
5. Create an image gallery in grid format
6. JavaScript alert on button click
7. JavaScript program to add two numbers
8. Build a two-column layout using Bootstrap
9. Develop a to-do list application
10. Design and develop a simple e-commerce website
OUTCOMES:
• To set up a basic web development environment and host simple websites locally.
• To design and style responsive web pages using HTML, CSS, and Bootstrap.
• To implement client-side interactivity using JavaScript for dynamic functionality.
• To gain the ability to develop small-scale web applications such as forms, to-do
lists, and e-commerce sites.
Total: 60 Periods
LIST OF EXPERIMENTS:
S. No. Experiment Title Pgno
Set up a basic web development environment
1
2 Design a basic contact form using HTML
Apply CSS for background color, text color, and font
3
style
4 Create a box to demonstrate the CSS box model
5 Create an image gallery in grid format
6 JavaScript alert on button click
7 JavaScript program to add two numbers
8 Build a two-column layout using Bootstrap
9 Develop a to-do list application
10 Design and develop a simple e-commerce website
Exno : 1 Set up a Basic Web Development Environment
Aim:
To set up a development environment using VS Code, a web browser, and a simple server like
XAMPP or Apache.
Algorithm:
1. Start.
2. Install a code editor (e.g., VS Code).
3. Install a web browser (e.g., Chrome/Firefox).
4. Install and configure a web server (e.g., XAMPP/Apache).
5. Create a simple HTML file in the editor.
6. Save the file in the server’s root directory (e.g., htdocs in XAMPP).
7. Open the browser and type http://localhost/filename.html.
8. Verify that the page loads successfully.
9. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Environment Setup Test</title>
</head>
<body>
<h1>Web Development Environment Successfully Installed</h1>
<p>This page is running on localhost using Apache/XAMPP server.</p>
</body>
</html>
Output:
A browser window displays:
● Heading: Web Development Environment Successfully Installed
● Paragraph confirming page is running on localhost.
Result:
Basic web environment was successfully set up and verified with a test HTML page.
ExNo: 2: Create a Contact Form using HTML
Aim:
Design a form with inputs for name, email, and message.
Algorithm:
1. Start.
2. Open a new HTML file.
3. Create a <form> element.
4. Add input fields:
o Text box for Name.
o Text box for Email.
o Text area for Message.
5. Add a Submit button.
6. Save and open in browser.
7. Test the form by entering details.
8. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
1. Install VS Code.
2. Install XAMPP and start the Apache server.
3. Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
4. Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form>
Name: <input type="text" required><br><br>
Email: <input type="email" required><br><br>
Message:<br>
<textarea rows="4" cols="40"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
A form with:
• Name input field
• Email input field
• Message text area
• Submit button
Result:
A working contact form was successfully created using HTML.
Exno 3: Apply CSS Styling
Aim:
Change background color, text color, and font style using CSS.
Algorithm:
1. Start.
2. Create a basic HTML file with text content.
3. Link a CSS file (or use <style> tag).
4. In CSS:
o Set background-color.
o Set color for text.
o Set font-family (e.g., Arial).
5. Save the files.
6. Open in browser and check changes.
7. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to Web Essentials</h1>
<p>This page demonstrates background color, text color, and font styling.</p>
</body>
</html>
(style.css)
body {
background-color: lightblue;
color: darkblue;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkred;
}
Output:
● Background turns light blue
● Text in dark blue
● Heading centered in dark red
Result:
CSS was successfully applied to style the webpage.
Exno 4: CSS Box Model
Aim:
Create a box using CSS and apply padding, margin, and border.
Algorithm:
1. Start.
2. Create an HTML <div> element.
3. Add some text inside the box.
4. In CSS:
o Define width and height.
o Apply border.
o Apply padding (inside space).
o Apply margin (outside space).
5. Save and open in browser.
6. Observe the box model.
7. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style>
.box {
width: 300px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="box">This is a box model demonstration.</div>
</body>
</html>
Output:
● A yellow box with blue border
● 20px padding inside, 30px margin outside
Result:
The CSS box model was successfully demonstrated.
Exno : 5 Image Gallery using Grid
Aim:
Create a responsive image gallery layout.
Algorithm:
1. Start.
2. Create an HTML file with multiple <img> tags.
3. Add CSS to:
o Set fixed width and height for images.
o Arrange images in a grid using display: grid or flexbox.
o Add spacing between images.
4. Save the files.
5. Open in browser and view gallery.
6. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gallery img {
width: 100%;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>My Image Gallery</h2>
<div class="gallery">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
</div>
</body>
</html>
Output:
● 3 images displayed in grid format
● Rounded corners
Result:
An image gallery was successfully designed using HTML and CSS Grid.
Exno : 6 JavaScript Alert on Button Click
Aim:
Display a message when a button is clicked.
Algorithm:
1. Start.
2. Create an HTML file with a <button>.
3. Add a JavaScript function that calls alert("Message").
4. Use onclick attribute on the button to trigger the function.
5. Save the file.
6. Open in browser and click button.
7. Verify the alert message appears.
8. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Alert</title>
<script>
function showAlert() {
alert("Hello! You clicked the button.");
}
</script>
</head>
<body>
<h2>JavaScript Alert Example</h2>
<button onclick="showAlert()">Click Me</button>
</body>
</html>
Output:
When the user clicks the button, a popup alert box appears with the message:
"Hello! You clicked the button."
Result:
JavaScript alert box was successfully displayed on button click.
Exno: 7 Sum of Two Numbers using JavaScript
Aim:
Create variables and display their sum.
Algorithm:
1. Start.
2. Declare two variables with numeric values.
3. Add the two numbers.
4. Store the result in a third variable.
5. Display the result using document.write or alert.
6. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Sum of Numbers</title>
</head>
<body>
<h2>Sum of Two Numbers</h2>
<script>
var a = 25;
var b = 15;
var sum = a + b;
document.write("The sum of " + a + " and " + b + " is: " + sum);
</script>
</body>
</html>
Output:
The browser displays:
The sum of 25 and 15 is: 40
Result:
JavaScript program successfully calculated and displayed the sum of two numbers.
Exno: 8 Two-Column Layout using Bootstrap
Aim:
Use Bootstrap grid system for layout.
Algorithm:
1. Start.
2. Create a new HTML file.
3. Include Bootstrap CSS (via CDN link).
4. Create a <div class="container">.
5. Inside, create a <div class="row">.
6. Add two <div class="col-md-6"> elements (two columns).
7. Insert sample content in each column.
8. Save and open in browser.
9. Verify responsive layout.
10. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-md-6 bg-info text-white p-3">
<h3>Column 1</h3>
<p>This is the first column.</p>
</div>
<div class="col-md-6 bg-success text-white p-3">
<h3>Column 2</h3>
<p>This is the second column.</p>
</div>
</div>
</div>
</body>
</html>
Output:
● Two responsive columns side by side.
● Column 1 (blue background), Column 2 (green background).
Result:
Bootstrap grid system was successfully used to create a two-column responsive layout
Exno : 9 To-Do List Application
Aim:
Create a basic to-do list with add and delete functionality.
Algorithm:
1. Start.
2. Create an HTML file with:
o Input field for a new task.
o "Add" button.
o Empty list <ul> to display tasks.
3. In JavaScript:
o Write a function to add a task when button is clicked.
o Append the task as a <li> in the list.
o Add a "Remove" button for each task.
o Write function to remove a task when "Remove" is clicked.
4. Apply CSS for basic styling.
5. Save and test in browser.
6. Stop
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
1. Install VS Code.
2. Install XAMPP and start the Apache server.
3. Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
4. Create index.html and open it using the browser via http://localhost/web_project/index.html.
Program:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<h2>My To-Do List</h2>
<input id="task" type="text" placeholder="Enter task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<script>
function addTask() {
let task = document.getElementById("task").value;
if(task === "") return;
let li = document.createElement("li");
li.innerHTML = task + " <button onclick='this.parentNode.remove()'>Remove</button>";
document.getElementById("list").appendChild(li);
document.getElementById("task").value = "";
}
</script>
</body>
</html>
Output:
● User types a task and clicks "Add".
● Task appears in list with a Remove button.
● Clicking Remove deletes that task.
Result:
A working to-do list application was successfully created using HTML, CSS, and JavaScript.
Exno : 10 E-Commerce Website (Mini Project)
Aim:
Design a simple responsive e-commerce site with:
● Product listings
● Shopping cart simulation
● Checkout button
Algorithm:
1. Start.
2. Create HTML structure with:
o Header (site name/logo).
o Product listing section.
o Shopping cart section.
o Checkout button.
3. Apply CSS/Bootstrap for responsive design.
4. Add JavaScript functions:
o Add product to cart.
o Update total price.
o Remove items from cart.
5. Test website in browser (add/remove items, checkout).
6. Save and publish using hosting if required.
7. Stop.
Tools Required:
● Visual Studio Code
● Chrome/Firefox browser
● XAMPP (Apache)
Procedure:
● Install VS Code.
● Install XAMPP and start the Apache server.
● Create a project folder inside htdocs (e.g., C:\xampp\htdocs\web_project).
● Create index.html and open it using the browser via http://localhost/web_project/index.html.
Suggested Features:
● Product cards using Bootstrap
● Add to cart button
● Responsive navigation bar
Code Structure:
● index.html (Home page)
● products.html (Product listings)
● cart.html (Shopping cart page)
● Use localStorage or arrays to simulate cart functionality.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Simple E-commerce</title>
</head>
<body>
<h2>Products</h2>
<div>
<p>Product 1 - $20 <button onclick="addToCart(20)">Add to Cart</button></p>
<p>Product 2 - $35 <button onclick="addToCart(35)">Add to Cart</button></p>
<p>Product 3 - $50 <button onclick="addToCart(50)">Add to Cart</button></p>
</div>
<h3>Shopping Cart</h3>
<p id="cartTotal">Total: $0</p>
<script>
let total = 0;
function addToCart(price) {
total += price;
document.getElementById("cartTotal").innerText = "Total: $" + total;
}
</script>
</body>
</html>
Output:
● Users see 3 products with prices.
● Clicking “Add to Cart” updates total dynamically.
● Example: Adding Product 1 and Product 2 shows Total: $55.
Result:
A simple e-commerce website with product listing and cart functionality was successfully
implemented.
