Skip to content

Instantly share code, notes, and snippets.

@outoftime
Last active November 28, 2017 02:01
Show Gist options
  • Save outoftime/6b725b3b4f90f2106c3794a7c8020187 to your computer and use it in GitHub Desktop.
Save outoftime/6b725b3b4f90f2106c3794a7c8020187 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=6b725b3b4f90f2106c3794a7c8020187

Borough Classifier

Add class attributes to the list items. Each list item‘s class attribute should correspond to the borough it’s in. For instance, the first item might have the class manhattan, because Times Square is in Manhattan.

Then, write CSS that gives each borough its own unique style.

Make sure the class attributes you add to your HTML match the class selectors in the CSS exactly!

If you finish early…

Along with classes, HTML lets you use IDs to add a style to exactly one element. Google “HTML IDs”, then see if you can use an ID to give special styling to Yankee Stadium.

Borough Reference

Bronx

  • Bronx Zoo
  • New York Botanical Garden
  • Yankee Stadium

Brooklyn

  • Brooklyn Botanical Garden
  • Brooklyn Museum of Art
  • DUMBO

Manhattan

  • MOMA
  • The Empire State Building
  • The Cloisters
  • Times Square

Queens

  • Citi Field
  • JFK Airport
  • MOMA

Staten Island

  • South Beach
<!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>South Beach</p>
<p>Brooklyn Botanical Garden</p>
<p>Bronx Zoo</p>
<p>The Cloisters</p>
<p>Citi Field</p>
<p>The Empire State Building</p>
<p>DUMBO</p>
<p>Yankee Stadium</p>
<p>New York Botanical Garden</p>
<p>JFK Airport</p>
<p>MOMA</p>
</body>
</html>
{"hiddenUIComponents":["editor.javascript"]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment