Movie Details Project
Build a dedicated HTML webpage showcasing the Spider-Man movies, utilising the provided image resources to create a visually appealing presentation. You will be building this project as part of our HTML Course.
Resources: Toby Maguire, Andrew Garfield, Tom Holland, Spiderman - 2002, Spiderman and Green Goblin, Spiderman and Mary Jane, Spiderman 2004, Doctor Octavious, Spiderman 2007, Spiderman 3 - Cover, The Amazing Spiderman, The Amazing Spiderman 2, Spiderman - Homecoming, Spiderman - Far From Home, Spiderman - No Way Home, Spiderman - Face Icon, Spider - Emoji, Spider Web - Emoji
Things you need to know: Use of <h1>, <h3>, <p>, <ul>, <ol>, <a>, <img>, alt, attribute, <label>, <form>, <fieldset>, <legend>, <table>, <input>, <textarea>, <button>, <br>
Task - 01
Add the main heading with the text, Spider-man and use the Spiderman face icon provided in the resource.
Add a sub-heading with the text, About Spider-man. Use the emoji provided in the resources section.
Add a paragraph about Spider-man with text of your choice.
Add a sub-heading with the text, Actors who have played Spider-Man.
Add a non-numbered list. It should list the names of three actors: Tobey Maguire, Andrew Garfield and Tom Holland.
Add three images of the three actors using the provided resources.
Ensure that the three images are side-by-side and not one after the other.
Task - 02
Add a sub-heading with the text: All Movies Starring These Actors: A Comprehensive List. Use the spider emoji provided in the resources section.
Add a paragraph about these movies with text of your choice.
Task - 03
Add a sub-heading with the text, Tobey Maguire. Use the spider-web emoji provided in the resources section.
Add a list which will display the three movies.
Each list item should contain the name of the movie and below it should be an image from the movie. Use the images from the provided resources.
Task - 04
Add a sub-heading with the text, Andrew Garfield. Use the spider-web emoji provided in the resources section.
Add a list which will display the two movies.
Each list item should contain the name of the movie and below it should be an image from the movie. Use the images from the provided resources.
Task - 05
Add a sub-heading with the text, Tom Holland. Use the spider-web emoji provided in the resources section.
Add a list which will display the three movies.
Each list item should contain the name of the movie and below it should be an image from the movie. Use the images from the provided resources.
Task - 06
Add a table with the title, Top 5 Movies Ranked By Their Box Office Gross.
Create a table with six rows. The top row should be the header row.
In the header row, add the following values: Movie Name, Year, Gross Earning, and IMDB Rating.
Add the data from Wikipedia for the five movies.
Task - 07
Add a form below the table.
The form should have the heading, Virtual Fan Club Registration Form.
Add a fieldset element to include all the user details. The fieldset element should display the text User Info as the title.
Add an input element and appropriate label to get the user's Registration Date.
Add an input element and appropriate label to get the user's Name.
Add an input element and appropriate label to get the user's Email.
Add an input element and appropriate label to get the user's Mobile Number.
Add an input element and appropriate label to get the user's Date of Birth.
Add a label to ask the user, Which movie did you like the most and provide the choices in a dropdown.
Use the names of all the movies mentioned above in the page.
Add a label to ask the user, Which Cinematic Universe you support and provide the choices Marvel and DC using radio buttons.
Add a label Review and provide a way for the user to leave their detailed review. Ensure that the field is large enough for at least three lines of review.
Add the Submit and Reset buttons in the form.
More projects
These are some of the projects you'll build while learning.
