[go: up one dir, main page]
Scribd
Upload
21 views4 pages

Web Development Questions and Answers

The document contains a series of web development questions and answers, showcasing various HTML and CSS implementations. It covers topics such as creating a fixed header table, a responsive navigation bar, a 3-column layout with a footer, a form with validation and styling, and an image rotation effect on hover. Each question includes corresponding code snippets for both HTML and CSS to illustrate the solutions.

Uploaded by

GDF dsk hgjkfdjk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views4 pages

Web Development Questions and Answers

The document contains a series of web development questions and answers, showcasing various HTML and CSS implementations. It covers topics such as creating a fixed header table, a responsive navigation bar, a 3-column layout with a footer, a form with validation and styling, and an image rotation effect on hover. Each question includes corresponding code snippets for both HTML and CSS to illustrate the solutions.

Uploaded by

GDF dsk hgjkfdjk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Web Development Questions and Answers

Question 1: Fixed Header Table

HTML

<div class="table-container">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Merged row content</td>
</tr>
</tbody>
</table>
</div>

CSS

.table-container {
max-height: 150px;
overflow-y: auto;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid #333;
padding: 10px;
text-align: left;
}

thead th {
position: sticky;
top: 0;
background: #eee;
}

Question 2: Responsive Navigation Bar

HTML

<nav class="navbar">
<a href="#">Home</a>
Web Development Questions and Answers

<a href="#">About</a>
<a href="#">Contact</a>
</nav>

CSS

.navbar {
display: flex;
flex-direction: row;
gap: 10px;
background-color: #f2f2f2;
padding: 10px;
}

.navbar a {
text-decoration: none;
color: black;
padding: 5px 10px;
}

@media (max-width: 600px) {


.navbar {
flex-direction: column;
}
}

Question 3: 3-Column Layout with Footer

HTML

<header>Top Navigation Bar</header>


<div class="layout">
<aside class="left">Left Sidebar</aside>
<main>
<section>Main Content Top</section>
<section>Main Content Bottom</section>
</main>
<aside class="right">
<div>Top Right</div>
<div>Bottom Right</div>
</aside>
</div>
<footer>Footer</footer>

CSS

body {
margin: 0;
font-family: Arial;
}
Web Development Questions and Answers

header, footer {
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}

.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
padding: 10px;
}

.left, .right, main {


background: #f4f4f4;
padding: 10px;
}

.right > div {


margin-bottom: 10px;
}

Question 4: Form with Validation and Styling

HTML

<form>
<label>Email:</label>
<input type="email" required>

<label>Password:</label>
<input type="password" minlength="8" required>

<button type="submit">Submit</button>
</form>

CSS

form {
display: flex;
flex-direction: column;
width: 250px;
gap: 10px;
}

input {
padding: 8px;
border: 2px solid #ccc;
Web Development Questions and Answers

border-radius: 4px;
}

input:focus {
border-color: #007BFF;
outline: none;
}

button {
padding: 8px;
background: #007BFF;
color: white;
border: none;
border-radius: 4px;
}

Question 5: Image Rotation on Hover

HTML

<img src="image.jpeg" alt="Rotating Image" class="rotate-img">

CSS

.rotate-img {
transition: transform 0.5s ease-in-out;
}

.rotate-img:hover {
transform: rotate(360deg);
}

You might also like