WEBlab
WEBlab
<!DOCTYPE html>
<html>
<head>
<title>
TABLE TAG HTML
</title>
</head>
<body>
<style>
table{
width: 100%;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
</body>
<h1>TIME TABLE[Sec-C (CSE and IOT)]</h1>
<table>
<tr>
<th rowspan="2">TIME / DAY</th>
<th>9:30-9:40</th>
<th>9:40-10:30</th>
<th>10:30-11:20</th>
<th>11:20:12:10</th>
<th>12:10-1:00</th>
<th>1:00-1:40</th>
<th>1:40-2:30</th>
<th>2:30-3:30</th>
</tr>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th rowspan="7">LUNCH</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<th>MON</th>
<th rowspan="6">PRAYER</th>
<td>WT</td>
<td>ML/AI</td>
<td colspan="2">Value Added</td>
<td>DA/IoTAP</td>
<td>COI</td>
</tr>
<tr>
<th>TUE</th>
<td>DAA</td>
<td>DBMS</td>
<td>DA/IoTAP</td>
<td>ML/AI</td>
<td>ML/AI</td>
<td>DBMS</td>
</tr>
<tr>
<th>WED</th>
<td>COI</td>
<td>DAA</td>
<td colspan="2">Value Added</td>
<td>DA/IoTAP</td>
<td>DBMS LAB</td>
</tr>
<tr>
<th>THUS</th>
<td>WT</td>
<td>DAA</td>
<td colspan="2">Value Added</td>
<td>WT LAB</td>
<td>DBMS</td>
</tr>
<tr>
<th>FRI</th>
<td>ML/AI</td>
<td>DBMS</td>
<td>DAA</td>
<td>DA/IoTAP</td>
<td>WT</td>
<td>DAA LAB</td>
</tr>
<tr>
<th>SAT</th>
<td>DAA</td>
<td>COI</td>
<td colspan="2">EEP</td>
<td colspan="2">Internship</td>
</tr>
</table>
</html>
2. Make CV using HTML CSS
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="https://www.dropbox.com/s/trsldt0me90jzs8/resume.css"/>
<title></title>
</head>
style>
table{
width: 100%;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<p id="name">Priyanshi Sharma</p>
<a href="mailto:[email protected]" target="_blank"><p
id="email">[email protected]</p></a>
<p id="contact">+91 75036 10708</p>
</div>
<div class="left">
</div>
<div class="right">
<h3>CV Highlights</h3>
<p>
<ul>
<li>Currently grasping my concepts on Cloud Computing and practicing
Application DEvelopment</li>
<li>Learnt basic Python,Java,C, JavaScript, HTML, CSS on
Freecodecoursecamp.com.</li>
<li>An independent, dedicated, efficient person. These attributes are
proved through the series of courses I have taken or I am taking as of now
independently through online platforms.</li>
<li>Good Communication Skills, Presentation Skills, attitude towards
leadership, authorisation and delegation, conflict resolution and negotiation and a
very good team worker.</li></ul>
</p>
<h3>Educational Qualifications</h3>
<table >
<tr id="heading">
<td>Qualification</td>
<td>Board</td>
<td>Percentage / Grades</td>
<td>Year</td>
</tr>
<tr>
<td>10</td>
<td>CBSE</td>
<td>95.4%</td>
<td>2020</td>
</tr>
<tr>
<td>12</td>
<td>CBSE</td>
<td>80.4%</td>
<td>2022</td>
</tr>
<tr>
<td>B.Tech</td>
<td>AKTU</td>
<td>85.4%</td>
<td>2024</td>
</tr>
</table>
<h3>Independent Courses</h3>
<p>
<ul>
<li>
<span id="course-name">HTML & CSS for Beginners – Web
Fundamentals</span> – Codecademy.com</li>
<li>
<span id="course-name">Python – Fundamentals and Dynamic
Programming </span> - Codecademy.com</li>
<li>
<span id="course-name">JavaScript – Programming Basics, JS Apps and
Build Games </span> - Codecademy.com</li>
<li>
<span id="course-name">Java – Basic of Java</span> –
Codecademy.com</li>
<li>
<span id="course-name">C – Fundamentals of C </span> -
Codecademy.com</li>
</ul>
<h3>Technical Skills</h3>
<p>
<ul>
<li>
<span id="course-name">Problem
Solving:</span>HackerRank,Codechef</li>
<li>
<span id="course-name">Frontened and Backened:</span> Game
development,Split website</li>
<li>
<span id="course-name">Programming Skills:</span>HTML, CSS, Python,
JavaScript,Java, learning C and C++</li></ul>
</p>
<h3>Certifications / Awards:</h3>
<p>
<ul>
<li>Scored 1st Prize – Debate Competition – Intra College Competition ,
SMS LKO.</li>
<li>Scored 3rd Prize – Speech Competition – Inter College Competition , SFS
LKO.</li>
<li>Scored 3rd Prize – Elocution – Inter College Competition ,
PowerGrid.</li>
<li>C Certification – IIT Bombay.</li>
<li>Java Certification – IIT Bombay</li>
<li>Python Certification – Codsoft</li>
</ul>
</p>
<h3>Personal Information:</h3>
<p>
<ul>
<li>
A young, determined hard and smart working person. I believe in task based
roles and complete ownership of work.
<li>
<span id="course-name">Languages Known:</span>English and Hindi</li>
<li>
<span id="course-name">Hobbies:</span>I love reading History, Fictious,
Thrilled and IT related books / magazines,swimming, listening music, surfing
Internet, self-learning through e-courses.</li> </ul>
</p>
<h3>Other Information</h3>
<p>
<ul>
<li>
<span id="course-name">Expected Salary:</span>As per company
standards</li>
<li>
<span id="course-name">Area of Interest:</span>Software Development,
Programming, Start-ups, Coding, App Development, Technical Support, Support
Engineer, Customer Happiness, Client service, Investment Banking, Corporate
Finance, Hedge Funds, Mergers & Acquisitions, Analyst, Equity Research, Business
Analysis</li>
<li>
<span id="course-name">Joining Date:</span>Immediate</li></ul>
</p>
<h3>Declaration</h3>
<p>
I hereby declare that the details furnished above are true and correct to the
best of my knowledge and belief.</p>
</div>
<div id="footer"></div>
</body>
</html>
3. Portfolio
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<div class="container">
<nav>
<image src= class="logo">
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#portfolio">My Projects</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="contact.html">Contact</a></li>
</nav>
<div id="mainpage">
<div class="container">
<div class="row">
<div class="about-col-3">
<img src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data Structures
in Real Life\portfolio\port.jpg">
</div>
<div class="header-text">
<p>Developer</p>
<h1>Hi , I'm <br><span>Priyanshi </span>Sharma<br>From <br>Lucknow</h1>
</div>
</div>
</div>
<!---------------about section----------------->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data Structures
in Real Life\portfolio\download.jpg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>Welcome to my portfolio! I am developer with a focus on web development,
Python, Java.
I enjoy building projects and learning along the way. Let's collaborate
and create something great together!</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('Skills')">Skills</p>
<p class="tab-links"
onclick="opentab('Certification')">Certification</p>
<p class="tab-links" onclick="opentab('Education')">Education</p> </div>
<div class="tab-contents active-tab" id="Skills">
<ul>
<li><span>Front-End Developer</span><br>Designing Interactive
Webpages</li>
<li><span>Python</span></li>
<li><span>SQL</span></li>
<li><span>JAVA</span></li>
<li><span>C</span></li>
<li><span>CSS</span></li>
<li><span>HTML</span></li>
<li><span>JavaScript</span></li>
</ul>
</div>
<div class="tab-contents" id="Certification">
<ul>
<li><span>DBMS</span><br>From Udemy</li>
<li><span>Python</span><br>From Udemy</li>
<li><span>JAVA</span><br>From IIT BOMBAY</li>
<li><span>SQL</span><br>From Udemy</li>
<li><span>C</span><br>From IIT BOMBAY</li>
</ul>
</div>
<div class="tab-contents" id="Education">
<ul>
<li><span>2024-Current</span><br> 3 Year of B.Tech CSE</li>
<li><span>10<sup><th></th></sup> Board CBSE
</span><br>M.G Convent School</li>
<li><span>12<sup>th</sup>Board CBSE</span><br>M.G Convent School</li>
</ul>
</div>
</div>
</div>
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Projects</h1>
<div class="work-lists">
<div class="work">
<img src="C:\Users\Priyanshi Sharma\OneDrive\Pictures\port.jpg">
<div class="layer">
<h3>Gladiator's Verse Game</h3>
<p>Introducing ,The Gladiators' Verse project presents the development of an
arcade-style fighting game using web technologies,<br> specifically HTML, CSS, and
JavaScript. The goal of the Gladiators' Verse game is to provide an engaging and
interactive experience, reminiscent of classic 2D arcade fighting games, <br>within a
modern web browser. The core mechanics of the game include player controls for
character movement, attacks, and special moves,<br> with the objective of defeating
an opponent through a series of combat rounds. </p> </div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
<script> var tablinks = document.getElementsByClassName("tab-links"); var
tabcontents = document.getElementsByClassName("tab-contents"); function
opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-link");
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
</body>
</html>
Contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/67b734c79e.js"
crossorigin="anonymous"></script>
</head>
<body>
<nav>
<image src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data
Structures in Real Life\portfolio\soft.jpg" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Me</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="#contact">Contact</a></li>
</nav>
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-regular faenvelope"></i>[email protected]</p><br>
<p><i class="fa-solid fa-phone-volume"></i>+91- 9936387103</p>
<div class="social-icons">
<a href=""><i class="fa-brands fa-square-x-twitter"></i></a>
<a href=""><i class="fa-brands fa-square-instagram"></i></a>
<a href="https://www.linkedin.com/in/codecraft-cse-priyanshi/"><i class="fabrands
fa-linkedin"></i></a>
</div>
<div class="contact-right">
<form>
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your
Message..."></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
</div>
</body> </html>
Hobbies.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<image src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data
Structures in Real Life\portfolio\hobby.jpg" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Me</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="contact.html">Contact</a></li>
</nav>
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Hobbies</h1>
<div class="hobbies-lists">
<div>
<h2>Online Courses and Certifications</h2>
<p>"Pursuing online courses and certifications in programming languages,
frameworks, or technologies demonstrates your commitment to skill development
and staying updated with
industry trends."</p>
</div>
<div>
<h2>Learning New Skills</h2>
<p>"Eager to continuously expand my skill set, I embrace the journey of learning new
skills. Whether mastering programming languages, delving into design principles, or
exploring emerging technologies,
I thrive on the challenge of growth and the excitement of mastering new
domains."</p>
</div>
<div>
<h2>Listening Music</h2>
<p>"Immersing myself in the melodies and rhythms of music, I find solace and
inspiration in every note. From classical symphonies to modern beats, I cherish the
diversity of genres and the emotional journey each song evokes, making
listening to music a cherished hobby."</p>
</div>
<div><h2>Reading Books</h2>
<p>"Dedicating time to read fictious, engaging and thrilled story content, I immerse
myself in the world of learning and gaining experiences.
I find motivation and inspiration to lead a balanced lifestyle, making reading an
enjoyable and enriching hobby."</p>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
</div>
</body> </html>
Skills.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Skills</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/67b734c79e.js"
crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<image src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data
Structures in Real Life\portfolio\skill.jpg" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="contact.html">Contact</a></li>
</nav>
<!--------------skills section------------->
<div id="services">
<div class="container">
<h1 class="sub-title">My Skills</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2>Web Designing</h2>
<p>Crafting captivating websites tailored to your brand. From sleek designs to
seamless user experience,
I specialize in creating eye-catching web solutions that elevate your online presence.
Let's bring your vision to life.</p>
<a href="#">learn more</a>
</div>
<div>
<i class="fa-brands fa-python"></i>
<h2>Python</h2>
<p>Offering C/C++ development services for efficient, robust, and scalable software
solutions.Let's build together.</p>
<a href="#">learn more</a>
</div>
<div>
<i class="fa-brands fa-java"></i>
<h2>Java</h2>
<p>Offering Python development solutions tailored to your needs.Efficient,reliable,
and scalable programming expertise.</p>
<a href="#">learn more</a></div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
</div>
</body> </html>
Style.css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
}
.container {
padding: 50px;
}
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91"
size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Form Validation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>REGISTRATION FORM</h1>
<form name="RegForm" onsubmit="return validateForm()">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="Name"
placeholder="Enter your full name" />
<span id="name-error" class="error-message"></span>
</p>
<p>
<label for="address">Address:</label>
<input type="text" id="address" name="Address"
placeholder="Enter your address" />
<span id="address-error" class="error-message"></span>
</p>
<p>
<label for="email">E-mail Address:</label>
<input type="text" id="email" name="EMail"
placeholder="Enter your email" />
<span id="email-error" class="error-message"></span>
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="Password" />
<span id="password-error" class="error-message"></span>
</p>
<p>
<label for="subject">Select Your Course:</label>
<select id="subject" name="Subject">
<option value="">
Select Course
</option>
<option value="BTECH">
BTECH
</option>
<option value="BBA">
BBA
</option>
<option value="BCA">
BCA
</option>
<option value="B.COM">
B.COM
</option>
</select>
<span id="subject-error" class="error-message"></span>
</p>
<p>
<label for="comment">College Name:</label>
<textarea id="comment" name="Comment"></textarea>
</p>
<p>
<input type="checkbox" id="agree" name="Agree" />
<label for="agree">I agree to the above
information</label>
<span id="agree-error" class="error-message"></span>
</p>
<p>
<input type="submit" value="Send" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
</p>
</form>
<script src="script.js"></script>
</body>
</html>
Style.css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
color: #333;
}
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}
select {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
textarea {
resize: vertical;
}
input[type="submit"],
input[type="reset"],
input[type="checkbox"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="checkbox"]:hover {
background-color: #0056b3;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}
File.js
function validateForm() {
const name = document.getElementById("name").value;
const address = document.getElementById("address").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const subject = document.getElementById("subject").value;
const agree = document.getElementById("agree").checked;
const nameError = document.getElementById("name-error");
nameError.textContent = "";
addressError.textContent = "";
emailError.textContent = "";
passwordError.textContent = "";
subjectError.textContent = "";
agreeError.textContent = "";
if (!agree) {
agreeError.textContent =
"Please agree to the above information.";
isValid = false;
}
return isValid;
}