Place in Order Challenge

This is the classic refrigerator magnet exercise. The objective is to place the html tags in the correct order to make the Guitar Shop web page. Click and drag each element to the correct order. If this is too difficult, head on over the the Easy Version.

There are a few places in the website where code could go in a couple of different orders:

Hint 1: The <meta> data should go above the <title>. This is the preferred order.

Hint 2: On this website, the hero image goes inside of the <main> section of the website.

This exercise relies on jQueryUI for the “sortable” functionality. For the touch screens to work, I also added jQuery UI Touch Punch as well. On this webpage, there is an exact order that must be followed. On a real website, a few of these code snippets could be in a different order.

  • ‹head›
  • ‹/head›
  • ‹body›
  • ‹/body›
  • ‹li›‹a href="index.html"›Home‹/a›‹/li›
  • ‹li›‹a href="about.html"›About‹/a›‹/li›
  • ‹li›‹a href="contact.html"›Contact‹/a›‹/li›
  • ‹li›‹a href="shop.html"›Shop‹/a›‹/li›
  • ‹ul›
  • ‹/ul›
  • ‹h1›My Guitar Shop‹/h1›
  • ‹html lang="en"›
  • ‹/html›
  • ‹h2›The best guitar shop in town‹/h2›
  • ‹!DOCTYPE html›
  • ‹header›
  • ‹/header›
  • ‹nav›
  • ‹/nav›
  • ‹p›Lorem ipsum . . . est laborum.‹/p›
  • ‹small›© My Guitar Shop‹/small›
  • ‹title›My Guitar Shop‹/title›
  • ‹img src="images/guitarshop.png" height=450" width="900" alt="Guitar Shop"›
  • ‹meta charset="UTF-8"›
  • ‹main›
  • ‹/main›
  • ‹footer›
  • ‹/footer›