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:
cssnav 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:
cssfooter { 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:
cssheader { 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:
csstable { 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.