Place In Order – Easy

This is the classic refrigerator magnet exercise. The objective is to place the html tags in the correct order to make a web page. Click and drag each element to the correct order. Once you master this page, head on over to the Place in Order Challenge version.

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›
  • ‹main›
  • ‹html lang="en"›
  • ‹/html›
  • ‹!DOCTYPE html›
  • ‹header›
  • ‹/body›
  • ‹/header›
  • ‹nav›
  • ‹meta charset="UTF-8"›
  • ‹head›
  • ‹/nav›
  • ‹/main›
  • ‹footer›
  • ‹body›
  • ‹/footer›