Term-Work of Web Technology Laboratory
Date: 28/01/25
PRNNO: 22310222
Roll No: 291010
Name : Aditya Sahu
Assignment Number: 01
Assignment Title : Mini-Project : Design and implement a responsive portfolio website using HTML+ CSS.
Brief procedure or steps / subtasks to be implemented
1. Set up your HTML file in a text editor and open it in a browser.
2. Use the basic HTML structure with <!DOCTYPE html> and <html>, <head>, <body> tags.
3. Add content using HTML5 elements: headings, paragraphs, images, videos, tables, lists, and
forms.
4. Use inline styles or attributes to change colors, fonts, and formatting.
5. Enhance the sample project by adding new sections and a feedback form using semantic tags.
Key concepts to be learnt or theory
To understand and implement various HTML5 tags, elements, and attributes for building structured and interactive
web pages.
Code / Commands: <link
Lab Assignment No 1 : Portfolio Website rel="stylesheet"
Program Code : href="https://use.fontawesome.com/releases/v5.4.1/css
/all.css"
<!DOCTYPE html>
/>
<html lang="en">
<script
<head> src="https://code.iconify.design/1/1.0.7/iconify.min.js"></sc
ript>
<meta charset="utf-8" />
<link
<meta name="viewport" content="width=device-
width,initial-scale=1" /> rel="stylesheet"
<title>Aditya's Portfolio</title> href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.1/css/all.min.css"
<link rel="icon" href="Image/engineer.ico" />
/>
<link
<script
rel="stylesheet"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5
.0/css/bootstrap.min.css" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbV
integrity="sha384- YUew+OrCXaRkfj"
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYY
xFfc+NcPb1dKGj7Sk" crossorigin="anonymous"
crossorigin="anonymous" ></script>
/> <script
<link rel="stylesheet" href="project.css" /> src="https://cdn.jsdelivr.net/npm/[email protected]/dist
/umd/popper.min.js"
<link rel="stylesheet" href="dark-mode.css" />
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3Uksd
QRVvoxMfooAo"
<link
crossorigin="anonymous"
href="https://fonts.googleapis.com/css2?family=Arizonia
&family=Montserrat:wght@400;800&display=swap" ></script>
rel="stylesheet" /> <script
<link src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.
0/js/bootstrap.min.js"
href="https://fonts.googleapis.com/css2?family=Open+S
ans:wght@700&display=swap" integrity="sha384-
OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6T
rel="stylesheet" p75j7Bh/kR0JKI"
/> crossorigin="anonymous"
</head> ></script>
<script <div class="collapse navbar-collapse"
id="navbarSupportedContent">
async
<ul class="navbar-nav ml-auto">
src="https://www.googletagmanager.com/gtag/js?id=G-
WZXPVQDR2Q" <li class="nav-item">
></script> <a class="nav-link headerachor"
href="index.html">Home</a>
<script>
</li>
window.dataLayer = window.dataLayer || [];
<li class="nav-item">
function gtag() {
<a class="nav-link headerachor"
dataLayer.push(arguments); href="education.html"
} >Education</a
gtag("js", new Date()); >
</li>
gtag("config", "G-WZXPVQDR2Q"); <li class="nav-item">
</script> <a class="nav-link headerachor"
href="skill.html">Skills</a>
<body class="container-fluid body_section">
</li>
<header>
<li class="nav-item">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="nav-link headerachor"
<a class="navbar-brand brand-name" href="#">Aditya
href="project.html">Projects</a>
Sahu</a>
</li>
<button
<li class="nav-item">
class="navbar-toggler"
<a class="nav-link headerachor"
type="button"
href="contact.html">Contact Me</a>
data-toggle="collapse"
</li>
data-target="#navbarSupportedContent"
<li>
aria-controls="navbarSupportedContent"
<iframe
aria-expanded="false"
id="toggle-iframe"
aria-label="Toggle navigation"
onload="onIframeLoad()"
>
src="toggle.html"
<span class="navbar-toggler-icon"></span>
></iframe>
</button>
</li>
</div>
</ul>
</nav> <h5 class="card-title">RetroPhil</h5>
</header> <p class="card-text project-text">
<section id="Projects" class="Section1"> We developed a National Web Community for
Philatelists, providing a centralized platform to address the
<div class="row"> challenges faced by stamp collectors across India. This
solution enhances the philatelic experience by bridging gaps
<div class="col-lg-6 col-md-6">
in access to information, demand fulfillment, and networking
opportunities.
<img class="projectimage" src="Image/Project.svg"
alt="" />
<br>
</div>
<img class="iconify"
src="https://th.bing.com/th/id/OIP.uEi-BYi_M-
<div class="col-lg-6 col-md-6 project-heading">
Rnv9abB82xqwHaHa?rs=1&pid=ImgDetMain" alt="" />
<h1 class="P-heading">Projects</h1>
<img class="iconify" src="Image/dialogflow.png"
<p class="p-text"> alt="" />
Here are some of the projects I’ve worked on, <img class="iconify"
showcasing my expertise in Data Structures, Web src="https://upload.wikimedia.org/wikipedia/commons/a/a
Development, Python and Machine Learning. 7/React-icon.svg" alt="" />
I love solving real-world problems and continuously <img class="iconify"
improving my skills by building innovative applications. src="https://upload.wikimedia.org/wikipedia/commons/6/6
a/JavaScript-logo.png" alt="" />
Feel free to explore my projects and check out their
live demos and GitHub repositories! <img class="iconify"
src="https://upload.wikimedia.org/wikipedia/commons/d/d
</p> 5/CSS3_logo_and_wordmark.svg" alt="" />
</p> <img class="iconify"
src="https://upload.wikimedia.org/wikipedia/commons/6/6
</div> 1/HTML5_logo_and_wordmark.svg" alt="" />
</div>
<div class="row Section1"> </p>
<div class="col-sm-6"> </div>
<a </div>
class="Project-box" </a>
target="_blank" </div>
href="project-detail.html?id=RetroPhil" <div class="col-sm-6">
class="Project-box"
<a
>
class="Project-box"
<div class="card boxx">
target="_blank"
<div class="card-body">
href="https://github.com/AdityaSahu2103/ManiaOfP
> aths"
<div class="card boxx"> >
<div class="card-body"> <div class="card boxx">
<h5 class="card-title">Mania of Paths</h5> <div class="card-body">
<p class="card-text project-text"> <h5 class="card-title">Interactive Fiction Story
Generator</h5>
Path Mania is an intuitive platform designed to
streamline project tracking and showcase academic <p class="card-text project-text">
achievements. Built with Firebase integration, it enables
educators to seamlessly upload project details while Certainly! Here's a shorter and more concise
providing students with a dynamic portfolio to highlight their description of your "The Diwali Treasure Hunt: An Interactive
contributions. Fiction Adventure" for your portfolio:
<br><br>
<img class="iconify" src="https://static- Developed an interactive fiction game in JavaFX,
00.iconduck.com/assets.00/netlify-icon-1024x1024- where players embark on a hunt. The project utilizes a tree
70jgut7b.png" alt="" /> data structure to create a branching narrative with multiple
endings, allowing players to shape the story through their
<img class="iconify" choices. Implemented in Hinglish for a culturally relevant
src="https://w7.pngwing.com/pngs/246/288/png- experience.
transparent-firebase-hd-logo.png" alt="" /> <img
class="iconify" <br>
src="https://upload.wikimedia.org/wikipedia/commons/a/a
7/React-icon.svg" alt="" />
<img class="iconify"
src="https://upload.wikimedia.org/wikipedia/commons/d/d
<img class="iconify"
5/CSS3_logo_and_wordmark.svg" alt="" />
src="https://th.bing.com/th/id/R.7844ef09d59c428a898039c
cc269e3c5?rik=2x5IRkD4%2bB65yQ&riu=http%3a%2f%2fjar.f
</p>
yicenter.com%2fApache-Log4j%2f_icon_Apache-
</div> </div> </a> </div> Log4j.png&ehk=BP8Oc5zM6jOw1vr97dqGBDgQ%2bw%2f08
%2b%2b3zjyPVkf35qQ%3d&risl=&pid=ImgRaw&r=0" alt=""
<div class="col-sm-6"><a />
class="Project-box" <img class="iconify"
src="https://static.vecteezy.com/system/resources/preview
target="_blank" s/014/774/403/original/combination-of-letter-c-and-eco-
friendly-green-leaf-logo-elements-vector.jpg" alt="" />
href="https://github.com/AdityaSahu2103/Interactive
-Fiction-Story-Generator" <img class="iconify"
src="https://th.bing.com/th/id/OIP.fZfRNGBSj7Hb02wBkFYs
</p> </div></div></a></div><div class="col-sm-6"><a
zAHaHa?w=165&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
alt="" />
class="Project-box"
<img class="iconify" src="Image/dialogflow.png"
target="_blank"
alt="" />
href="https://github.com/AdityaSahu2103/Image-
<img class="iconify"
Processing" ><div class="card boxx">
src="https://th.bing.com/th/id/OIP.b2Lb19QmsYIpd54eQVj
<div class="card-body"> WQAAAAA?rs=1&pid=ImgDetMain" alt="" />
<h5 class="card-title">Image Processing</h5>
<p class="card-text project-text"> <img class="iconify" src="Image/dialogflow.png"
alt="" />
This project leverages Python-based image
processing techniques to enhance, analyze, and manipulate <img class="iconify"
images efficiently. Using powerful libraries like OpenCV and src="https://th.bing.com/th/id/OIP.YObfZpzyKAkhVNPN6M1
NumPy, the system automates tasks such as filtering, edge JygHaBe?rs=1&pid=ImgDetMain" alt="" />
detection, object recognition, and color manipulation,
making it suitable for real-world applications in computer
vision and AI.
</p>
</div>
<br>
</div>
<br> <img class="iconify"
</a>
src="https://logohistory.net/wp-
content/uploads/2023/06/Python-Emblem.png" alt="" />
</div>
<img class="iconify"
<div class="col-sm-6">
src="https://th.bing.com/th/id/OIP.4oOQysUtTgcyylCC9R7N
yQHaJL?rs=1&pid=ImgDetMain" alt="" /> <a
<img class="iconify" class="Project-box"
src="https://th.bing.com/th/id/OIP.tnGdBzQcx48_4zIrmCvsu
wAAAA?rs=1&pid=ImgDetMain" alt="" /> target="_blank"
<img class="iconify" href="https://github.com/AdityaSahu2103/Emotion-
src="https://logohistory.net/wp- Detection-and-Proctoring-AI"
content/uploads/2023/06/Python-Emblem.png" alt="" />
>
<img class="iconify"
src="https://th.bing.com/th/id/OIP.4oOQysUtTgcyylCC9R7N <div class="card boxx">
yQHaJL?rs=1&pid=ImgDetMain" alt="" />
<div class="card-body">
<img class="iconify" src="https://static-
<h5 class="card-title">Emotion Detection and
00.iconduck.com/assets.00/tensorflow-logo-icon-956x1024-
Proctoring Ai</h5>
b3p0phpm.png" alt="" />
<p class="card-text project-text">
<img class="iconify" src="Image/dialogflow.png"
alt="" /> This project integrates AI-powered emotion
detection and automated proctoring to enhance real-time
<img class="iconify" src="https://user-
monitoring in online assessments, security, and user
images.githubusercontent.com/5201843/67641199-
engagement analysis. Using deep learning and computer
7051e700-f926-11e9-9920-56cf953c073a.png" alt="" />
vision, the system detects facial expressions, tracks user
</p> </div> </div> </a> </div> </div> attention, and flags suspicious activities during remote
exams.
</section>
<br><br>
<footer class="footer">© 2025 Aditya Sahu. All rights
reserved. Built with passion and precision.</footer>
<script src="dark-mode.js"></script> </script></body></html>
<!-- Add AOS JS -->
<script
src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 1000,
once: true,
offset: 100
});
Observations or Conclusions:
This HTML5 lab exercise helped in understanding the
structure and usage of various HTML5 elements. By applying
these tags and attributes, students can now build more
organized, interactive, and visually appealing
web pages.
Results / Output : Diagrams / Selected
Screen Shot
