Scribd
Upload
5 views

First Web Development Assignment

Uploaded by

all in 1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

First Web Development Assignment

Uploaded by

all in 1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

First Web Development Assignment :-

[Q1] Create a table -in which there should be five student


data ?

Answer :-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Student Data</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
table {
margin: auto;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #4b79a1;
color: #fff;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Student Data
Table</h1>
<table>
<thead>
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Age</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>107</td>
<td>Ayush Mishra</td>
<td>20</td>
<td>3rd Year</td>
<td>A+</td>
</tr>
<tr>
<td>108</td>
<td>Suraj Singh</td>
<td>21</td>
<td>3rd Year</td>
<td>A+</td>
</tr>
<tr>
<td>103</td>
<td>Rohan Verma</td>
<td>19</td>
<td>2nd Year</td>
<td>A</td>
</tr>
<tr>
<td>104</td>
<td>Anjali Mehta</td>
<td>22</td>
<td>4th Year</td>
<td>A+</td>
</tr>
<tr>
<td>105</td>
<td>Amit Dubey</td>
<td>20</td>
<td>3rd Year</td>
<td>B+</td>
</tr>
</tbody>
</table>
</body>
</html>

Output:-

[Q2] Create an form -in which there should be drop-down


button , Check-box button , radio button and all button?
Answer :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Stylish Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ffecd2, #fcb69f);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.form-container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 300px;
text-align: center;
}

.form-container h2 {
margin-bottom: 20px;
color: #f76c6c;
}

label {
display: block;
margin-top: 10px;
color: #333;
}

input[type="text"],
input[type="email"],
select,
textarea {
width: 90%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}

.radio-group,
.checkbox-group {
display: flex;
justify-content: space-around;
margin-top: 5px;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}

textarea {
resize: none;
height: 80px;
}

button {
background: #f76c6c;
color: #fff;
border: none;
padding: 10px 20px;
margin-top: 15px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}

button:hover {
background: #fc4a4a;
}

</style>
<body>
<div class="form-container">
<h2>Sample Form</h2>
<form>
<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="Enter your name">
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email">

<!-- Dropdown Menu -->


<label for="role">Role:</label>
<select id="role" name="role">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option
value="developer">Developer</option>
<option value="designer">Designer</option>
</select>

<!-- Radio Buttons -->


<label>Gender:</label>
<div class="radio-group">
<label><input type="radio" name="gender"
value="male"> Male</label>
<label><input type="radio" name="gender"
value="female"> Female</label>
<label><input type="radio" name="gender"
value="other"> Other</label>
</div>

<!-- Checkbox Buttons -->


<label>Skills:</label>
<div class="checkbox-group">
<label><input type="checkbox" name="skills"
value="html"> HTML</label>
<label><input type="checkbox" name="skills"
value="css"> CSS</label>
<label><input type="checkbox" name="skills"
value="javascript"> JavaScript</label>
<label><input type="checkbox" name="skills"
value="python"> Python</label>
</div>

<!-- Textarea -->


<label for="message">Message:</label>
<textarea id="message" name="message"
placeholder="Write something..."></textarea>

<!-- Buttons -->


<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</div>
</body>

</html>

Output:-
[Q3] Create 5 most popular person list using html css?
Answer:- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title> Hit List</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: aqua;
}
.container {
background: #fff;
padding: 45px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #e0e0e0;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
width: 350px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Hit List</h2>
<ul>
<li>
<strong>Name:</strong> YO YO Honey Singh
<br>
<strong>Age:</strong> 41<br>
<strong>Major:</strong> Singer and music
producer
</li>
<li>
<strong>Name:</strong> salmon bhai<br>
<strong>Age:</strong> 58<br>
<strong>Major:</strong> Indian actor and film
producer
</li>
<li>
<strong>Name:</strong> Lawrence
Bishnoi<br>
<strong>Age:</strong> 31<br>
<strong>Major:</strong> Indian gangster
</li>
<li>
<strong>Name:</strong> Virat kohli<br>
<strong>Age:</strong> 36<br>
<strong>Major:</strong> Indian crickter
</li>
<li>
<strong>Name:</strong> Dhinchak Pooja<br>
<strong>Age:</strong> 30<br>
<strong>Major:</strong> Indian
Youtuber(Worst Singer )
</li>
</ul>
</div>
</body>
</html>
[Q4]

You might also like