Core Interaction

HTML Quiz

Wednesday, 1/30 – Lab

Instructions

  1. Create a new directory in your github repo named html-quiz.
  2. Inside this directory create a file named index.html. Make sure this is a valid HTML5 document.
  3. Complete the quiz by adding your answers to the index.html file.
  4. At the end of the quiz upload your new file to GitHub. Refer to the Resources page if you need help with the commands to navigate to your directory in the terminal and push to github.

You have 30 minutes to complete the quiz. You may use the internet to help answer the questions if necessary, but don’t share or copy code between students.

Feel free to pick and choose which questions you answer first. Try to answer as many as possible, and move on if you get stuck on one problem.

Questions

  1. Using each HTML heading tag, list your favorite foods ranked by importance.

  2. Create a link to your favorite website, and add a paragraph describing why you like it so much.

  3. Insert an image of your choosing to the page. Make sure the image includes ALT text that describes the image.

  4. Nest the following series of HTML tags inside each other, where each > represents a new level. Make sure to maintain proper indentation.
    • main > section > div > p > span

  5. Create an ordered list of the top 5 countries you’d like to visit. Within each country, create another ordered list of the top cities you’d like to visit in that country. Maintain proper indentation and make sure you nest your ordered lists properly.

  6. Use pre tags to create a simple concrete poetry version of a Haiku or other poem you write. The poem should represent how you feel at this moment. * Hint: pre tags respect whitespace, you can add add lots of spaces and line breaks and they will show up like that when you view the web page.

  7. Write an HTML comment that is hidden from the browser, but displays in the code.

  8. Create a relative link that links to your repository’s home page.

  9. Create an unordered list of at least 6 musical artists you like to listen to. Add a class to each list item that matches the genre of music of that artist.

  10. Describe the difference between block, inline-block and inline elements.

  11. Use CSS to style the musical genre classes you added in question 9. Give each genre a color and personality using CSS.

  12. If you have additional time, use CSS to style this quiz.