Skip to content

Instantly share code, notes, and snippets.

@alexpelan
Created October 11, 2017 22:02
Show Gist options
  • Select an option

  • Save alexpelan/834f6fe2a351d0e3dc02f1e5efa4a9f8 to your computer and use it in GitHub Desktop.

Select an option

Save alexpelan/834f6fe2a351d0e3dc02f1e5efa4a9f8 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=834f6fe2a351d0e3dc02f1e5efa4a9f8

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, add the second class to your html and style them in a different way based on this. For example, you could rate them one through five stars and make text size bigger for higher star ratings
  • 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 Emipre 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