Assignments Of Class 25: Final Project and Course Review
Assignment 1: Create a Basic HTML Page
Objective: Create a simple HTML page with a heading, a paragraph, an image, and a link.
Step-by-Step Solution:
1. Create the basic HTML structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page
</title>
</head>
<body>
<h1>Welcome to My First Page
</h1>
<p>This is my first HTML page where I add a heading, paragraph, image, and a link.
</p>
<img src="image.jpg" alt="Sample Image">
<a href="https://www.example.com" target="_blank">Click Here to Visit Example
</a>
</body>
</html>
2. Explanation:
o The <!DOCTYPE html>
tag defines the document as HTML5.
o The <html lang="en">
tag defines the language of the document.
o Inside the <head>
, we specify metadata, such as the character set and viewport for mobile responsiveness.
o The <body>
contains the content: a heading (<h1>
), a paragraph (<p>
), an image (<img>
), and a hyperlink (<a>
).
Assignment 2: Create a Contact Form
Objective: Create a contact form with text inputs, a textarea, and a submit button.
Step-by-Step Solution:
1. Create the HTML structure for the form:
html
<form action="#" method="POST">
<label for="name">Name:
</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:
</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:
</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
2. Explanation:
o The <form>
tag is used to create a form, with the action
attribute defining where to send the form data, and the method
attribute specifying the HTTP method (POST
or GET
).
o The <label>
tag defines labels for the input fields.
o The <input>
tag is used for text and email input types.
o The <textarea>
tag is for multi-line text input.
o The required
attribute ensures that the user fills in the field before submission.
Assignment 3: Build a Navigation Bar
Objective: Create a simple navigation bar with links for "Home," "About," and "Contact."
Step-by-Step Solution:
1. HTML Structure:
html
<nav>
<ul>
<li><a href="#home">Home
</a></li>
<li><a href="#about">About
</a></li>
<li><a href="#contact">Contact
</a></li>
</ul>
</nav>
2. CSS for Styling the Navigation Bar:
css
nav
ul {
list-style-type: none;
padding:
0;
text-align: center;
}
nav
ul
li {
display: inline;
margin:
0
10px;
}
nav
ul
li
a {
text-decoration: none;
font-size:
20px;
color:
#333;
}
nav
ul
li
a:hover {
color:
#007BFF;
}
3. Explanation:
o The <nav>
element defines a section of the page for navigation.
o The <ul>
creates an unordered list of links.
o In CSS, the list is styled to remove bullets (list-style-type: none
), and links are centered using text-align: center
.
o The inline
display for list items ensures the links are shown on the same line.
Assignment 4: Create a Responsive Image Gallery
Objective: Create an image gallery with three columns that adjust to one column on smaller screens.
Step-by-Step Solution:
1. HTML for Image Gallery:
html
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
2. CSS for Styling:
css
.gallery {
display: grid;
grid-template-columns:
repeat(
3,
1fr);
gap:
10px;
}
.gallery
img {
width:
100%;
height: auto;
}
@media screen
and (
max-width:
600px) {
.gallery {
grid-template-columns:
1fr;
}
}
3. Explanation:
o The .gallery
class uses CSS Grid (display: grid
) to create three equal-width columns (grid-template-columns: repeat(3, 1fr)
).
o The @media
query changes the layout to one column when the screen width is 600px or smaller.
Assignment 5: Create a Card Layout
Objective: Create a card layout with an image, title, and description for each card.
Step-by-Step Solution:
1. HTML Structure for the Card:
html
<div class="card">
<img src="card-image.jpg" alt="Card Image">
<h2>Card Title
</h2>
<p>Some description about the card.
</p>
</div>
2. CSS Styling:
css
.card {
border:
1px solid
#ccc;
padding:
20px;
width:
250px;
text-align: center;
margin:
10px;
}
.card
img {
width:
100%;
height: auto;
}
.card
h2 {
font-size:
22px;
margin:
10px
0;
}
.card
p {
font-size:
16px;
color:
#555;
}
3. Explanation:
o Each .card
has a border, padding, and fixed width for consistency.
o The image inside the card is set to fill the width of the container (width: 100%
).
o The text-align: center
ensures the text is centered inside the card.
Assignment 6: Create a Footer
Objective: Design a footer with contact information and links to social media.
Step-by-Step Solution:
1. HTML Structure for Footer:
html
<footer>
<p>Contact us: email@example.com
</p>
<ul>
<li><a href="#">Facebook
</a></li>
<li><a href="#">Twitter
</a></li>
<li><a href="#">Instagram
</a></li>
</ul>
</footer>
2. CSS Styling for Footer:
css
footer {
background-color:
#333;
color: white;
padding:
20px;
text-align: center;
}
footer
ul {
list-style-type: none;
padding:
0;
}
footer
ul
li {
display: inline;
margin:
0
10px;
}
footer
a {
color: white;
text-decoration: none;
}
3. Explanation:
o The <footer>
element is styled with a dark background (background-color: #333
) and white text.
o Links inside the footer are styled to remove the default underline and are white in color.
Assignment 7: Create a Flexbox Layout
Objective: Create a flexbox layout for a header with a logo and navigation links.
Step-by-Step Solution:
1. HTML Structure:
html
<header>
<div class="logo">MyLogo
</div>
<nav>
<ul>
<li><a href="#">Home
</a></li>
<li><a href="#">About
</a></li>
<li><a href="#">Contact
</a></li>
</ul>
</nav>
</header>
2. CSS Using Flexbox:
css
header {
display: flex;
justify-content: space-between;
align-items: center;
padding:
20px;
background-color:
#f8f8f8;
}
nav
ul {
list-style-type: none;
}
nav
ul
li {
display: inline;
margin:
0
10px;
}
3. Explanation:
o display: flex
makes the header a flex container, and justify-content: space-between
ensures that the logo and navigation links are spaced apart.
o align-items: center
vertically aligns the content within the header.
Assignment 8: Create a Table
Objective: Create a table displaying student information with headers and borders.
Step-by-Step Solution:
1. HTML Table Structure:
html
<table>
<tr>
<th>Name
</th>
<th>Age
</th>
<th>Grade
</th>
</tr>
<tr>
<td>John
</td>
<td>16
</td>
<td>A
</td>
</tr>
<tr>
<td>Jane
</td>
<td>17
</td>
<td>B
</td>
</tr>
</table>
2. CSS for Table Styling:
css
table {
width:
100%;
border-collapse: collapse;
}
th,
td {
border:
1px solid
#ddd;
padding:
8px;
text-align: center;
}
th {
background-color:
#f4f4f4;
}
3. Explanation:
o border-collapse: collapse
removes spacing between table cells.
o The <th>
and <td>
elements are styled to add borders, padding, and center alignment.
Assignment 9: Implement a Hover Effect on Buttons
Objective: Create a button that changes color when hovered over.
Step-by-Step Solution:
1. HTML for Button:
html
<button class="hover-button">Click Me
</button>
2. CSS for Hover Effect:
css
.hover-button {
background-color:
#4CAF50;
color: white;
padding:
10px
20px;
border: none;
cursor: pointer;
}
.hover-button:hover {
background-color:
#45a049;
}
3. Explanation:
o The .hover-button
class styles the button with background color, text color, and padding.
o The :hover
pseudo-class changes the background color when the user hovers over the button.
Assignment 10: Create a Responsive Layout
Objective: Design a responsive layout that adjusts from a two-column layout on large screens to a single-column layout on small screens.
Step-by-Step Solution:
1. HTML Structure:
html
<div class="container">
<div class="column">Content 1
</div>
<div class="column">Content 2
</div>
</div>
2. CSS for Responsive Layout:
css
.container {
display: flex;
justify-content: space-between;
}
.column {
width:
48%;
}
@media screen
and (
max-width:
600px) {
.container {
flex-direction: column;
}
.column {
width:
100%;
}
}
3. Explanation:
o The .container
uses flexbox
to create a two-column layout.
o The @media
query changes the layout to a single column for screens smaller than 600px.