Assignments Of Class 25: Final Project and Course Review

Rashmi Mishra
5 minute read
0

 

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.



Post a Comment

0Comments

Post a Comment (0)