4.3. Final Project and Review (30 minutes)
Students will work on a mini-project: create a simple webpage with proper structure, forms, lists, and media elements.
Review and feedback session to discuss what was learned and areas for improvement.
4.3. Final Project and Review (30 minutes)
Objective:
In this final project, students will apply everything they've learned in the course by creating a simple webpage that incorporates various HTML elements such as structure, forms, lists, and media. This will give them the opportunity to showcase their understanding of HTML fundamentals and demonstrate their ability to create well-structured, functional web pages.
Instructions for the Final Project:
Create a New HTML File for the Project:
Ask students to create a new HTML file (e.g., First_Business-card
project.html) using their preferred text editor (such as Notepad or Visual Studio Code).
Build the Webpage Structure:
Students should start by creating the basic structure of the webpage, ensuring they use semantic HTML tags such as
<header>,<nav>,<section>,<article>, and<footer>.Example of the webpage structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Final Project</title> </head> <body> <header> <h1>Welcome to My Website</h1> <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> </header> <section id="main-content"> <article> <h2>About Me</h2> <p>This is a short description about me and my interests.</p> </article> </section> <footer> <p>© 2024 KSTU ISE Website</p> </footer> </body> </html>Add a Form:
Instruct students to add a contact form to their webpage with input fields for name, email, and a message, as well as a submit button.
Example of a basic form:
<h2>Contact Me</h2> <form action="/submit-form" 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" required></textarea><br><br> <input type="submit" value="Send Message"> </form>
Add a List:
Students should include either an ordered or unordered list that highlights their top skills, favorite books, websites, or hobbies.
Example:
<h2>My Favorite Books</h2> <ul> <li>The Great Gatsby</li> <li>To Kill a Mockingbird</li> <li>1984</li> </ul>
Embed a Media Element:
Students should embed either a video or an audio file on their webpage. They can use a public video URL or a local media file.
Example of an embedded video:
<h2>Watch My Favorite Video</h2> <video width="320" height="240" controls> <source src="https://www.example.com/video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Save and Preview the Webpage:
After completing the webpage, students should save their HTML file and open it in a browser to preview the results.
They should ensure that all elements—structure, form, list, and media—are properly displayed and functional.
Review and Feedback Session:
Student Presentations:
Allow students to present their final projects to the class, either by sharing their screen (if online) or displaying their work on a shared projector (if in person).
Students should walk through their webpage, explaining the various elements they included and why.
Peer Review:
Pair students up or form small groups for a peer review session. Each student or group should:
View a peer’s webpage.
Provide feedback on the following aspects:
Structure: Are the semantic tags (
<header>,<section>,<footer>, etc.) used properly?Forms: Does the form include all necessary fields (name, email, message) and submit properly?
Lists and Media: Is the list well-organized, and does the video or audio play as expected?
Highlight one strength of the webpage and suggest one area for improvement.
Instructor Feedback:
After the peer review, the instructor can select a few students to share their webpages with the entire class for a final review.
Provide constructive feedback, focusing on:
Correct use of HTML structure.
Functionality of the form, list, and media elements.
Suggestions for improvement, such as better use of semantic tags, adding more interactivity, or improving the layout with CSS.
Reflection and Takeaways:
After the review session, lead a class discussion where students reflect on what they learned during the project:
What was the most challenging part of building your webpage?
How did you ensure your webpage was accessible and well-structured?
What improvements would you make if you had more time?
Encourage students to share their thoughts on the importance of good HTML structure and the role of each element (forms, lists, media) in creating a functional, user-friendly webpage.
Extended Activity (Optional):
For students who finish early or want additional practice, suggest the following:
Style the Webpage with CSS:
Encourage students to add basic CSS to improve the layout and design of their webpage, such as changing font styles, adding background colors, or adjusting margins and padding.
Example of a simple CSS block:
<style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, footer { background-color: #333; color: white; text-align: center; padding: 10px 0; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin: 0 15px; } section { padding: 20px; } </style>
Expand the Project:
Suggest that students expand their project by adding more sections (e.g., a blog section with multiple articles) or enhancing the form with additional input fields like a dropdown or radio buttons.
By the end of this final project, students will have demonstrated their ability to create a complete, well-structured webpage with proper use of forms, lists, and media elements. This project will help them apply their knowledge and understand how different HTML elements come together to create a functional and user-friendly webpage.
Last updated