Scribd
Upload
44 views6 pages

Assignment 3 Web Technologies Answers

Uploaded by

test.root421
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
44 views6 pages

Assignment 3 Web Technologies Answers

Uploaded by

test.root421
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/ 6

Assignment 3: Design and Web Technologies - Answers

5 Marks Questions

Q1: Centering a Box with CSS:

To center a box both horizontally and vertically on a webpage using CSS, follow these steps:

1. Set the container's `height` to 100% (or any specific height).

2. Apply `display: flex` to the container.

3. Use `justify-content: center` to horizontally center the box.

4. Apply `align-items: center` to vertically center the box.

Example CSS:

.container {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

.box {

width: 200px;

height: 200px;

background-color: lightblue;

Q2: Creating a Basic Form:

To create a simple form collecting a user's name, email, and message, you can structure the HTML

as follows:

<form>
<label for="name">Name:</label>

<input type="text" id="name" name="name"><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email"><br>

<label for="message">Message:</label>

<textarea id="message" name="message"></textarea><br>

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

</form>

CSS for Styling:

form {

width: 300px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 10px;

input, textarea {

width: 100%;

padding: 10px;

margin: 10px 0;

border-radius: 5px;

border: 1px solid #ccc;


}

button {

background-color: #4CAF50;

color: white;

padding: 10px;

width: 100%;

border: none;

border-radius: 5px;

10 Marks Questions

Q4: CSS Media Queries for Responsiveness:

Media queries are crucial for designing responsive websites as they allow the layout to adapt to

different screen sizes. This ensures an optimal user experience across devices. For instance, you

can hide or change the appearance of elements based on screen width.

Example media query for altering a navigation menu on smaller screens:

@media (max-width: 600px) {

.menu {

display: none;

.hamburger {

display: block;

In this example, the .menu is hidden on screens smaller than 600px, and the .hamburger menu is
shown, enhancing responsiveness.

Q5: Tabular Data with CSS:

To display tabular data, HTML structure can be like this:

<table>

<thead>

<tr>

<th>Product</th>

<th>Price</th>

<th>Availability</th>

</tr>

</thead>

<tbody>

<tr>

<td>Product A</td>

<td>$10</td>

<td>In stock</td>

</tr>

<tr>

<td>Product B</td>

<td>$20</td>

<td>Out of stock</td>

</tr>

</tbody>

</table>

CSS for alternating row colors:


table {

width: 100%;

border-collapse: collapse;

td, th {

padding: 10px;

border: 1px solid #ccc;

tbody tr:nth-child(odd) {

background-color: #f2f2f2;

20 Marks Questions

Q7: CSS Media Queries for Mobile Layouts:

Media queries enable developers to create mobile-friendly layouts by targeting specific screen sizes.

Here's an example of adjusting a layout for screens smaller than 480px:

@media (max-width: 480px) {

.content {

width: 100%;

padding: 10px;

.sidebar {

display: none;

In this case, the .content takes up the full width on mobile screens, and the sidebar is hidden for
better readability on smaller devices.

Q9: Creating Complex Animations:

CSS keyframes can be used to create complex animations. Here's a step-by-step process:

1. Define the animation using @keyframes.

2. Use the animation property to apply it to an element.

3. Customize properties like duration, delay, and iteration count.

Example code for an animation that moves and scales an element:

@keyframes slide {

0% {

transform: translateX(0) scale(1);

50% {

transform: translateX(100px) scale(1.5);

100% {

transform: translateX(0) scale(1);

.element {

width: 100px;

height: 100px;

background-color: lightcoral;

animation: slide 2s ease-in-out infinite;

This code creates a smooth sliding and scaling animation for the .element.

You might also like