WT Mid-Sem: Full Questions &
Boilerplate Solutions
Section 1: HTML & CSS (Structure + Styling)
Q1. Simple Webpage with Centered Content
Question: Create a simple webpage that displays a heading and any content. Apply CSS to
align all content at the center and add some spacing around it.
<!DOCTYPE html>
<html>
<head>
<title>Q1 Solution</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
text-align: center;
}
.content {
padding: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to My Site</h1>
<p>This is a centered paragraph with spacing around it.</p>
</div>
</body>
</html>
Q2. Responsive Image
Question: Create a webpage that displays an image. Apply CSS to control its size and ensure it
adjusts properly on different screen sizes.
<!DOCTYPE html>
<html>
<head>
<title>Q2 Solution</title>
<style>
.img-container {
width: 80%;
margin: auto;
}
img {
max-width: 100%; /* Key for responsiveness */
height: auto;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="img-container">
<h2>Responsive Image</h2>
<img
src="[[Link]
/800x400)" alt="Sample Image">
</div>
</body>
</html>
Q3. Styled Data Table
Question: Design a small data table with at least 3 columns. Apply CSS to style borders, text
alignment, and background color for better readability.
<!DOCTYPE html>
<html>
<head>
<title>Q3 Solution</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) { background-color: #f2f2f2; }
</style>
</head>
<body>
<table>
<tr><th>ID</th><th>Name</th><th>Score</th></tr>
<tr><td>1</td><td>Rahul</td><td>85</td></tr>
<tr><td>2</td><td>Sneha</td><td>92</td></tr>
</table>
</body>
</html>
Q4. Box with Hover Effect
Question: Create a box (div) with some text inside it. Apply CSS to add background color,
padding, margin, and a hover effect.
<!DOCTYPE html>
<html>
<head>
<title>Q4 Solution</title>
<style>
.box {
background-color: lightcoral;
padding: 30px;
margin: 20px;
width: 200px;
text-align: center;
transition: transform 0.3s, background-color 0.3s;
}
.box:hover {
background-color: crimson;
color: white;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="box">Hover Over Me!</div>
</body>
</html>
Q5. Horizontal Navigation Menu
Question: Create a simple menu using links. Apply CSS to arrange the links neatly in a row and
improve their appearance.
<!DOCTYPE html>
<html>
<head>
<title>Q5 Solution</title>
<style>
nav { background: #333; padding: 15px; }
nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
nav a:hover { background: #555; border-radius: 5px; }
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
Section 2: Forms & Input Handling
Q6. Form & JavaScript Message
Question: Create a form with at least one input field and a button. Use JavaScript to display a
message based on user input.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="nameInput" placeholder="Enter name">
<button onclick="greet()">Click Me</button>
<p id="msg"></p>
<script>
function greet() {
let name = [Link]("nameInput").value;
[Link]("msg").innerHTML = "Hello, " +
name + "!";
}
</script>
</body>
</html>
Q7. Dropdown Selection Handler
Question: Create a dropdown list with multiple options. Write JavaScript code to display the
selected option when it is changed.
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" onchange="showOption()">
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="C++">C++</option>
</select>
<p id="result"></p>
<script>
function showOption() {
let choice = [Link]("mySelect").value;
[Link]("result").innerText = "You picked:
" + choice;
}
</script>
</body>
</html>
Section 3: JavaScript Basics
Q8. Simple Calculation Program
Question: Write a JavaScript program to take input from the user and perform a simple
calculation. Display the result using an alert.
<!DOCTYPE html>
<html>
<body>
<button onclick="calculate()">Start Calculation</button>
<script>
function calculate() {
let n1 = prompt("Enter Number 1:");
let n2 = prompt("Enter Number 2:");
let sum = Number(n1) + Number(n2);
alert("The Sum is: " + sum);
}
</script>
</body>
</html>
Q9. String Analysis Program
Question: Write a JavaScript program to take a string input and display some information about
it (such as length or modified format).
<!DOCTYPE html>
<html>
<body>
<button onclick="stringInfo()">Check String</button>
<script>
function stringInfo() {
let str = prompt("Enter a word:");
alert("Length: " + [Link] + "\nUppercase: " +
[Link]());
}
</script>
</body>
</html>
Q10. Change Content on Click
Question: Create a button and write JavaScript so that when the button is clicked, some
content on the page changes.
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Original Title</h1>
<button onclick="change()">Change Title</button>
<script>
function change() {
[Link]("header").innerHTML = "New Title
Applied!";
}
</script>
</body>
</html>
Section 4: Events & Responsiveness
Q11. Interaction Effect (Hover/Click)
Question: Create a webpage element (button or box) and apply an effect when the user
interacts with it (such as clicking or hovering).
<!DOCTYPE html>
<html>
<head>
<style>
.active-box {
width: 100px; height: 100px; background: blue;
transition: 0.5s; cursor: pointer;
}
.active-box:active { background: yellow; border-radius: 50%; }
</style>
</head>
<body>
<div class="active-box">Hold Click</div>
</body>
</html>
Q12. Media Query Layout
Question: Create a simple webpage layout and use a media query to change the style (such as
font size, width, or layout) when the screen size becomes smaller.
<!DOCTYPE html>
<html>
<head>
<style>
.container { background: lightblue; padding: 20px; font-size:
24px; }
@media (max-width: 600px) {
.container {
background: lightgreen;
font-size: 16px;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">This text changes size/color on
mobile!</div>
</body>
</html>