Skip to content

Instantly share code, notes, and snippets.

@alexpelan
Last active October 11, 2017 23:00
Show Gist options
  • Save alexpelan/d061c30047120c1a8169a824180cb45a to your computer and use it in GitHub Desktop.
Save alexpelan/d061c30047120c1a8169a824180cb45a to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=d061c30047120c1a8169a824180cb45a

Task 1:

Add classes to your html organize the places by borough.

Task 2:

Use CSS to make each of the classes look different. Manhattan, Brooklyn, Bronx and Staten Island and Queens should all have distinguishing characteristics (think about text color, background color, text size, etc.)

Task 3:

Add 3 new places of your own choice and categorize them according to the system.

Then, Choose your own adventure:

*Mild * 🌶

  • Add multiple CSS properties to each class
  • Add images to show each location.

Spicy 🌶🌶

  • Categorize your places in a second way, adding the second class to your html and styling the places in a different way based on this. If the place seems really interesting to you, give it one class. If it seems kinda interesting to you, give it another class. If it doesn't seem interesting at all, give it a third class.
  • For at least one place, make it so that you have the same property set to different values for the two different classes (for example, color: blue versus color: purple). Which value wins in the Popcode preview? If necessary, change your code so the borough-related class wins.
  • If you finish early, add images to show each location.
<!DOCTYPE html>
<html>
<head>
<title>03.2 Classes: Dream Travel</title>
</head>
<body>
<h1>Places I'd love to visit on my trip to NEW YORK CITYYYYYY</h1>
<p>Times Square</p>
<p>Brooklyn Museum of Art</p>
<p>Staten Island</p>
<p>Brooklyn Botanical Gardens</p>
<p>Bronx Zoo</p>
<p>The Cloisters</p>
<p>NY Mets Stadium</p>
<p>The Empire State Building</p>
<p>DUMBO</p>
<p>Yankee Stadium</p>
<p>Bronx Botanical Gardens</p>
<p>JFK Airport</p>
</body>
</html>
{"hiddenUIComponents":["editor.javascript"]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment