0% found this document useful (0 votes)

6 views106 pages

Lab Manual

The lab manual covers various web technologies, focusing on HTML, CSS, and JavaScript. It includes structured tasks for creating webpages, using HTML tags, attributes, and layouts, as well as inserting images and hyperlinks. Each lab builds foundational skills for web development, culminating in a personal profile webpage that incorporates styling and interactivity.

Uploaded by

abdullahbinamir4993

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

0% found this document useful (0 votes)

6 views106 pages

Lab Manual

Uploaded by

abdullahbinamir4993

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

Lab Manual

WEB TECHNOLOGIES

Submitted to:

MR ARBAB HAIDER

Submitted by:

Abdullah Amir

Section:

Roll Number:

2023-BSCS-151

Department of Computer Science

MNS University of Engineering and Technology, Multan

Table of Contents
LAB 01: Creating a Simple Webpage using HTML Structure.................................................................10
Lab 02: Using HTML Tags, Attributes, and Table Layouts.....................................................................15
Lab 03 Inserting Images, Hyperlinks, and Applying Inline CSS............................................................24
Lab 04: Exploring CSS and Selectors....................................................................................................28
Lab 05: Div-Based Layouts with Box Model and External CSS..............................................................34
Lab 06: CSS Positioning and Dropdown Menu.....................................................................................45
Lab 07 – CSS3 Visual Effects (Shadows, Gradients, Transitions):..........................................................55
Lab 08: Accessing and Modifying CSS Dynamically with JavaScript.....................................................62
Lab 09: Interacting with the DOM: Selecting Elements and Handling Events:.....................................70
Lab 10: Title: Creating Animations and Interactive Elements with DOM Methods..............................79
Lab 11: Title: Designing Responsive Pages Using Bootstrap Framework..............................................87
Lab 12 – Handling Forms with JavaScript (Validation, APIs).................................................................93
Lab 13: Connecting to SQL Database and Retrieving Data
LAB 01: Creating a Simple Webpage using HTML Structure
Objectives
• To understand the basic structure of an HTML document

• To learn the purpose of HTML tags like <html>, <head>, <title>, <body>, <h1>–<h6>, <p>
• To create, save, and run a simple webpage
• To practice modifying content and structure in HTML

Theoretical Description:
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create webpages. It
was introduced by Tim Berners-Lee in 1991 and is the base of web development.

Key Features:
Uses tags to structure content.
Works on all operating systems with a browser.
Defines structure only (design and logic come from CSS & JavaScript).
Can be combined with other web technologies.
Basic Structure of an HTML Page
<!DOCTYPE html> → Defines HTML5.
<html> → Root element of the page.
<head> → Metadata and title (not visible).
<title> → Browser tab title.
<body> → Visible page content.
<h1> to <h6> → Headings, from large to small.
<p> → Paragraph text.

Lab Task(s)
Task 1: Creating Your First Webpage:
Abdullah Amir
2023--BSCS--151

My first webpage is designed using the basic structure of HTML. The head section includes a
title that appears on the browser tab. The body section contains the visible content of the
page. It starts with a main heading, followed by a short paragraph of text, and also includes a
link that opens another website when clicked. This simple example explains how HTML can
be used to create a basic webpage.
Example Explanation:
 The heading at the top is like a page title shown in big and bold letters (e.g., Welcome
to My Webpage).
 The paragraph is normal text that explains or gives information (e.g., This is my first
paragraph in HTML).

Task 2: Exploring Headings:

Abdullah Amir
2023--BSCS--151
Headings are used to organize and highlight content on a webpage. They make the text look
bigger and more important so that readers can quickly understand the main subject. Headings
also improve the design of the page and help in dividing information into clear sections.
Example Explanation:
 The main heading is shown at the top in large bold letters (e.g., Welcome to My
Webpage).
 Subheadings can be added under the main heading to divide topics.
 Together, headings guide the reader and make the page easy to follow

Task 3: Adding Multiple Paragraphs:

Abdullah Amir
2023--BSCS--151

Paragraphs allow us to write text in a clear and organized way. Each paragraph starts on a
new line, which makes the content easier to read. Using multiple paragraphs helps separate
different ideas so that the page does not look messy or confusing.
Example Explanation:
 One paragraph can introduce a topic (e.g., About Myself).
 Another paragraph can explain more details about that topic.
 Multiple paragraphs together make the content smooth and easy to understand.

Task 4: Combining Headings and Paragraphs:

Abdullah Amir
2023--BSCS--151

Headings and paragraphs are often used together to create a well-structured webpage. A
heading introduces the main idea, while the paragraph explains it in detail. This combination
helps both in design and readability of the page.

Example Explanation

 A heading can say My City in bold letters.

 A paragraph under it can describe hobbies in simple sentences.
 This way, headings and paragraphs make the page professional and clear.

Task 5: Experimenting with Title:

Abdullah Amir
2023--BSCS--151

The title of a webpage is shown on the browser tab. It tells the user what the page is about,
even before opening it. In this activity, only the title was changed, while the rest of the page
remained the same.
Example Explanation:
 A title like About My City appears on the tab at the top.
 Changing it to About Me shows a new name on the tab.
 The title is small but important because it represents the whole page.

Task 6: Student Activity:

Abdullah Amir
2023--BSCS--151

In this activity, personal details were added to the webpage. Writing information such as
name, hobbies, and education made the page unique and personalized. It was a simple task
but useful to practice real-life content in HTML.
Example Explanation:
The name introduces the student (e.g., my name is Abdullah).
Hobbies describe interests like doing coding, reading, and playing cricket.
Education details show the background, such as grade or subjects studied.

Conclusion:
In these tasks, I learned how to make simple webpages using HTML. First, I created my first
webpage to understand the basic structure. Then I tried all six heading levels and saw their
size differences. I also added many paragraphs to practice writing content. After that, I
combined headings and paragraphs in one page. I changed the title tag to see how it updates
the browser tab. In the end, I made a profile page with my name, education, and hobbies.

Lab 02: Using HTML Tags, Attributes, and Table Layouts

Objectives:
Learn how to use HTML tags and their attributes.
Format webpage text and structure.
Add images, links, and lists.
Create simple layouts using tables.
HTML Tags and Attributes:
Tags define the elements of a webpage (like headings, paragraphs, links, images).
Most tags come in pairs — opening and closing.
Some are self-closing, like the image tag.
Attributes give extra details to elements (like the image source or link address).
Common attributes include href, src, alt, id, class, style, and title.

Formatting Tags:
Used to style or separate text:
Bold, italic, underline, line breaks, and horizontal lines help structure and emphasize
content.

Links and Images:

Links connect one webpage to another.
Images add visual content and can have alternate text for accessibility.

Lists:
Ordered lists show numbered items.
Unordered lists show bullet points.
Each item in a list is written as a list item.

Table-Based Layouts:
Tables organize content into rows and columns.
A table contains rows, and each row has header or data cells.
Tables can be used to design simple webpage layouts.

Lab Tasks:

Task 1: Practicing Tags and Attributes

Create a webpage that uses headings, paragraphs, bold, italic, and underline tags.
Insert an image with src, alt, width, and height attributes.
Add hyperlinks to at least two external websites (e.g., Google, YouTube).

<!DOCTYPE html>

<html>

<head>

<title>Practice Tags</title>

</head>

<body>

<h1>Welcome to My Page</h1>

<p><b>My name is Abdullah.</b> I

am learning <i>HTML</i> and

<u>practicing tags</u>.</p>

<img src="[Link]" alt="My

Picture" width="200" height="150">

<p>Visit <a href="[Link]

</a> or <a

href="[Link]

</body>

</html>

Output:
ABDULLAH BIN AMIR
2023-CS-151
Explanation:
<h1>, <h2>, <h3>: Used for different heading levels.
<p>: Defines paragraphs of text.
<b>, <i>, <u>: Add bold, italic, and underline formatting.
<img>: Displays an image using src, alt, width, and height.
<a>: Creates hyperlinks to external websites.

Task 2: Lists and Formatting:

Create a list of your 3 favorite movies (unordered list).
Create a list of your 3 daily tasks (ordered list).
Add a horizontal line between sections.
<!DOCTYPE html>
<html>
<head>
<title>List examples</title>
</head>
<body>
<h2>My Favorite Movies</h2>
<ul>
<li>The Boys</li>
<li>ALice in Borderland</li>
<li>Spider man</li>
<li>Money Heist</li></ul>
<hr>
<h2>My Daily Task</h2>
<ol>
<li>Coding</li>
<li>Exercise</li>
<li>Reading</li>
</ol>
</body>
</html>
Output:

ABDULLAH BIN AMIR

2023-CS-151
Explanation:
This HTML page displays two sections using heading tags. An unordered list shows three
favorite movies with bullet points, and an ordered list displays daily tasks with numbers. The
<hr> tag adds a horizontal line to separate both sections. Tags like <ul>, <ol>, and <li> are
used to create lists.

Task 3: Creating a Table

Make a student record table with columns: Name, Roll No, Course, Marks.
Add at least 4 rows of data.
Use table attributes (border, cellpadding, cellspacing, width).
<!DOCTYPE html>
<html>
<head>
<title>Student Record</title>
</head>
<body>
<h2>Student Record Table</h2>
<table border="1" cellpadding="8" cellspacing="0" width="60%">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Course</th>
<th>Marks</th>
</tr>
<tr>
<td>Abdullah </td>
<td>151</td>
<td>Web Tech</td>
<td>98</td>
</tr>
<tr>
<td>ASRA</td>
<td>103</td>
<td>Web Tech</td>
<td>85</td> </tr>
<tr>
<td>Mehwish</td>
<td>102</td>
<td>Web Tech</td>
<td>88</td>
</tr>
<tr>
<td>Usman</td>
<td>104</td>
<td>Web Tech</td>
<td>92</td>
</tr>
</table>
</body>
</html>
Output:

ABDULLAH BIN AMIR

2023-CS-151

Explanation:
This HTML document creates a Student Record Table with columns for Name, Roll No,
Course, and [Link] uses a <table> with a border and specified width, displaying four
student [Link] <tr> represents a row, and <th> tags define the table headers.

Task 4: Table-based Layout Page:

Design a simple homepage layout using a table:
Header row (Website Title) o Left column (Navigation links)
Right column (Main Content like text and image)
Footer row (Contact info or copyright).
<!DOCTYPE html>
<html>
<head>
<title>Homepage Layout</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td colspan="2" align="center"><h1>My Website</h1></td>
</tr>
<tr>
<td width="25%">
<h3>Navigation</h3>
<a href="[Link]">Home</a><br>
<a href="[Link]">Lists</a><br>
<a href="[Link]">Table</a>
</td>
Abdullah
2023-BSCS-151
<td width="75%">
<h2>Welcome</h2>
<p>This is a simple homepage layout using a table.</p>
<img src="a/[Link]" alt="Sample Image" width="250">
</td>
</tr>
<tr>
<td colspan="2" align="center">© 2025 Abdullah - All Rights Reserved</td>
</tr>
</table>
</body>
Output:

ABDULLAH BIN AMIR

2023-CS-151

Explanation:
This HTML document creates a basic homepage layout using a table. It includes a header, a
left-side navigation menu, a main content area, and a footer. The page title is set to
"Homepage Layout", and the content includes links, a welcome message, and an image. The
table ensures all sections are aligned properly within a bordered structure.

Summary:
Lab 2 focused on practicing basic HTML tags, attributes, and layouts. Students learned to use
formatting tags like <b>, <i>, and <u>, and added images and hyperlinks using the <img>
and <a> tags. Ordered (<ol>) and unordered (<ul>) lists were created to organize content. A
student record table was designed using <table>, <tr>, <td>, and <th>. Finally, a simple
homepage layout was built using a table-based structure with navigation, content, and footer
sections. This lab built foundational skills for creating structured HTML webpages.
Lab 03
Inserting Images, Hyperlinks, and Applying Inline CSS
Objectives
To learn inserting and formatting images in webpages.
To explore different types of hyperlinks (internal, external, email, image links).
To apply inline CSS for controlling text, images, and layout.
To build a mini personal webpage combining images, links, and inline styling.

Theoretical Description:
Images in HTML
Images are added using the <img> tag.
Key attributes:
 src – specifies the image path
 alt – alternative text for accessibility
 width and height – control image size
 style – allows inline styling
To make an image clickable, wrap it inside an <a> tag.

Hyperlinks
Internal Links: Navigate to other pages within the same website or project folder.
External Links: Direct users to external websites using full URLs.
Email Links: Open the user's email app using [Link]
Image Links: Turn an image into a link by nesting it inside <a>

Inline CSS
Used with the style attribute to apply styles directly to HTML tags.
Common uses include changing text color, font, size, background color, borders, alignment,
and spacing.
Example:<p style="color: blue; font-size: 18px;">Styled text</p>

Lab Tasks
Task 1: Images with Inline CSS
• Insert two images:
o A local image with border and rounded corners.
o An online image resized using inline CSS.
• Align images (left/right) using inline CSS.
• Add alternate text for accessibility.
<!DOCTYPE html>
<html>
<head>
<title>Images with Inline CSS</title>
</head>
<body>
<img src="C:\Users\HP\Pictures\Saved Pictures\[Link]" alt="Local landscape photo"
style="border: 3px solid #555; border-radius: 10px; float: left;
width: 200px; margin-right: 15px;">
<img src="C:\Users\HP\Pictures\Saved Pictures\wallpaperflare.com_wallpaper (4).jpg"
alt="Placeholder image"
style="width: 200px; height: auto; float: right;">
</body>
</html>

ABDULLAH BIN AMIR

2023-CS-151

Explanation:
The first image is a local file styled with a border, rounded corners, and aligned to the left
using float: left. The second is an online image, resized with width, and aligned to the right
using float: right. alt text improves accessibility by describing each image if it fails to load.

Task 2: Hyperlinks (Advanced)

• Create hyperlinks of different types:
Internal link to another page ([Link]).
External link to Google/YouTube. link using mailto
Image as hyperlink (click image to open a website).

ABDULLAH BIN AMIR

2023-CS-151

Explanation:
Internal link points to a local page [Link]. External links open in a new tab
(target="_blank") for safety and better UX. mailto: opens the user’s default email client with
the email address [Link] image wrapped inside an <a> tag makes it clickable, linking
to YouTube.

Task 3: Combined Mini Webpage

• Create a Personal Profile Page with:
A styled header (color + font size).
A profile image with border.
A short introduction paragraph styled with background color and padding.
A list of favorite websites with external hyperlinks.
A footer containing email link + copyright text.
<!DOCTYPE html>
<html>
<head>
<title>Personal Profile</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1 style="color: #2c3e50; font-size: 36px;">ABDULLAH AMIR Profile</h1>
<img src="C:\Users\HP\Pictures\Saved Pictures\[Link]"
style="border: 4px solid #2980b9; border-radius: 50%; width: 150px; height: 150px;">
<p style="background-color: #ecf0f1; padding: 15px; max-width: 500px; margin-top:
20px;">
Hi! I'm ABDULLAH AMIR.I enjoy learning new technologies and exploring the web.</p>
<h2>Favorite Websites</h2><ul>
<li><a href="[Link] target="_blank" >Wikipedia</a></li>
<li><a href="[Link] target="_blank" >GitHub</a></li>
<li><a href="[Link] target="_blank">Stack Overflow</a></li>
</ul>
<footer style="margin-top: 40px; font-size: 14px; color: #7f8c8d;">
<a href="abdullahbinamir4993@[Link]">Gmail ABDULLAH AMIR</a>  |
  © 2025 ABDULLAH AMIR
</footer>
</body></html>

ABDULLAH BIN AMIR

2023-CS-151

Explanation:
The header is styled with color and large font [Link] profile image has a solid border and
rounded to a [Link] intro paragraph uses background color and padding for
[Link] websites are listed with external links opening in new [Link] footer
includes an email link and copyright notice.

Summary:
Task 1: Added a local image with border and rounded corners, and an online image resized
and aligned using inline CSS with proper alt text. Task 2: Created internal, external, email,
and image-based hyperlinks for navigation and interaction. Task 3: Built a personal profile
page with a styled header, profile image, intro paragraph, and favorite website [Link]
a footer with an email link and copyright [Link] inline CSS throughout to apply layout,
styling, and formatting directly within HTML elements.
Sure. Here’s a shorter and completely rephrased version of your **Lab 04: Exploring CSS
Selectors and Internal CSS**, written simply and differently so it doesn’t match the original
or previous one:

Lab 04: Exploring CSS and Selectors

Objective
 Learn different CSS selectors
 Use internal CSS for webpage design
 Practice class, ID, and group selectors
 Improve layout with colors, fonts, and spacing

What is CSS?
CSS (Cascading Style Sheets) controls how HTML elements look on a [Link] gives
structure (like headings or paragraphs), while CSS handles design such as color, font, size,
and layout.

Why We Use CSS

CSS helps to:
 Change fonts, colors, and text sizes
 Add borders or background designs
 Arrange items neatly on a page
 Make pages responsive on all devices

Ways to Apply CSS

1. Inline CSS: Styles are written inside the tag.
html
<p style="color: red;">Hello CSS!</p>
2. Internal CSS: Styles go inside a `<style>` tag in the `<head>`.

html
<style>
p { color: blue; }
</style>

3. External CSS: Styles are written in a separate file and linked.

html
<link rel="stylesheet" href="[Link]">

Types of CSS Selectors

1. Element Selector:
Applies to all elements of the same tag.
css
p { color: green; }

2. Class Selector:
Used for multiple elements with the same class name (use `.`).
css
.note { background: yellow; }

3. ID Selector:
Used for one specific element (use `#`).
css
#mainTitle { text-align: center; color: red; }

4. Group Selector:
Applies one style to several tags.
css
h1, h2, p { color: purple; }

5. Descendant Selector:
Targets elements inside another element.
css
div p { color: orange; }

Selector Symbol Example Use

Element none p {} All tags of one type
Class . .box {} Many items with same style
ID # #title {} One specific element
Group , h1, p {} Several elements
Descendant space div p {} Child elements only

Task 1: Apply Internal CSS for Basic Page Styling:

 Create a new HTML file named lab4_task1.html.
 Add a proper HTML structure including <head> and <body> sections.
 Inside the <head> section, insert a <style> tag to define internal CSS.
 Use element selectors to style the body background, heading color, and paragraph font.
 Adjust text alignment and font family to improve readability.
 Save the file and open it in a web browser to verify your design.
CODE:
<!DOCTYPE html>
<head>
<title>Lab 4 - Task 1</title>

<style>
body {
background-color: #4275ac;
font-family: "Times New Roman", sans-serif;
text-align: center;
margin: 50px;
}
h1 {
color:rgb(194, 77, 209);
}
p{
color: lightcyan ;
font-size: 20px;
line-height: 1.7;
}
</style>
</head>
<body>
<h1>Welcome to Lab 4 - Task 1</h1>
<p>This web shows how internal CSS is used.</p>
<p>We used selectors like background, headings to enhance the web</p>
</body>
</html>
Explanation:
 HTML structure: includes <head> and <body> sections.
 Internal CSS: written inside the <style> tag in the <head>.
 Element selectors: body, h1, and p are styled individually.
 Text & font: text is center, and the font family is set to Roman for readability.
 Colors: soft background and readable text colors improve design clarity.

Task 2: Use Class and ID Selectors for Custom Formatting:

 Create a new HTML file named lab4_task2.html.
 Add headings and multiple paragraphs describing any topic of your choice.
 Define class selectors in the <style> section to style multiple elements with the same
class (e.g., changing background or font color).
 Use an ID selector to uniquely style one specific element (such as the main heading).
 Apply styles such as text decoration, borders, or different font sizes.
 Save and open the file in a browser to check the applied styles.
CODE:
<!DOCTYPE html> color: black;
<head> font-size: 18px;
<title>Lab 4 - Task 2</title> padding: 15px;
 border: 2px solid #cad80b;
<style> border-radius: 8px;
#main-heading { margin-bottom: 15px; }
color:rgb(131, 127, 127); /* Another class selector*/
font-size: 36px; .highlight {
text-decoration: underline; color:rgb(32, 162, 223);
margin-bottom: 20px; font-weight: bold; }
} </style>
/* Class selector for paragraph*/ </head>
.paragraph { <body>
background-color:rgb(245, 141, 5);
<h1 id="main-heading">Abdullah </p>
Amir</h1> <p class="paragraph">
<p class="paragraph"> Arrange elements in grids layouts
CSS stands for Cascading Style Sheets. </p>
</p> <p class="paragraph">
<p class="paragraph"> Create responsive designs that work on
<span class="highlight">Cascading Style desktop
Sheets</span>,It is a styling language used </p>
to control how </body>
HTML elements look on a webpage. </html>

Explanation:

ID Selector (#main-heading): Used to style one unique element such as the main title.
Added color, larger font, and underline.
Class Selectors (.info, .highlight):

 .info gives paragraphs a background, padding, and border.

 .highlight highlights important text.

Text & Borders: The heading is underlined, and paragraphs have rounded borders with
spacing inside.

Task 3: Design a Mini Profile Page Using Combined Selectors:

 Create a new HTML file named [Link].
 Add sections for your Name, About Me, and Contact Information.
 Write internal CSS rules in the <style> section to style headings, paragraphs, and links.
 Use group selectors to style multiple headings together (e.g., h1, h2).
 Use descendant selectors to style elements within specific containers (e.g., text inside a
div class).
 Add hover effects on links for better interaction.
 Save your file and open it in a browser to preview the final styled webpage.

<!DOCTYPE html> <head>

<title>My Mini Profile</title> text-decoration: none;
 font-weight: bold;
<style> }
h1, h2 {
color: #003366; /* Hover effect on links */
font-family: "Times New Roman", serif; a:hover {
text-align: center; color: #db6516d2;
} text-decoration: underline;
body { }
background-color: #f9f9f9; </style>
font-family: "Times New Roman", sans- </head>
serif; <body>
margin: 30px; <div class="container">
} <h1>ABDULLAH AMIR</h1>
.container p {
font-size: 16px; <h2>About Me</h2>
line-height: 1.6; <p>Hello! I am a web developer and
color: #333333; also a web designer. Creating beautiful and
margin-bottom: 15px; functional websites. I love learning new
} skills and also doing creative things each
.container { day.</p>
background-color: #2ea8ee; <h2>Contact Information</h2>
padding: 20px; <p>Email: <a
border-radius: 10px; href="abdullahbinamir4993@[Link]">
max-width: 600px; abdullahbinamir4993@[Link]</a></
margin: 20px auto; p>
box-shadow: 2px 2px 10px
rgba(0,0,0,0.1); </div>
} </body>
/* Links styling */ </html>
a{
color: #eaecec;
Summary:

Task 1: Built lab4_task1.html using internal CSS to style the body, headings, and paragraphs
with custom colors, fonts, and layout improvements.

Task 2: Created lab4_task2.html (Abdullah Amir – 2023-CS-151) using an ID selector for

the main heading and class selectors for paragraphs and highlights, adding borders, text
effects, and font variations.

Task 3: Designed [Link] featuring personal details with group and descendant selectors,
link hover effects, and a styled container with padding, color, and rounded corners.

Here’s a completely rewritten and shorter **unique version** of your **Lab 05: Div-Based
Layouts Using Box Model and External CSS** — same meaning, fresh wording, and more
natural flow:

Lab 05: Div-Based Layouts with Box Model and External CSS
Objectives
 Understand how the CSS Box Model works.
 Build webpage layouts using div containers.
 Use external CSS for cleaner and reusable styling.
 Learn how margins, borders, padding, and dimensions affect layout design.

Concept Overview
Div-Based Layouts:
In modern web development, the `<div>` tag is the main container used to organize and
group webpage content.
It’s a block-level element, meaning it stretches across the page’s full width and always
begins on a new line.
A `<div>` can include many types of content, such as:
 Text and headings
 Images or icons
 Forms and input fields
 Other HTML elements

The CSS Box Model

Every HTML element acts like a box. The Box Model defines how that box’s size, space, and
border behave.
It includes four main parts:
1. Content: The actual text, images, or media inside the element.
2. Padding: Space between the content and the border — adds inner spacing.
3. Border: A visible outline around the element; can be solid, dotted, or dashed.
4. Margin: Space outside the border — separates elements from each other.

External CSS:
External CSS keeps the webpage clean by separating design from structure.
You write the CSS in a separate file (e.g., `[Link]`) and connect it to the HTML using the
<link> tag:
html
<link rel="stylesheet" href="[Link]">
This approach makes it easier to update or reuse styles across multiple webpages.
Abdullah [Link]:
<!DOCTYPE html>
<div id="main">
<html lang="en">
<div id="content">
<head>
<h2>Main Content</h2>
<meta charset="UTF-8">
<p>Hy My name is Abdullah
<meta name="viewport"
Amir. How loves to do something creative
content="width=device-width, initial-
and learning skills </p>
scale=1.0">
</div>
<title>Lab 05 - Div Layout</title>
<link rel="stylesheet" href="Abdullah
<div id="sidebar">
[Link]">
<h3>Sidebar</h3>
</head>
<p>Follow me on Instagram.</p>
<body>
<p>Follow me on X.</p>
<p>Follow me on Facebook.</p>
<div id="header">
<p>Message me on Whatsapp.
<h1>My Website</h1>
Here is my Number</p>
</div>
</div>
</div>
<div id="nav">
<ul>
<div id="footer">
<li><a href="#">Home</a></li>
<p>© 2025 Abdullah Amir
<li><a href="#">About</a></li>
Website. All rights reserved.</p>
<li><a href="#">Services</a></li>
</div>
<li><a href="#">Contact</a></li>
</ul>
</body>
</div>
</html>

Abdullah [Link]:
/* General body styling */ font-family: Arial, sans-serif;
body { background-color: #f8f8f8;
margin: 0; }
/* Header */ /* Main content and sidebar layout */
#header { #main {
background-color: #0b97e7; display: flex;
color: white; margin: 20px;
text-align: center; gap: 20px;
padding: 20px; }
}
/* Content area */
/* Navigation bar */ #content {
#nav { flex: 3;
background-color: #333; background-color: #fff;
} padding: 20px;
border: 1px solid #ccc;
#nav ul { border-radius: 8px;
list-style-type: none; }
margin: 0;
padding: 0; /* Sidebar */
overflow: hidden; #sidebar {
} flex: 1;
background-color: #f1f1f1;
#nav li { padding: 20px;
float: left; border: 1px solid #ccc;
} border-radius: 8px;
}
#nav li a {
display: block; /* Footer */
color: white; #footer {
padding: 14px 20px; background-color: #333;
text-decoration: none; color: white;
} text-align: center;
padding: 15px;
#nav li a:hover { margin-top: 20px;
background-color: #111; }
}
Explanation:
You set up the page structure by using separate <div> blocks for the header, navigation bar,
main content, sidebar, and footer.
Each part is placed in its own section so the page stays organized.
The main content and sidebar sit next to each other because of CSS floats.
The footer is pushed to the bottom with a clear rule so it doesn’t overlap.
All styling is moved to an external CSS file to keep the HTML clean.

Task 2: Style the Layout with External CSS and Box Model:
In the [Link] file, every <div> is styled using Box Model properties.
You control the layout by setting width, padding, borders, and margins.
Different background colors help you see how each section is spaced.
Extra text and font styling improves readability.
Changing padding and margin values helps you understand how spacing affects the page
layout.
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="Abdullah [Link]">
</head>
<body>

<div class="header">
<h1>My Website</h1>
</div>

<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div class="content">
<h2>Welcome to My Website</h2>
<p>External CSS allows designers to keep HTML separate from styling rules.</p>
</div>
<div class="sidebar">
<h3>Sidebar</h3>
<p>MNS-UET.</p>
</div>
<div class="footer">
© 2025 My Website. ABDULLAH AMIR.
</div>
</body>
</html>

[Link]:
/* General Reset */
body {
margin: 0;
font-family: Arial, sans-serif;
background: #ffffff;
}
/* Header */
.header {
background: #44a1f1;
color: white;
text-align: center;
padding: 20px 0;
}
/* Navigation Bar */
.navbar {
background: #4c75a0;
text-align: center;
padding: 10px 0;
}
.navbar a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
/* Main Content */
.content {
width: 65%;
float: left;
padding: 15px;
background: white;
border-right: 1px solid #ddd;
min-height: 160px; /* Short height */
}
/* Sidebar */
.sidebar {
width: 30%;
float: right;
padding: 15px;
background: #f2f2f2;
min-height: 160px; /* Short height */
}
/* Footer */
.footer {
clear: both;
background: #65adec;
color: white;
text-align: center;
padding: 15px;
margin-top: 10px;

Explanation:
The webpage uses divs for the header, navbar, main content, sidebar, and footer. The header
and navbar have dark blue backgrounds with centered text. Main content and sidebar sit side
by side, with content on the left and a light sidebar on the right. Padding and colors keep it
neat, and the footer clears floats. All styling is in external CSS for organization and easy
maintenance.
Task 3: Responsive Div-Based Layout:
Divide the page into a two-column layout one for content and one for sidebar.
 Use CSS float or flexbox to align divs side by side.
 Add a header and footer that stretch across the full width.
 Use external CSS classes to style similar elements consistently.
 Test your webpage in a browser to ensure the layout adjusts properly and looks neat.

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Div Layout</title>
<link rel="stylesheet" href="Abdullah [Link]">
</head>
<body>

<header class="main-header">
<h1>My Portfolio</h1>
</header>

<div class="content">
<h2>Main Content Area</h2>
<p>
Hy, My name is Abdullah Amir. I am a student of CS 2023. I love coding and
design
</p>
</div>

<aside class="sidebar">
<h3>Sidebar</h3>
<p>MNS UET.</p>
<p>CS.</p>
</aside>

</div>

<footer class="main-footer">
<p>© 2025 Abdullah Amir. All Rights Reserved.</p>
</footer>

</body>
</html>

[Link]:
body {
margin: 0;
font-family: "Poppins", sans-serif;
background: #faf7f2; /* very soft cream */
}

/* Header & Footer */

.main-header,
.main-footer {
background: #f2d6c3; /* pastel peach */
color: #3c4a4a; /* soft muted charcoal */
text-align: center;
padding: 18px 0;
border-bottom: 3px solid #e6c1ad;
}

.main-footer {
border-top: 3px solid #e6c1ad;
}

/* Page Layout */
.container {
display: flex;
gap: 22px;
padding: 25px;
}

/* Main Content */
.content {
flex: 3;
background: #ffffff;
padding: 20px;
border-radius: 8px;
border-left: 5px solid #f2d6c3;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
color: #4a4a4a;
}

/* Sidebar */
.sidebar {
flex: 1;
background: #e8f3f1; /* soft mint-teal */
padding: 20px;
border-radius: 8px;
border: 2px solid #c9e1de; /* very gentle teal-grey border */
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
color: #3f5050;
}
/* Responsive for Mobile */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

Summary:
Task 1:
The page layout was created using several div containers to organize each section.
Styling was handled through external CSS, where colors, spacing, and layout adjustments
were applied. Float properties placed the main content and sidebar next to each other, while
the footer stayed in place using clear. Keeping structure in HTML and design in CSS made
the code easier to maintain.

Task 2 External CSS & Box Model:

The box model was used to control spacing and proportions across the layout. Using box-
sizing: border-box ensured consistent sizing even with padding and borders. Each section was
assigned its own width, padding, margins, and background tone to improve readability.
Typography and link styles were refined for a cleaner appearance, and the box model helped
keep everything aligned.
Task 3:
Flexbox was applied to build a flexible two-column layout that adapts well on different
screens. Common styles were placed in reusable CSS classes for consistency. The layout
automatically reorganizes on smaller devices, making it responsive and easy to navigate.

Lab 06: CSS Positioning and Dropdown Menu

Objectives
 Learn various CSS positioning methods and their practical applications.
 Control the exact placement of elements on a webpage.
 Build a responsive and interactive dropdown navigation menu using HTML and CSS.
 Improve skills in webpage layout management and user interface design.

Concept Overview
CSS positioning controls where elements appear on a webpage and how they interact with
other elements.
The main types include:
Static: Default positioning; elements follow the normal flow of the page.
Relative: Moves the element relative to its normal position using top, bottom, left, or right.
Absolute: Places the element relative to the nearest positioned ancestor, or the page if none
exists.
Fixed: Keeps the element in a fixed spot on the screen, visible even while scrolling.

Dropdown Menu:
A dropdown menu allows users to select from a hidden list that appears on hover or click.
It is commonly used in website navigation bars to organize links neatly and improve user
experience.

Tools Used:
Text Editor: Visual Studio Code
Browser: Google Chrome
Languages: HTML5 and CSS3

Task 1: Exploring CSS Positioning

1. Create a new folder named Lab06_Positioning.

2. Inside it, make two files: [Link] and [Link].
3. In [Link], add four <div> elements labeled Static, Relative, Absolute, and Fixed.
4. Link the external CSS file to the HTML using the <link> tag.
5. Apply different positioning styles to each box and use colors and borders to clearly
see how they behave.
6. Test the layout in a browser, observing how relative and absolute positioning affect
placement, and how fixed elements stay visible during scrolling.
Abdullah [Link]:
<!DOCTYPE html> <div class="box fixed">Fixed</div>
<html lang="en"> 
<head> <div class="dropdown">
<meta charset="UTF-8"> <button
class="dropbtn">Menu</button>
<meta name="viewport"
content="width=device-width, initial- <div class="dropdown-content">
scale=1.0">
<a href="#">Home</a>
<title>Lab 06 - CSS Positioning &
<a href="#">About</a>
Dropdown</title>
<a href="#">Services</a>
<link rel="stylesheet" href="[Link]">
<a href="#">Contact</a>
</head>
</div>
<body>
</div>
<h1>CSS Positioning Examples</h1>

<p>Scroll down to see how the fixed
<div class="box static">Static</div>
box stays in place while other boxes
 move.</p>
<div class="box <div style="height: 600px;"></div> 

<div class="box </body>
absolute">Absolute</div>
</html>

Abdullah [Link]:
body { width: 150px;
font-family: Arial, sans-serif; height: 80px;
margin: 20px; margin: 15px 0;
} padding: 10px;
color: white;
/* Box styling for positioning */ font-weight: bold;
.box { text-align: center;
line-height: 60px;
border-radius: 5px; /* Dropdown Menu */
} .dropdown {
position: relative;
/* Positioning examples */ display: inline-block;
.static { margin-top: 40px;
position: static; }
background-color: #4CAF50;
} .dropbtn {
background-color: #333;
.relative { color: white;
position: relative; padding: 12px 20px;
top: 20px; font-size: 16px;
left: 30px; border: none;
background-color: #2196F3; cursor: pointer;
} border-radius: 4px;
}
.absolute {
position: absolute; .dropdown-content {
top: 100px; display: none;
right: 50px; position: absolute;
background-color: #FF5722; background-color: #f9f9f9;
} min-width: 140px;
box-shadow: 0px 8px 16px
rgba(0,0,0,0.2);
.fixed {
z-index: 1;
position: fixed;
border-radius: 4px;
bottom: 20px;
}
right: 20px;
background-color: #9C27B0;
.dropdown-content a {
}
color: black;
padding: 10px 14px; display: block;
text-decoration: none; }
display: block; .dropdown:hover .dropbtn {
} background-color: #555;
}
.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {

Explanation:

 Four <div> boxes demonstrate static, relative, absolute, and fixed positioning.
 Static: Follows normal page flow.
 Relative: Moves from its original position without affecting other elements.
 Absolute: Positioned relative to the nearest positioned ancestor.
 Fixed: Stays visible even when scrolling.

Task 2: Creating a Fixed Top Navigation

1. Add a navigation section at the top using <nav> or <div>.

2. Apply fixed positioning so it stays visible while scrolling the page.
3. Include menu links like Home, About, Services, Contact.
4. Style the bar with background color, spacing, and hover effects for a polished
appearance.
5. Add enough content below to verify the fixed position works correctly.

Abdullah [Link]: <div class="content">

<!DOCTYPE html>
<h1>Welcome to My Portfolio</h1>
<html lang="en">
<p>Hy my name is Abdullah Amir. I
<head> love coding and creative things like
learning new skills and implementing
<meta charset="UTF-8"> something new </p>

<meta name="viewport" <p>Scroll down to the bottom see

content="width=device-width, initial- how the navigation bar remains fixed at
scale=1.0"> the top of the page while content
moves.</p>
<title>Lab 06 - Fixed Navigation</title>
<div style="height: 1000px;"></div>
<link rel="stylesheet" href="Abdullah 
[Link]">
</div>
</head>
</body>
<body>
</html>

<nav class="navbar">
Abdullah [Link]:
<ul>
/* General body styling */
<li><a href="#">Home</a></li>
body {
<li><a href="#">About</a></li>
margin: 0;
<li><a href="#">Services</a></li>
font-family: Arial, sans-serif;
<li><a href="#">Contact</a></li>
}
</ul>

</nav>
/* Fixed Navigation Bar */
.navbar { .navbar a {

position: fixed; color: white;

top: 0; text-decoration: none;

width: 100%; font-size: 16px;

background-color: #333; padding: 8px 12px;

padding: 12px 0; transition: background-color 0.3s;

z-index: 1000; }

.navbar ul { .navbar a:hover {

list-style-type: none; background-color: #555;

margin: 0; border-radius: 4px;

padding: 0; }

display: flex;

justify-content: center; /* Content below navbar */

} .content {

.navbar li { margin-top: 70px; /* Offset for fixed

navbar */
margin: 0 20px;
padding: 20px;
}
}
Explanation:
A <nav> element with menu items is fixed at the top using position: fixed.
Background color, padding, and hover effects make it visually appealing.
Scrolling content demonstrates that the bar remains visible.

Task 3: Implementing a Dropdown Menu

1. Add a “Services” link inside your navigation bar.

2. Nest a hidden list (<ul> and <li>) under “Services” with sub-items like Web Design,
Web Development, SEO.
3. Use CSS :hover to reveal the dropdown when the user hovers over “Services.”
4. Include smooth transitions for a sleek dropdown effect.
5. Test in the browser to ensure the dropdown works correctly and remains responsive.

Abdullah .html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 06 - Positioning & Dropdown</title>
<link rel="stylesheet" href="Abdullah [Link]">
</head>
<body>

<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>

<li class="dropdown">
<a href="#">Services</a>
<ul class="dropdown-content">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<div class="content">
<h1>Welcome to Our Website</h1>
<p>Scroll down to observe fixed positioning and interact with the dropdown menu
under Services.</p>
<div style="height: 800px;"></div>
</div>
</body>
</html>

[Link]:
/* General Body */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Fixed Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
padding: 12px 0;
z-index: 1000;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.navbar li {
position: relative; /* Required for dropdown positioning */
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 8px 12px;
display: block;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #555;
border-radius: 4px;
}
/* Dropdown Menu */
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
min-width: 160px;
border-radius: 4px;
overflow: hidden;
transition: all 0.3s ease;
}
.dropdown-content li a {
padding: 10px 14px;
color: white;}
.dropdown-content li a:hover {
background-color: #666;}
.dropdown:hover .dropdown-content {
display: block; }
/* Content Below Navbar */
.content {
margin-top: 60px; /* Offset for fixed navbar */ padding: 20px;}

Task 3:
The “Services” menu has a hidden list (<ul> and <li>) that appears on hover using CSS.
Smooth transitions improve user experience.
Links inside the dropdown highlight on hover for clarity and interactivity.

Summary – Combined Lab 06:

Positioning: Learned and visualized static, relative, absolute, and fixed positions.
Fixed Navbar: Created a top navigation that remains visible while scrolling.
Dropdown Menu: Added interactive sub-menu items under “Services” using hover effects.
CSS Skills Gained: External styling, box model understanding, precise element placement,
interactive menus, and layout control.

Lab 07 – CSS3 Visual Effects (Shadows, Gradients, Transitions):

Introduction:
This lab focuses on CSS3 features that help make modern webpages look polished and
interactive without relying on images or JavaScript. You will work with shadows, gradients,
and transitions to create smooth visual effects and improved UI elements.
These CSS3 properties allow designers to add depth, motion, and color blending using only
code.

Theoretical Overview
1. Shadows:
CSS3 provides two main types of shadow effects:
Text Shadow: Adds colored or blurred shadows behind text.
Box Shadow: Creates soft, lifted, or glowing effects around elements like cards or
containers.

2. Gradients:
Gradients blend multiple colors smoothly and remove the need for background images.
Linear Gradient: Color flow happens in a straight direction (vertical, horizontal, diagonal).
Radial Gradient: Colors spread outward from a center point.

3. Transitions:
Transitions allow CSS properties to animate smoothly when the user interacts with an
[Link] can transition color changes, size adjustments, rotations, or hover effects.

Tools Used:
VS Code
Chrome / Edge
HTML5 + CSS3

Lab Tasks
Task 1 – Working With Shadows:
You will create headings and boxes, then apply different shadow styles to produce depth and
3D effects.

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab 07 - CSS Shadows</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1 class="shadow-title">CSS3 Shadow Effects</h1>
<h2 class="soft-text">Soft Text Shadow Example</h2>
<div class="card basic-shadow">
Simple box shadow applied to this container.
</div>
<div class="card glow-shadow">
Glowing shadow effect using multiple layers.
</div>
</body>
</html>
[Link]:
body {
font-family: Arial, sans-serif;
padding: 30px;
}
/* Text Shadows */
.shadow-title {
font-size: 40px;
text-shadow: 3px 3px 8px rgba(0,0,0,0.4);
}
.soft-text {
text-shadow: 1px 1px 4px #888;
}
/* Box Shadows */
.card {
width: 300px;
padding: 20px;
margin: 20px 0;
background: #fafafa;
border-radius: 8px;
}
/* Basic Shadow */
.basic-shadow {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* Glowing Multiple Shadow Effect */
.glow-shadow {
box-shadow:
0 0 10px #7f5cff,
0 0 20px #7f5cff,
0 0 30px #7f5cff;}

Task 1 Explanation:

Text shadows are applied with different blur levels and offsets.
Box shadows range from soft elevation to glowing neon effects.
Multiple shadows create a 3D or luminous look.

Task 2 – Creating Gradient Backgrounds:

You will apply colorful gradients to buttons, headers, and sections using linear and radial
patterns.

[Link]:
Html is same as the task 1
[Link]:
body {
font-family: Arial, sans-serif;
padding: 30px;
}
/* Linear Gradient Header */
.header-gradient {
padding: 25px;
text-align: center;
font-size: 26px;
color: white;
background: linear-gradient(to right, #ff512f, #dd2476, #4b2cf1);
border-radius: 8px;
}
/* Button Gradient */
.btn-gradient {
padding: 12px 30px;
border: none;
margin-top: 20px;
cursor: pointer;
color: white;
border-radius: 6px;
background: linear-gradient(to bottom, #1e9600, #fff200, #ff0000);
}

/* Radial Gradient Box */

.radial-box {
width: 300px;
height: 150px;
margin-top: 25px;
border-radius: 10px;
background: radial-gradient(circle, #0cebeb, #20e3b2, #29ffc6);
}

Task 2 Explanation:
A linear gradient creates smooth color flow across the header.
A button is styled with three color stops for a professional look.
A radial gradient produces a circular blended color effect.

Task 3 – Adding Transitions:

Here you add buttons or cards that animate when the user moves the mouse over them

[Link]:
Html is same as the task 1
[Link]:
/* Transition Button */
.transition-btn {
padding: 12px 25px;
background: #3498db;
color: white;
border: none;
border-radius: 6px;
transition: all 0.4s ease;
cursor: pointer;
display: inline-block;
margin-top: 20px;
}
.transition-btn:hover {
background: #2ecc71;
transform: scale(1.1);
border-radius: 20px;
}
/* Transition Card */
.transition-card {
width: 300px;
padding: 20px;
margin-top: 30px;
background: #f0f0f0;
border-radius: 8px;
transition: box-shadow 0.5s, transform 0.5s;
}
.transition-card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
transform: translateY(-10px);
}

Task 3 Explanation:
The button changes color, size, and shape smoothly on hover.
The card lifts up and gains a stronger shadow, creating a floating effect.
transition-duration and timing-function make the animations smooth.

Final Lab Summary:

This lab introduced essential CSS3 visual features that improve the overall design quality of a
webpage. You learned to:
Create different text and box shadow effects for depth and emphasis.
Use linear and radial gradients to build modern background styles without images.
Apply transitions to animate elements on hover, making the interface feel active and
engaging.

Lab 08: Accessing and Modifying CSS Dynamically with

JavaScript
Objectives:
• See how JavaScript works with CSS to change the appearance of a webpage in real time.
• Learn how to reach HTML elements through the DOM and update their styling.
• Understand event-based styling, where the design reacts to user actions.
• Build small interactive examples using HTML, CSS, and JavaScript together.

Concept Overview:
Normally, CSS handles static design. Colors, spacing, and fonts stay the same unless the page
reloads. JavaScript adds flexibility by allowing style changes while the page is running. This
is done through the DOM, which gives JavaScript access to every element on the page.

With JavaScript, you can:

• Select elements using methods such as getElementById(), getElementsByClassName(), or
querySelector().
• Change CSS properties like background color, text color, font size, spacing, or visibility.
• Add or remove CSS classes to apply different styles instantly.
• React to user events such as clicks, mouse movements, or key presses to create interactive
visual effects.

For example, clicking a button can switch its background color, or hovering over a paragraph
can increase its font size. These changes happen immediately because JavaScript is
modifying the CSS in response to the user.

Tools Used:
• Text Editor: Visual Studio Code
• Browser: Google Chrome or Microsoft Edge
• Languages: HTML5, CSS3, JavaScript (ES6)

LAB TASK:
Task 1: Updating CSS Styles with JavaScript:
 Start by creating a new project folder and name it “Lab08_JS_CSS”.
 Add three files inside this folder: [Link], [Link], and [Link].
 In the HTML file, place a heading, a short paragraph, and a button on the page.
 Write a JavaScript function that will change the text color and font size as soon as the
user clicks the button.
 Run the page in your browser and watch how the style updates immediately without a
reload.
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 08 JS + CSS</title>
<link rel="stylesheet" href="Abdullah [Link]">
</head>
<body>
<h1 id="mainHeading">Welcome to Dynamic Styling</h1>
<p id="textPara">This text will change when you click the button.</p>
<button id="styleBtn">Change Style</button>
<script src="Abdullah [Link]"></script>
</body>
</html>
[Link]:
body {font-family: Arial, sans-serif;
padding: 20px;}
#styleBtn { padding: 10px 18px;
cursor: pointer;}
[Link]:
[Link]("styleBtn").addEventListener("click", function () {
const heading = [Link]("mainHeading");
const para = [Link]("textPara");
[Link] = "Teal";
[Link] = "36px";
[Link] = "brown";
[Link] = "22px";});
Task 2: Adding and Removing CSS Classes:
 Open your [Link] file and create two separate classes, such as. theme-light and
.theme-dark, each with its own color style.
 Add a new button in your HTML page with the label “Switch Theme”.
 In your JavaScript file, write code that switches between the two classes whenever the
button is pressed.
 Load the page and check if the background and text colors shift smoothly when you
click the button.
 This gives you a basic idea of how websites create light and dark mode experiences.
Lab 8 task [Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Toggle Example</title>
<link rel="stylesheet" href="Abdullah [Link]">
</head>
<body id="pageBody" class="theme-light">

<h1>Theme Toggle Demo</h1>

<p>Click the button below to switch between light and dark mode.</p>
<button id="toggleThemeBtn">Switch Theme</button>
<script src="Abdullah [Link]"></script>
</body>
</html>
Lab 8 task [Link]:
body {
font-family: Arial, sans-serif;
padding: 20px;
transition: background 0.3s ease, color 0.3s ease;
}
/* Light mode style */
.theme-light {
background: #05447e;
color: #4392c0;}
/* Dark mode style */
.theme-dark {
background: #610303;
color: #d34d4d;}
button {
padding: 10px 16px;
cursor: pointer;}
lab 8 task 2 js:
[Link]("toggleThemeBtn").addEventListener("click", function () {
const page = [Link]("pageBody");
// Toggle between the two theme classes
if ([Link]("theme-light")) {
[Link]("theme-light");
[Link]("theme-dark");
} else {
[Link]("theme-dark");
[Link]("theme-light");}});
Explanation:
 The HTML file starts with the body set to theme-light, which means the page loads in
light mode.
 Two classes are defined in the CSS file: one for light mode, one for dark mode. Each
has its own background and text colors.
 The JavaScript listens for a click on the Switch Theme button.
 When the button is pressed, JavaScript checks which class the body currently has.
 It removes the active class and applies the other one, switching between light and dark
mode instantly.
 The transition property in CSS adds a smooth fading effect.

Task 3: Dynamic Styling Using Events:

1. Add several boxes or buttons to your webpage.

2. Use JavaScript event listeners like mouseover, mouseout, or click to change their
appearance when users interact.
3. For example, you can make the background color change when the mouse hovers over
a box and revert it when the mouse leaves.
4. Include a transition in CSS so the style changes happen smoothly.
5. Run the page and see how user actions instantly affect the design.

Lab 8 task [Link]:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Interactive Boxes</title>

<link rel="stylesheet" href="lab 8 task [Link]">

</head>

<body>

<h1>Interactive Boxes Demo</h1>

<div class="box" id="box1">Box 1</div>

<div class="box" id="box2">Box 2</div>

<div class="box" id="box3">Box 3</div>

<script src="lab 8 task [Link]"></script>

</body>

</html>
lab 8 task [Link]:
body {

font-family: Arial, sans-serif;

padding: 20px;}

.box {

width: 150px;

height: 150px;
margin: 15px;

display: inline-block;

background-color: #f0f0f0;

line-height: 150px;

text-align: center;

font-weight: bold;

cursor: pointer;

transition: background-color 0.3s ease, transform 0.3s ease;}

.box:hover {

transform: scale(1.05); /* slight zoom effect on hover */}

lab 8 task [Link]:

// Select all boxes

const boxes = [Link](".box");

// Loop through each box and attach event listeners

[Link](box => {

[Link]("mouseover", function() {

[Link] = "blue"; // change background on hover

});

[Link]("mouseout", function() {

[Link] = "#f0f0f0"; // reset background when mouse leaves

});

[Link]("click", function() {

alert(`${[Link]} clicked!`); // optional click action

});

Explanation:
Dynamic Text Styling:
Clicking “Change Text Style” updates the heading and paragraph colors and font sizes
instantly.

Theme Toggle:
Clicking “Switch Theme” toggles between light and dark mode.
Smooth background and text color transitions are applied.

Interactive Boxes:
Each of the three boxes changes to a different color on hover.
Hover effect includes a slight zoom for better visual feedback.
Clicking any box shows an alert with its name.
Summary:
You created a webpage that shows how CSS and JavaScript work together for dynamic
styling. First, you made a button that changes the text color and font size instantly through
JavaScript. After that, you built two themes and used a theme switch button to toggle their
CSS classes, giving a light and dark mode effect. Finally, you added multiple interactive
elements and used events like hover and click to change their styles, with transitions to keep
everything smooth and responsive.

Lab 09: Interacting with the DOM: Selecting Elements and

Handling Events:
Objectives:
 Understand how the DOM represents the structure of a webpage.
 Learn different ways to select and update HTML elements through JavaScript.
 Explore how webpages react to user actions such as clicking, hovering, or typing.
 Build pages that update and respond instantly without reloading.

DOM (Document Object Model):

 When a webpage loads, the browser converts the HTML into a tree-like model.
 Every tag, piece of text, or component becomes a node that JavaScript can access.
 By using DOM manipulation, JavaScript can change content, styles, and attributes on
the fly.
 This allows webpages to update immediately based on user interaction.

Common DOM Selection Methods:

1. getElementById()
Selects a specific element using its ID.
2. getElementsByClassName()
Returns all elements that share the same class.
3. getElementsByTagName()
Selects elements by their tag, such as <p> or <button>.
4. querySelector()
Picks the first element that matches a CSS selector.
5. querySelectorAll()
Selects all elements matching a CSS selector.
DOM Manipulation:
 You can replace text, update colors, and adjust font sizes.
 JavaScript can also change attributes like src, href, or value.
 All changes appear instantly without refreshing the page.

Event Handling:
 JavaScript detects user actions and calls functions in response.
 Popular events include click, mouseover, mouseout, keydown, and submit.
 Events make the page feel interactive and dynamic.

Tools Used:
 Visual Studio Code for writing code.
 Google Chrome / Microsoft Edge for testing the output.
 HTML, CSS, JavaScript for structure, styling, and functionality.

Task 1:
1. Create a new folder named "Lab09_DOM" to store the project files.
2. Inside the folder, add three files: [Link], [Link], and [Link].
3. Add several basic elements in the HTML file such as headings, paragraphs, and a
button.
4. Use different DOM selection methods inside JavaScript to target these elements.
5. When the page loads, update the text, background color, and font size of selected
elements.
6. Notice how these updates appear immediately because JavaScript interacts directly
with the DOM.
[Link]:
<!DOCTYPE html>
<html>
<head>
<title>Lab 09 DOM</title>
<link rel="stylesheet" href="lab 9 task [Link]">
</head>
<body>
<h1 id="header">Original Heading</h1>
<p class="para">My name is Abdullah.</p>
<p class="para">This is My code.</p>
<button id="btn">Change Heading Color</button>
<script src="lab 9 task [Link]"></script>
</body>
</html>
[Link]:
body {
font-family: Arial, Helvetica, sans-serif;}
[Link]:
// Selecting elements
const header = [Link]("header");
const paragraphs = [Link]("para");
const button = [Link]("#btn");
// Apply changes when the page loads
[Link] = () => {
[Link] = "DOM Manipulation Example";
[Link] = "skyblue";
[Link] = "32px";
paragraphs[0].textContent = "This text was updated using class selection.";
paragraphs[1].[Link] = "purple";
};
// Extra action on button click
[Link]("click", () => {
[Link] = "purple";
});
Explanation:
You create a folder with three files: HTML, CSS, and JavaScript.
The HTML page has headings, paragraphs, and buttons.
In JavaScript, you select these elements using methods like getElementById, querySelector,
and others.
When the page loads, the script changes text, colors, and font sizes so you can see how the
DOM updates elements directly.

Task 2:

1. Add several buttons to your HTML page with labels such as "Change Color",
"Change Text", and "Hide Element".
2. Inside your JavaScript file, create separate functions that react when each button is
pressed.
3. Each button should perform a different action, for example:
 The Change Color button updates the background color of a paragraph.
 The Change Text button replaces the text inside a heading.
 The Hide Element button toggles the visibility of a chosen element.
4. Use the addEventListener() method to attach the click events, which keeps the code
structured and easy to maintain.
5. Test each button to see how clicking triggers instant changes on the webpage.
[Link]:
<!DOCTYPE html>
<html>
<head>
<title>Task 2 - Click Events</title>
<link rel="stylesheet" href="lab 9 task [Link]">
</head>
<body>
<h2 id="title2">Click Event Demonstration</h2>
<p id="box">My name is Abdullah.</p>
<div class="button-row">
<button id="btnColor">Change Background</button>
<button id="btnText">Change Heading Text</button>
<button id="btnHide">Toggle Visibility</button>
</div>
<script src="lab 9 task [Link]"></script>
</body>
</html>
[Link]:
// Selecting elements
const heading = [Link]("title2");
const paragraph = [Link]("box");
const btnColor = [Link]("btnColor");
const btnText = [Link]("btnText");
const btnHide = [Link]("btnHide");
// Change paragraph background color
[Link]("click", () => {
[Link] = "#6f966fff";
});
// Change heading text
[Link]("click", () => {
[Link] = "Hy i am Changed!";
});
// Hide or show the paragraph
[Link]("click", () => {
if ([Link] === "none") {
[Link] = "block";
[Link] = "Hide Element";
} else {
[Link] = "none";
[Link] = "Show Element";}});
[Link]:
body {
font-family: Arial, sans-serif;
padding: 20px;}
#box {
padding: 12px;
background-color: #f5eeee;
margin-bottom: 20px;
border-radius: 5px;}
.button-row button {
padding: 10px 14px;
margin-right: 8px;
cursor: pointer;}
Explanation:
You add buttons such as Change Color, Change Text, and Hide Element.
Each button triggers a different function when clicked.
You use addEventListener to attach these actions cleanly.
This shows how clicks can change styles, update text, or hide parts of the page.
Task 3:
1. Add an input box and a button labeled *"Show Greeting"* to the page.
2. When the user types their name and clicks the button, your JavaScript should display
a personalized greeting.
3. Use the value property to collect whatever the user typed in the input field.
4. Use textContent or innerHTML to display the greeting message on the page.
5. Add simple CSS to style the input, button, and greeting to make the interface look
clean and pleasant.
6. This shows how user input and DOM manipulation work together to create real,
interactive features.

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeting App</title>
<link rel="stylesheet" href="lab 9 task [Link]">
</head>
<body>
<h2>Greeting App</h2>
<input id="nameInput" type="text" placeholder="Enter your name">
<button id="showBtn">Show Greeting</button>
<p id="greeting"></p>
<script src="lab 9 task [Link]"></script>
</body>
</html>
[Link]:
body {
font-family: Arial, sans-serif;
padding: 40px;}
input {
padding: 8px 10px;
font-size: 16px;
margin-right: 8px;}
button {
padding: 9px 14px;
font-size: 16px;
cursor: pointer;}
#greeting {
margin-top: 20px;
font-size: 20px;
color: #252121;}
[Link]:
const btn = [Link]("showBtn");
const input = [Link]("nameInput");
const greetingBox = [Link]("greeting");
[Link]("click", function () {
const name = [Link]();
if (name === "") {
[Link] = "Please type your name.";
return;}
[Link] = "Hello " + name + "! Nice to see you.";});

Explanation:
You create an input box and a Show Greeting button.
The script reads the user’s name with the value property and displays a greeting using
innerHTML or textContent.
Simple styling makes the form look better.
This demonstrates how user input and events work together.

Summary:
Across these tasks you work with the most important parts of the DOM.
You start by selecting elements and changing their text, colours, and sizes, which helps you
understand how JavaScript controls the content of a page.
Then you move to event handling, where buttons respond to clicks and trigger different
updates, showing how users can interact with the page in real time.
Finally, you connect input fields with output, letting users type information and see
personalized results. Together, these steps give you a solid foundation in building interactive
pages that react to user actions and update themselves through JavaScript.
Lab 10: Title: Creating Animations and Interactive Elements with
DOM Methods
Objectives
• Understand how to use JavaScript DOM methods to create animation effects.
• Learn how to control an element’s position, size, and opacity through dynamic style
changes.
• Create interactive visual behavior that responds to user clicks and actions.
• Practice using timing tools such as setInterval() and setTimeout().

Concept Overview
Adding motion to elements on a webpage makes the experience more lively and interactive.
With the DOM, JavaScript can update an element’s style while the page is running. By
repeatedly adjusting properties like left, top, width, or opacity, you can create smooth
animation effects.
JavaScript provides timing functions that help run code at specific intervals:
• setInterval() runs a block of code again and again after a fixed delay.
• setTimeout() runs code once after a given time.
• You can also activate CSS transitions by changing classes or styles with JavaScript.
These tools let you animate elements without relying on external libraries.

Tools Used
• Editor: Visual Studio Code
• Browser: Google Chrome
• Languages: HTML, CSS, JavaScript

Task 1: Horizontal Box Movement Animation

 Create a square div and give it a simple design using CSS.
 Write JavaScript that continuously shifts the box to the right using setInterval().
 Add two buttons: one to begin the movement and the other to stop it.
 Watch how the box’s left position updates inside the DOM while it moves.
[Link]:
<!DOCTYPE html>
<html>
<head>
<title>Moving Box Animation</title>
<link rel="stylesheet" href="lab 10 task [Link]">
</head>
<body>
<div id="box"></div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<script src="lab 10 task [Link]"></script>
</body>
</html>
[Link]:
#box {
width: 80px;
height: 80px;
background-color: rgb(10, 67, 236);
position: absolute;
left: 0;
top: 80px;
border-radius: 8px;}
button {
margin-top: 200px;
padding: 10px 16px;
font-size: 14px;}
[Link]:
let box = [Link]("box");
let startBtn = [Link]("startBtn");
let stopBtn = [Link]("stopBtn");

let position = 0;
let animationId = null;

[Link]("click", function () {
if (animationId === null) {
animationId = setInterval(moveBox, 10);
}
});

[Link]("click", function () {
clearInterval(animationId);
animationId = null;
});

function moveBox() {
position += 2;
[Link] = position + "px";

if (position > [Link] - 100) {

position = 0;}}
Task 2: Interactive Image Resizer

1. Place an image on the webpage for users to work with.

2. Create two buttons labeled “Increase Size” and “Decrease Size.”
3. Use DOM manipulation to change the image’s width and height while the page is
running.
4. Add a gentle resize animation so the image grows or shrinks smoothly.

[Link]:
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="lab 10 task [Link]">

</head>

<body>

<h2>Interactive Image Resizer</h2>

<img id="photo" src="C:\Users\HP\Pictures\Saved Pictures\[Link]" alt="Sample

Image">

<button id="growBtn">Increase Size</button>

<button id="shrinkBtn">Decrease Size</button>

</div>

<script src="lab 10 task [Link]"></script>

</body>

</html>

[Link]:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
padding-top: 40px;}
.container {
text-align: center;}
#photo {
width: 200px;
height: auto;
transition: width 0.3s ease;}
button {
padding: 8px 14px;
margin: 10px;
cursor: pointer;
font-size: 15px;}
[Link]:
const img = [Link]('photo');
const grow = [Link]('growBtn');
const shrink = [Link]('shrinkBtn');
[Link]('click', () => {
let current = [Link];
[Link] = current + 20 + "px";
});
[Link]('click', () => {
let current = [Link];
if (current > 60) {
[Link] = current - 20 + "px";}});

Explanation:
In this task you place an image on the page and connect two buttons to it. When the Increase
button is pressed, the JavaScript code raises the image width by a small amount. Pressing the
Decrease button does the opposite, but only until the image reaches a reasonable minimum.
The CSS uses a transition so the size change looks smooth instead of instantly jumping. This
lets you resize the image interactively in a gradual and clean way.

Task 3: Fading Text Effect

1. Add a paragraph to the page and include any short text inside it.
2. Use setInterval() to slowly lower the text’s opacity from fully visible to completely
transparent.
3. After it fades out, bring the opacity back up so the text becomes visible again,
repeating this cycle continuously.
4. Use a mix of style updates and timing functions to keep the fade transition smooth
and steady.

[Link]:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lab 10 task [Link]">
</head>
<body>
<p id="fadeText">Hy, It is Abdullah Amir.</p>
<script src="lab 10 task [Link]"></script>
</body>
</html>
[Link]:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
padding-top: 60px;}
#fadeText {
font-size: 22px;
opacity: 1;
transition: opacity 0.3s ease;}
[Link]:
let text = [Link]("fadeText");
let opacity = 1;
let fadingOut = true;
setInterval(() => {
if (fadingOut) {
opacity -= 0.02;
if (opacity <= 0) {
opacity = 0;
fadingOut = false;}
} else {
opacity += 0.02;
if (opacity >= 1) {
opacity = 1;
fadingOut = true;}}
[Link] = opacity;}, 30);

Explanation:
In this activity you add a paragraph to the page and then use JavaScript to shift its opacity up
and down. The setInterval() function runs repeatedly, slowly lowering the opacity until the
text becomes invisible. Once it reaches zero, the code increases the opacity again, making the
text appear. The CSS transition helps keep the fade motion smooth instead of sharp. This
loop creates a continuous fade-out and fade-in effect.

Summary:
In these exercises, you first create a colored box that moves horizontally across the screen
using setInterval(), controlled with Start and Stop buttons, showing live position changes in
the DOM. Next, you place an image with “Increase Size” and “Decrease Size” buttons, using
JavaScript to dynamically adjust its width while CSS transitions make the resizing smooth.
Finally, you add a paragraph whose opacity is gradually changed in a loop with setInterval(),
creating a continuous fade-out and fade-in effect, with CSS transitions ensuring the text fades
smoothly.

Lab 11: Title: Designing Responsive Pages Using Bootstrap

Framework

Objectives:
Gain a foundational understanding of the Bootstrap framework.
Learn how to use the grid system to build layouts that adapt to different screen sizes.
Utilize pre-designed Bootstrap components to craft visually appealing web pages.
Develop webpages that automatically adjust their layout across desktops, tablets, and mobile
devices.

Theoretical Overview:
Bootstrap is an open-source CSS toolkit that allows developers to create responsive, mobile-
friendly websites efficiently. It offers pre-styled elements, layouts, and components such as
buttons, navigation bars, forms, modals, and cards.
The Bootstrap Grid System splits a webpage into 12 columns, making it easy to align and
resize content for various devices.
Using Bootstrap minimizes the need for extensive custom CSS and ensures a consistent,
polished look across all screen sizes.

Tools and Technologies:

Code Editor: Visual Studio Code
Web Browser: Google Chrome
Framework: Bootstrap 5
Languages: HTML5, CSS3

Task 1: Simple Responsive Bootstrap Layout

Set up a new HTML page and include the Bootstrap 5 CDN link.
Design a flexible layout with a header, two side-by-side sections, and a footer using the grid
system.
Apply Bootstrap classes like .container, .row, and .col-md-* to organize content.
Test responsiveness by adjusting the browser size and seeing how the layout adapts.

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Layout Example</title>

<link href="[Link]
rel="stylesheet">
<link rel="stylesheet" href="lab 11 task [Link]">
</head>
<body>
<div class="container">
<header class="bg-primary text-white text-center p-3">
<h1>My Responsive Page</h1>
</header>
<div class="row my-3">
<div class="col-md-8 bg-light p-3">
<p>Abdullah Amir</p>
</div>
<div class="col-md-4 bg-secondary text-white p-3">
<p>Designer </p>
</div>
</div>
<footer class="bg-dark text-white text-center p-3">
<p>Footer Section</p>
</footer>
</div>
</body>
</html>

[Link]:
body {
font-family: Arial, sans-serif;}
header, footer {
border-radius: 5px;}
.row > div {
border-radius: 5px;}

Explanation
In this exercise, a new HTML page is created with the Bootstrap 5 framework linked via
CDN. The layout includes a header at the top, two columns in the middle (a main content
area and a sidebar), and a footer at the bottom. The .container class keeps the content
centered, .row defines horizontal groups of columns, and .col-md-* sets the column widths
for medium and larger screens. When you resize the browser, the columns stack
automatically on smaller screens, demonstrating Bootstrap’s responsive grid system.

Task 2
Create a simple top navigation menu using Bootstrap. Include links for Home, About, and
Contact. Apply Bootstrap color utilities to adjust the look, and make sure the menu turns into
a collapsible toggle button on smaller screens.
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar</title>
<link href="[Link]
rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-dark custom-nav">
<div class="container">
<a class="navbar-brand text-white" href="#">Abdullah Amir</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-white" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="[Link]
script>
</body>
</html>

Explanation:
This navigation bar uses Bootstrap’s built-in navbar component. The navbar-expand-lg class
makes the menu collapse on smaller screens and expand normally on larger devices. The
links for Home, About, and Contact are placed inside a ul aligned to the right. The
background is set using Bootstrap’s bg-dark, and text colors are kept white for contrast. The
CSS adds a light hover effect and bolds the site title.

Task 3:
Build a responsive section that displays cards using Bootstrap. Each card should show an
image, a title and a short description. Arrange the cards in a row that adjusts nicely on
different screen sizes.

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Cards</title>
<link href="[Link]
rel="stylesheet">
</head>
<body>
<div class="container my-5">
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<img src="C:\Users\HP\Pictures\Saved Pictures\[Link]" class="card-img-top"
alt="Image 1">
<div class="card-body">
<h5 class="card-title">Info</h5>
<p class="card-text">Hy My name is Abdullah Amir.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<img src="C:\Users\HP\Desktop\CV and works\best [Link]" class="card-img-
top" alt="Image 2">
<div class="card-body">
<h5 class="card-title">Work</h5>
<p class="card-text">Here is the design i made recently for my client.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<img src="C:\Users\HP\Desktop\CV and works\Work\[Link]" class="card-img-top"
alt="Image 3">
<div class="card-body">
<h5 class="card-title">Work</h5>
<p class="card-text">An Ai thmubnail i made for my client for his Youtube
video.</p>
</div>
</div>
</div>
</div>
</div>
<script src="[Link]
script>
</body>
</html>
Explanation:
This layout uses Bootstrap’s grid system to place the cards in three equal columns on desktop.
Each card includes an image, a title and a short paragraph. The row and col-md-4 classes
allow the cards to stack automatically on smaller screens like tablets and phones. The
optional CSS only makes sure images stay neatly cropped. If you skip the CSS, everything
still works.

Summary:
In the first task you set up a basic page using Bootstrap’s grid system. You created a header, a
two-column layout and a footer. Those sections respond to screen size changes because of
Bootstrap classes like container, row and different column sizes.
In the second task you added a navigation bar at the top of the page. You used Bootstrap’s
navbar component to include links for Home, About and Contact. You applied built-in color
classes and made sure the menu switches to a toggle button on smaller screens.
In the third task you built a section that shows multiple cards. Each card includes an image, a
title and a short description. The cards sit in a responsive row so they adjust automatically on
desktop, tablet and mobile.

Lab 12 – Handling Forms with JavaScript (Validation, APIs)

Purpose of the Lab:
By the end of this lab, you should be able to:
• Check and validate form fields using JavaScript
• Send form information to an API through the Fetch method
• Implement reset and auto-fill utilities for better user interaction

Tools You Will Use:

VS Code, Google Chrome, HTML5, CSS3, JavaScript (Fetch API)

TASK 1 – Build and Validate a User Registration Form:

 New Step-by-Step Instructions:
 Create a new project folder and name it Lab12_Forms. Inside it, add three files:
[Link], [Link], and [Link].
 In [Link], design a sign-up form that includes the following fields:
1. Full Name
2. Email Address
3. Password
4. Confirm Password
5. Gender (radio buttons)
6. Age (number input)
Assign an id to every field so JavaScript can access them easily.
 In [Link], make a function named validateForm().
This function should run when the form is submitted and should temporarily stop the
form from submitting using [Link]().
 Inside validateForm(), add these checks:
• Make sure no field is left blank. If any field is empty, show a small red error
message beside that input.
• Validate the email using a proper regex pattern.
• Check that the password has at least 6 characters.
• Confirm that both password fields match.
• Ensure the age is a number and at least 13.

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="lab 12 task [Link]">
</head>
<body>
<h2 class="heading">User Registration</h2>
<p id="error-summary" class="error-summary"></p>
<form id="regForm">
<div class="input-group">
<label>Full Name</label>
<input type="text" id="name">
<small class="error"></small>
</div>
<div class="input-group">
<label>Email Address</label>
<input type="email" id="email">
<small class="error"></small>
</div>
<div class="input-group">
<label>Password</label>
<input type="password" id="password">
<small class="error"></small>
</div>
<div class="input-group">
<label>Confirm Password</label>
<input type="password" id="confirmPassword">
<small class="error"></small>
</div>
<div class="input-group">
<label>Gender</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<small class="error"></small>
</div>
<div class="input-group">
<label>Age</label>
<input type="number" id="age">
<small class="error"></small>
</div>
<button type="submit" id="submitBtn">Submit</button>
<button type="button" id="resetBtn">Reset</button>
<button type="button" id="demoBtn">Demo Fill</button>
</form>
<p id="result"></p>
<script src="lab 12 task [Link]"></script>
</body>
</html>
[Link]:
body {
font-family: Arial, sans-serif;
background: #e5ffea; /* light green background */
padding: 20px;}
.heading {
color: #2d7a39;}
.input-group {
margin-bottom: 15px;}
input {
width: 100%;
padding: 7px;
border: 2px solid #8cd48a;
border-radius: 5px;}
button {
padding: 8px 15px;
margin-right: 10px;
background: #8cd48a;
border: none;
border-radius: 5px;
cursor: pointer;}
button:hover {
background: #6fbf6d;}
.error {
color: red;
font-size: 13px;}
.error-summary {
color: red;
font-weight: bold;}
[Link]:
[Link]("regForm").addEventListener("submit", validateForm);
function validateForm(event) {
[Link]();
let isValid = true;
let summary = [];
clearErrors();
let name = [Link]("name");
let email = [Link]("email");
let pass = [Link]("password");
let confirm = [Link]("confirmPassword");
let age = [Link]("age");
let gender = [Link]("input[name='gender']:checked");
if ([Link]() === "") {
setError(name, "Name cannot be empty");
[Link]("Name is missing");
isValid = false;
}
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (![Link]([Link])) {
setError(email, "Invalid email format");
[Link]("Email is invalid");
isValid = false;
}
if ([Link] < 6) {
setError(pass, "Password must be at least 6 characters");
[Link]("Password is too short");
isValid = false;
}
if ([Link] !== [Link]) {
setError(confirm, "Passwords do not match");
[Link]("Password mismatch");
isValid = false;
}
if ([Link] < 13 || [Link] === "") {
setError(age, "Age must be 13 or above");
[Link]("Age requirement not met");
isValid = false;
}
if (!gender) {
[Link](".input-group")[4].querySelector(".error").innerText =
"Select gender";
[Link]("Gender not selected");
isValid = false;
}
[Link]("error-summary").innerText = [Link](" | ");
if (isValid) {
submitForm();}}
function setError(input, message) {
[Link] = message;
}
function clearErrors() {
[Link](".error").forEach(e => [Link] = "");
[Link]("error-summary").innerText = "";}

EXPLANATION:

In this task, we create a complete registration form and connect it with JavaScript. Every field
is validated to ensure the user enters correct information. The script checks empty fields,
invalid emails, weak passwords, mismatched passwords, wrong age, and missing gender.

TASK 2 – Form Submission Using a API:

1. Add a new function in [Link] named submitForm().

This function will be called once Task 1 validations succeed.
2. Collect all form values and arrange them into a JSON object.
3. Use the Fetch API to send the data to a temporary testing API:
[Link]
4. When the API responds, read the JSON and show a success message that includes the
returned ID.
5. During the API request, disable the Submit button and display a short "loading"
message to the user.

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task 2 - Form Submission</title>
<link rel="stylesheet" href="lab 12 task [Link]">
</head>
<body>
<h1>Registration Form</h1>
<div id="message"></div>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name"><br>
<label for="email">Email:</label>
<input type="text" id="email"><br>
<label for="age">Age:</label>
<input type="number" id="age"><br>
<label>Gender:</label>
<input type="radio" name="gender" value="Male" id="male"> Male
<input type="radio" name="gender" value="Female" id="female"> Female<br>
<button type="submit" id="submitBtn">Submit</button>
<span id="loading" style="display:none;">Submitting...</span>
</form>
<script src="lab 12 task [Link]"></script>
</body>
</html>
[Link]:
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #e5ffea; /* very light green background */}
label {
display: inline-block;
width: 80px;
margin-top: 10px;}
input {
margin-bottom: 10px;}
#message {
margin-bottom: 15px;
font-weight: bold;
color: green; /* light green success messages */}
#loading {
margin-left: 10px;
color: blue;}
[Link]:
[Link]('registrationForm').addEventListener('submit', handleSubmit);
function handleSubmit(event) {
[Link]();
submitForm();}
function submitForm() {
const submitBtn = [Link]('submitBtn');
const loading = [Link]('loading');
const messageDiv = [Link]('message');
// Disable button and show loading
[Link] = true;
[Link] = 'inline';
[Link] = '';
const name = [Link]('name').[Link]();
const email = [Link]('email').[Link]();
const age = [Link]('age').[Link]();
const gender = [Link]('input[name="gender"]:checked')?.value;
const payload = { name, email, age, gender };
fetch('[Link] {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link](payload)})
.then(response => [Link]())
.then(data => {
[Link] = 'green';
[Link] = `Success! ID: ${[Link]}, Name: ${[Link]}`;})
.catch(error => {
[Link] = 'red';
[Link] = 'Submission failed. Try again.'; })
.finally(() => {
[Link] = false;
[Link] = 'none'; });}

EXPLANATION:
This task teaches how to send form data to a test server using a POST request. The Fetch API
sends your form details as JSON and returns a fake ID. During the process, the button is
disabled and shows a loading message to prevent duplicate submissions. Once the response
arrives, the page displays a confirmation message.

TASK 3 – Reset and Auto-Fill Buttons

New Step-by-Step Instructions:
Add two buttons to your form:
• Reset
• Demo Fill
Build a function named resetForm() that clears all inputs, removes errors, and resets any
highlight.
Create demoFill() that fills the form with example details like:
Name: Test User
Email: test@[Link]
Password: Test@123
Age: 20
Gender: Male/Female (any)
Before inserting demo data, ensure it removes old validation messages.
Connect both buttons using addEventListener and test them multiple times.

[Link]:
same as task 1
[Link]:
same as task 1
[Link]:
// Grab elements

const form = [Link]('registrationForm');

const messageDiv = [Link]('message');

const resetBtn = [Link]('resetBtn');

const demoBtn = [Link]('demoBtn');

// Event listeners

[Link]('submit', handleSubmit);

[Link]('click', resetForm);
[Link]('click', demoFill);

// Submit function

function handleSubmit(event) {

[Link](); // prevent default submit

[Link] = 'green';

[Link] = "Form submitted successfully ✔";}

// Reset function

function resetForm() {

[Link](); // clear all input values

[Link] = ""; // clear messages}

// Demo Fill function

function demoFill() {

resetForm(); // clear previous values

[Link]('name').value = "Test User";

[Link]('email').value = "test@[Link]";

[Link]('password').value = "Test@123";

[Link]('confirmPassword').value = "Test@123";

[Link]('age').value = 20;

[Link]('male').checked = true;

[Link] = 'green';
[Link] = "Demo data filled ✔";}
EXPLANATION:

This task improves user convenience. The Reset button clears the entire form and removes
error messages. The Demo Fill button automatically enters valid sample data, which helps in
quick testing. Both buttons work smoothly because they are connected through event
listeners.

Summary:
The three tasks together create a functional registration form. Task 1 handles input validation,
ensuring fields like name, email, password, gender, and age are correctly filled and showing inline
error messages with a summary for any issues. Task 2 simulates sending the form data to an API,
displaying a loading indicator, disabling the submit button during the request, and showing success
or error messages based on the response. Task 3 enhances usability with Reset and Demo Fill buttons
to clear the form or automatically fill it with valid sample data, while keeping a light green theme for
background and messages, making the form both user-friendly and visually consistent.

LAB 13:
Connecting to SQL Database and Retrieving Data

Objective:
This lab teaches how a website communicates with a database. You will learn how to store
student information in MySQL, connect it with PHP, display the data on a web page, and
allow users to search for records.
In real applications, data is not written directly inside web pages. Instead, it is stored in
databases, and PHP is used to fetch and manage that data securely.
Tools and Environment Used:
Before starting, we need a proper development setup.
 XAMPP is used because it provides:
 Apache, which runs PHP files
 MySQL, which stores data
 phpMyAdmin, which helps manage databases easily
 Visual Studio Code is used to write PHP and HTML code.
 Chrome browser is used to test the output.

Task 1: Creating the Database and Connecting PHP with MySQL

In this task, we will create a database and establish a connection between PHP and the
MySQL database.
Step-by-Step Instructions
Step 1:
Open XAMPP and start both the Apache and MySQL services. After that, open phpMyAdmin
in your browser.
Step 2:
In phpMyAdmin, click on the “New” option on the left side and create a new database named
student_db.
Step 3:
Inside the student_db database, create a table named students. The table should contain the
following columns:
 id → an integer number that automatically increases and acts as the primary key
 name → stores the student’s name
 email → stores the student’s email address
 course → stores the course name
 (VARCHAR means a text-based data type.)
Step 4:
Use the Insert option in phpMyAdmin to add at least four realistic student records to the
table.
Step 5:
Create a file named [Link] in your project folder. Write PHP code in this file that
connects to the MySQL database using mysqli_connect() displays an error message if the
connection fails prints “Connected” if the connection is successful (for testing purposes)
[Link]:
<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "student_db";
$conn = mysqli_connect($host, $user, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());} ?>
[Link]:
<?php
include "[Link]";
echo "Connected<br>";
echo "Abdullah Amir<br>";
echo "2023-CS-151<br>"; ?>
Explanation:
The purpose of this task is to understand how the database backend is prepared and how PHP
connects to it. The database works like a storage room where all data is kept, and PHP acts
like a worker who goes to that storage room to retrieve information. If the connection is not
established correctly, no further tasks can be performed, which is why this step is the most
important.

Task 2: Retrieving Data from the Database and Displaying It

In this task, we retrieve data from the database and display it on a web page in table format.
Step-by-Step Instructions
Step 1:
Create a new file named [Link] and include [Link] at the top so the database
connection can be reused.
Step 2:
Write an SQL query that fetches the id, name, email, and course columns from the students
table.
Step 3:
Execute the query using mysqli_query() and store the result in a variable.
Step 4:
Use mysqli_fetch_assoc() in a loop to fetch each record and display it inside an HTML table.
Use <thead> for table headings and <tbody> for table data.
Step 5:
Create a separate [Link] file to improve the table’s appearance by:
adding borders, using alternating row colors, adding padding inside table cells
If no records are found, display the message “No students found”. Finally, close the
database connection.
[Link]:
<?php
include "[Link]";
$sql = "SELECT id, name, email, course FROM students";
$result = mysqli_query($conn, $sql);?>
<!DOCTYPE html>
<html>
<head>
<title>Students List</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>Abdullah Amir</h2>
<h2>2023-CS-151</h2>
<h2>Students Record</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<?php
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['email']."</td>";
echo "<td>".$row['course']."</td>";
echo "</tr>";}
} else {
echo "<tr><td colspan='4'>No students found</td></tr>";} ?>
</tbody>
</table>
</body>
</html>
<?php
mysqli_close($conn);?>
[Link]:
table {
border-collapse: collapse;
width: 80%;}
th, td {
border: 1px solid rgb(238, 173, 75);
padding: 10px;}
tr:nth-child(even) {
background-color: #ec9d0a;}

Explanation:
The focus of this task is to present database data in a readable and user-friendly way. Raw
database data is not useful unless it is properly displayed. HTML tables help organize the data
clearly, and error handling ensures the page does not appear broken when no data exists.

Task 3: Adding Search and Filter Functionality

In this task, we allow users to search for students by name.
Step-by-Step Instructions
Step 1:
Add an HTML search form at the top of [Link] using the GET method, with an input
field named keyword.
Step 2:
In PHP, check whether a search has been submitted and read the keyword using $_GET.
Step 3:
Use mysqli_real_escape_string() to make the user input safe and prevent SQL injection
attacks. (SQL injection means inserting harmful code through user input to damage the
database.)
Step 4:
Modify the SQL query by adding a WHERE clause:
name LIKE '%keyword%' Then execute the query and display the filtered results.
Step 5:
If no matching record is found, show the message “No matching student found”. Add a
“Show All” button or link to clear the search and display all records again.
[Link]:
<?php
include "[Link]";
// Read search keyword if submitted
$keyword = "";
if (isset($_GET['keyword'])) {
$keyword = mysqli_real_escape_string($conn, $_GET['keyword']);}
// SQL query: filter by name if search is used
if ($keyword != "") {
$sql = "SELECT id, registration_no, name, email, course FROM students WHERE name
LIKE '%$keyword%'";
} else {
$sql = "SELECT id, registration_no, name, email, course FROM students";
}
$result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>Students List</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>Abdullah Amir</h2>
<h2>2023-CS-151</h2>
<h2>Students Record</h2>

<form method="GET" action="">
<input type="text" name="keyword" placeholder="Search by name">
<button type="submit">Search</button>
<a href="[Link]">Show All</a>
</form>

<table>
<thead>
<tr>
<th>ID</th>
<th>Registration No</th>
<th>Name</th>
<th>Email</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<?php
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['registration_no']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['email']."</td>";
echo "<td>".$row['course']."</td>";
echo "</tr>";
}
} else {
echo "<tr><td colspan='5'>No matching student found</td></tr>";
}
?>
</tbody>
</table>
</body>
</html>
<?php
mysqli_close($conn);
?>
[Link]:
same as task 2
Explanation:
The goal of this task is to make the website interactive and user-friendly. Displaying data
alone is not enough; users should be able to search and filter information easily. Security is
especially important here, which is why user input is handled carefully before using it in SQL
queries. This feature is a core part of most real-world web applications.

Summary:
In this lab, we first created a MySQL database and table, then connected PHP to the database.
We retrieved student data and displayed it in an HTML table. Finally, we added a search
feature that allows users to filter student records securely. Through this lab, you learned the
basics of backend and frontend integration, which forms the foundation of real-world PHP-
based web applications.

Lab Journal 9
No ratings yet
Lab Journal 9
6 pages
BCA Web Technologies Lab Journal 2025-26
No ratings yet
BCA Web Technologies Lab Journal 2025-26
30 pages
Web Technology Unit1 Lab Assignment
No ratings yet
Web Technology Unit1 Lab Assignment
10 pages
HTML Lab QN
No ratings yet
HTML Lab QN
2 pages
Document (6) J
No ratings yet
Document (6) J
2 pages
HTML Basics and Simple Program Guide
No ratings yet
HTML Basics and Simple Program Guide
5 pages
Bharat Web Designing Practical File
No ratings yet
Bharat Web Designing Practical File
25 pages
Lab 8
No ratings yet
Lab 8
8 pages
Website Creation Course Outline
No ratings yet
Website Creation Course Outline
3 pages
Web Development Lab Handbook
No ratings yet
Web Development Lab Handbook
93 pages
Task 2
No ratings yet
Task 2
2 pages
E-commerce HTML Practical by Pranav Sapra
No ratings yet
E-commerce HTML Practical by Pranav Sapra
43 pages
HTML Basics and Web Design Course Guide
No ratings yet
HTML Basics and Web Design Course Guide
21 pages
Web Programming Basics and HTML Guide
No ratings yet
Web Programming Basics and HTML Guide
8 pages
Basic HTML Web Design Manual
No ratings yet
Basic HTML Web Design Manual
26 pages
Web Engineering Lab Manual 2023-24
No ratings yet
Web Engineering Lab Manual 2023-24
60 pages
Ilovepdf Merged
No ratings yet
Ilovepdf Merged
25 pages
HTML and CSS Lab Work Guide
No ratings yet
HTML and CSS Lab Work Guide
15 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
9 pages
Web Technology Lab Manual: HTML Basics
No ratings yet
Web Technology Lab Manual: HTML Basics
44 pages
HTML Web Design Lab Session Guide
No ratings yet
HTML Web Design Lab Session Guide
4 pages
Course Curriculum Webpage Design
No ratings yet
Course Curriculum Webpage Design
5 pages
HTML Basics and Lab Tasks Guide
No ratings yet
HTML Basics and Lab Tasks Guide
15 pages
Basic Web Design Lab Manual
No ratings yet
Basic Web Design Lab Manual
26 pages
Web Design Lab Manual for BCA V Semester
No ratings yet
Web Design Lab Manual for BCA V Semester
80 pages
Lab 1
No ratings yet
Lab 1
3 pages
HTML Web Design Basics Manual
No ratings yet
HTML Web Design Basics Manual
77 pages
Introduction to HTML Structure
No ratings yet
Introduction to HTML Structure
21 pages
IFTExercise (Classwork)
No ratings yet
IFTExercise (Classwork)
3 pages
CSC336 Web Technologies Lab Manual
No ratings yet
CSC336 Web Technologies Lab Manual
108 pages
HTML Page Creation Tasks Guide
No ratings yet
HTML Page Creation Tasks Guide
2 pages
E-commerce HTML Practical by Ayush Garg
No ratings yet
E-commerce HTML Practical by Ayush Garg
44 pages
VSC HTML Practical Exercises Guide
No ratings yet
VSC HTML Practical Exercises Guide
2 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
10 pages
Introduction to HTML Lab 1
No ratings yet
Introduction to HTML Lab 1
32 pages
Web Designing Practical File 2023
No ratings yet
Web Designing Practical File 2023
18 pages
Lab 11
No ratings yet
Lab 11
6 pages
Web Technology Lab Overview
No ratings yet
Web Technology Lab Overview
25 pages
PBCoE Industrial Training Diary
No ratings yet
PBCoE Industrial Training Diary
12 pages
HTML Basics: Tags and Structure Guide
No ratings yet
HTML Basics: Tags and Structure Guide
8 pages
Web Design Lab Manual for Students
No ratings yet
Web Design Lab Manual for Students
65 pages
Build a Simple Webpage with HTML
No ratings yet
Build a Simple Webpage with HTML
14 pages
HTML and CSS Lab Work Overview
No ratings yet
HTML and CSS Lab Work Overview
18 pages
HTML Basics for Web Development Lab
No ratings yet
HTML Basics for Web Development Lab
3 pages
HTML and CSS Lab Manual for BCA
No ratings yet
HTML and CSS Lab Manual for BCA
95 pages
HTML Interview Questions Guide
No ratings yet
HTML Interview Questions Guide
5 pages
HTML Lab Activity
No ratings yet
HTML Lab Activity
2 pages
Web1201 Lab1 HTML
No ratings yet
Web1201 Lab1 HTML
39 pages
HTML Static Website Lab Manual
No ratings yet
HTML Static Website Lab Manual
17 pages
HTML and CSS Lab Manual Guide
No ratings yet
HTML and CSS Lab Manual Guide
95 pages
Comprehensive HTML Course Guide
No ratings yet
Comprehensive HTML Course Guide
10 pages
Web Development Basics: HTML & CSS
No ratings yet
Web Development Basics: HTML & CSS
27 pages
Web Designing Lab Record BCS353
No ratings yet
Web Designing Lab Record BCS353
52 pages
HTML & CSS Practical Lab Exercises
No ratings yet
HTML & CSS Practical Lab Exercises
2 pages
HTML Lab Tasks for Beginners
No ratings yet
HTML Lab Tasks for Beginners
2 pages
Presentation Sir Basit
No ratings yet
Presentation Sir Basit
30 pages
Lab 3 Ooda 151
No ratings yet
Lab 3 Ooda 151
6 pages
Assignment Sir Basit
No ratings yet
Assignment Sir Basit
8 pages
Lab Manual Hci (Do Not Copy It)
No ratings yet
Lab Manual Hci (Do Not Copy It)
37 pages
Lab Manual CA
No ratings yet
Lab Manual CA
14 pages
Assignment Mam Arousa
No ratings yet
Assignment Mam Arousa
4 pages
Lab Manual AI NEW
No ratings yet
Lab Manual AI NEW
30 pages
Ai Assignment
No ratings yet
Ai Assignment
8 pages
Assignment 1 Abdullah Amir 151
No ratings yet
Assignment 1 Abdullah Amir 151
5 pages
Assignment No 2 Ai
No ratings yet
Assignment No 2 Ai
3 pages
Lab Manual Abdullah Amir 151
No ratings yet
Lab Manual Abdullah Amir 151
5 pages
Assignment 2 151
No ratings yet
Assignment 2 151
5 pages
Assignment 3 151
No ratings yet
Assignment 3 151
7 pages
Hci Project
No ratings yet
Hci Project
7 pages
Dear Unicef
No ratings yet
Dear Unicef
1 page
Evolution and History of HTML
No ratings yet
Evolution and History of HTML
1 page
Node.js Developer Candidate List
No ratings yet
Node.js Developer Candidate List
5 pages
Web Technologies Syllabus for B.Tech
No ratings yet
Web Technologies Syllabus for B.Tech
1 page
E-Marketing Strategies Explained
No ratings yet
E-Marketing Strategies Explained
38 pages
GameCenter Startup Process Log
No ratings yet
GameCenter Startup Process Log
12 pages
Login Authentication System Project Report
No ratings yet
Login Authentication System Project Report
56 pages
Level 12 CSRF Token Challenge Code
No ratings yet
Level 12 CSRF Token Challenge Code
3 pages
Tejas Giri: MERN Stack Engineer Profile
No ratings yet
Tejas Giri: MERN Stack Engineer Profile
1 page
Semantic HTML Elements Explained
No ratings yet
Semantic HTML Elements Explained
3 pages
JavaScript DOM Manipulation Guide
No ratings yet
JavaScript DOM Manipulation Guide
26 pages
SEO Terminology and Definitions Guide
No ratings yet
SEO Terminology and Definitions Guide
3 pages
Technology Lead Profile: Sreejith Vijayan
No ratings yet
Technology Lead Profile: Sreejith Vijayan
6 pages
Building an Amazon Clone with MERN Stack
100% (1)
Building an Amazon Clone with MERN Stack
10 pages
Web Application Security Report 2025
No ratings yet
Web Application Security Report 2025
22 pages
Web Development Training Report 2024
No ratings yet
Web Development Training Report 2024
25 pages
Web Technology Fundamentals and Practices
No ratings yet
Web Technology Fundamentals and Practices
1 page
Front-End Web Developer Course Australia
No ratings yet
Front-End Web Developer Course Australia
22 pages
Tamil Songs Download from MassTamilan
No ratings yet
Tamil Songs Download from MassTamilan
6 pages
HTML Form Creation Guide
No ratings yet
HTML Form Creation Guide
7 pages
HTML Header Element Overview
No ratings yet
HTML Header Element Overview
3 pages
MOCHA VNC Code Configuration Guide
No ratings yet
MOCHA VNC Code Configuration Guide
5 pages
Veeraj Matnale: AI & Web Dev Profile
No ratings yet
Veeraj Matnale: AI & Web Dev Profile
3 pages
CSS Language MCQs for GATE Prep
No ratings yet
CSS Language MCQs for GATE Prep
5 pages
HTML Essentials for Digital Marketers
No ratings yet
HTML Essentials for Digital Marketers
1 page
Readme Ecommerce
No ratings yet
Readme Ecommerce
4 pages
Web Developer Resume of Mariyam Farhana
No ratings yet
Web Developer Resume of Mariyam Farhana
2 pages
Shashank Singh: Web Developer Profile
No ratings yet
Shashank Singh: Web Developer Profile
2 pages
Dixvi Trackback Link Instructions
No ratings yet
Dixvi Trackback Link Instructions
3 pages
Create a Personal Profile Webpage
No ratings yet
Create a Personal Profile Webpage
8 pages
Real-Time Collision Detection Alerts
No ratings yet
Real-Time Collision Detection Alerts
90 pages