HTML CSS and Javascript Practice based Questions and Solutions
1. Basic
Button
Tech
Stack: HTML,
JavaScript
Description: Create a button that displays an alert when clicked.
html
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Basic
Button</title>
</head>
<body>
<button
id="alertButton">Click Me</button>
<script>
document.getElementById("alertButton").addEventListener("click",
() => {
alert("Button clicked!");
});
</script>
</body>
</html>
2. Navigation Bar
Tech
Stack: HTML,
CSS
Description: Create a horizontal navigation bar with links.
html
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Navigation
Bar</title>
<style>
body
{
margin:
0;
font-family:
Arial, sans-serif;
}
nav {
background-color:
#333;
overflow:
hidden;
}
nav a
{
float:
left;
display:
block;
color:
white;
text-align:
center;
padding: 14px 20px;
text-decoration:
none;
}
nav a:hover
{
background-color:
#575757;
}
</style>
</head>
<body>
<nav>
<a
href="#home">Home</a>
<a
href="#about">About</a>
<a
href="#services">Services</a>
<a
href="#contact">Contact</a>
</nav>
</body>
</html>
3. Form Design
Tech
Stack: HTML,
CSS
Description: Design a simple form with input fields and a submit button.
html
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Form
Design</title>
<style>
body
{
font-family:
Arial, sans-serif;
display:
flex;
justify-content:
center;
align-items:
center;
height: 100vh;
background-color:
#f2f2f2;
}
form
{
background:
white;
padding:
20px;
border-radius:
8px;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.2);
}
input[type="text"],
input[type="email"], input[type="submit"] {
width:
100%;
padding:
10px;
margin:
10px 0;
border:
1px solid #ccc;
border-radius:
4px;
}
input[type="submit"]
{
background-color: #4CAF50;
color:
white;
border:
none;
}
input[type="submit"]:hover
{
background-color:
#45a049;
}
</style>
</head>
<body>
<form>
<label
for="name">Name:</label>
<input
type="text" id="name" name="name" placeholder="Enter
your name" required>
<label
for="email">Email:</label>
<input
type="email" id="email" name="email" placeholder="Enter
your email" required>
<input
type="submit" value="Submit">
</form>
</body>
</html>
4. Image Gallery
Tech
Stack: HTML,
CSS
Description: Create an image gallery with a responsive grid layout.
html
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Image
Gallery</title>
<style>
body
{
font-family:
Arial, sans-serif;
margin:
0;
padding:
0;
display: flex;
justify-content:
center;
align-items:
center;
min-height:
100vh;
background-color:
#f0f0f0;
}
.gallery
{
display:
grid;
grid-template-columns:
repeat(auto-fit, minmax(150px, 1fr));
gap:
10px;
max-width:
800px;
width:
100%;
padding:
10px;
}
.gallery
img {
width:
100%;
border-radius:
8px;
transition:
transform 0.3s;
}
.gallery
img:hover {
transform:
scale(1.1);
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://via.placeholder.com/150"
alt="Image 1">
<img src="https://via.placeholder.com/150"
alt="Image 2">
<img src="https://via.placeholder.com/150"
alt="Image 3">
<img src="https://via.placeholder.com/150"
alt="Image 4">
<img src="https://via.placeholder.com/150"
alt="Image 5">
<img src="https://via.placeholder.com/150"
alt="Image 6">
</div>
</body>
</html>
Explanation:
1. Body
Styling:
display: flex;centers the gallery in the middle of the screen.background-color: #f0f0f0;sets a light grey background.
2. Grid
Layout for Gallery:
display: grid;turns the gallery container into a grid layout.grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));:- Automatically
adjusts the number of columns.
- Each
image takes a minimum width of 150px and stretches to fill available
space.
gap: 10px;adds space between images.
3. Image
Styling:
width: 100%;ensures images fill their grid cells.border-radius: 8px;rounds the corners of each image.transition: transform 0.3s;animates the hover effect smoothly.
4. Hover
Effect:
transform: scale(1.1);slightly enlarges the image when hovered over.- Adds
interactivity and visual appeal.
Step 3: Making It Responsive
The CSS grid-template-columns
property automatically adjusts the number of columns based on screen size.
For smaller devices, images stack vertically, while on larger screens, they
form a grid.
Result
When you open this in a browser:
- You'll
see a grid of images.
- Each
image resizes based on the screen size.
- When you
hover over an image, it enlarges slightly with a smooth animation.
Comments
Post a Comment
If you have any Doubts plz let me know