// 1: SHOW AN ALERT AS SOON AS THE DOCUMENT IS READY
// 2: COMMENT OUT #1. USE THE DOCUMENT.READY SHORTHAND TO ADD TEXT INTO THE H1 ELEMENT
// 3: SELECT ALL OF THE ELEMENTS WITH THE CLASS OF "red" AND APPLY THE "bigsize" CLASS TO THEM
// 4: SELECT THE ELEMENT WITH THE ID OF "blue2" AND APPLY THE "smallsize" CLASS TO IT
// 5: SWITCH OFF THE "bigsize" CLASS FOR ALL OF THE ELEMENTS THAT HAVE IT
// 6: SELECT ALL OF THE ELEMENTS THAT HAVE THE CLASS "normalsize" AND APPLY THE "smallsize" CLASS TO THE FIRST AND LAST
// 7: SHOW AN ALERT WHEN AN ELEMENT WITH CLASS "trench" IS CLICKED
// 8: WHEN A USER CLICKS THE LINK WITH THE ID "outerwear_man", HIDE THE ELEMENTS WITH CLASS "woman"
// 9: THAT'S KIND OF ABRUPT. INSTEAD, UPDATE #8 SO THAT THE ELEMENTS WITH CLASS "woman" FADE OUT IN 5 SECONDS (500 milliseconds)
// 10: WHEN A USER CLICKS THE LINK WITH THE ID "outerwear_woman", SLIDE UP THE ELEMENTS WITH THE CLASS "man"
// 11: UPDATE #9 & #10 SO THAT WHEN MEN ARE HIDDEN, WOMEN ARE SHOWN AND WHEN WOMEN ARE HIDDEN, MEN ARE SHOWN
// 12: ADD A CLICK EVENT TO THE ELEMENT WITH THE ID OF "outerwear_all" SO THAT ALL OF THE ELEMENTS WITH CLASS "outerwear" ARE DISPLAYED
// 13: UNCOMMENT THE COMMENTED BIT OF CSS. ADD A HOVER EVENT TO EACH ELEMENT WITH THE "outerwear" CLASS THAT SHOWS THE NEXT "em" ELEMENT
// 14: COMMENT OUT THE JQUERY IN #13. ADD A HOVER EVENT TO EACH ELEMENT WITH THE "outerwear" CLASS THAT ANIMATES THE NEXT "em" ELEMENT (INSTEAD OF JUST SHOWING AND HIDING)
// 15: ADD A CLICK EVENT TO THE ELEMENT WITH ID OF "outerwear_jacket" THAT HIDES OTHER COAT TYPES ("trench," "bomber")
// CHECK EACH ELEMENT WITH CLASS "outerwear". IF IT DOES NOT CONTAIN THE "jacket" CLASS, HIDE THE ELEMENT
