HTML-Drills

Objective

Implement and practice the use of HTML elements and attributes.

1. Create an index.html file, insert the basic elements needed to start a html file, this will include a doctype element, html elements, head elements and body elements. Hint: There is a keyboard shortcut to complete this! Try researching emmet abbreviations.
2. Inside the of your page, insert h1 through h6 elements, give each heading element some funny text.
3. Add a comment before each heading to give yourself a reminder what the purpose of that section should be.
4. Insert a div element, inside of the div insert 6 paragraph elements. Inside each, write a little bit about yourself.
5. Add an image after each paragraph in your page.
6. "Wrap" each section (heading, paragraph, and image) with a
   tag. The open section tag should precede the first heading tag, and the closing section tag should be after the image tag. Remember to indent properly! (HINT: if your indentation ever gets out of whack, just right click anywhere in VS Code and click "Format Document"!)
7. In between every paragraph and image, create an unordered list with at least three list items. Again, the content contained in this list is up to you!
8. Create a form with three inputs: first name, last name, and email address. Make sure each input is labeled, and that all of them are wrapped with form tags.
9. Add a button to the form using an input tag (HINT: You may need to google html form submission).
10. Create an ordered list, give this at least list 5 list items of things you're excited to learn about in covalence.
11. Create an unordered list, give this list at least 5 interesting facts about yourself. Wrap the entire page in a
    .
12. Reformat the document. How does it change compared to what you had originally written? (HINT: You can use cmd+z to undo and cmd+shift+z to redo on a Mac. On Windows it is ctrl+z to undo and ctrl+y to redo)
13. Add a horizontal line between each section in your document.
14. Add hyperlinks to each image that opens the image in a new tab.
15. At the top of your page, create a table with the following columns (headers): Month, Day, Year.
16. Then, add a row for each day that you worked on these tasks.
17. In the last heading element (h6) add either a copyright or trademark HTML symbol entity to the end of the text content.
18. Add an anchor tag, have this link to a funny youtube video.
19. Add a horizontal line, below the line add a div.
20. Inside the div add a h1, give this h1 some text thats your favorite movie.
21. Insert an image tag of the movie poster.
22. Add a paragraph element below the heading, have this be a description/plot of the movie (NO SPOILERS).
23. Add an unordered list with the cast of the movie.
24. Add another unordered list with release date, budget and box office sale stats.
25. Embed a trailer of the film using youtube.