← Methods 3

In-class Exercises

Part 1: HTML

Download today's data.
Upload the CSV to your Carto account (NYC_Women_s_Resource_Network_Database.csv). This is from the NYC Open Data portal.
Make a map using the data.
Let's add a link back to the source (NYC Open Data portal). Add a legend, edit the HTML for it, and add this at the bottom of the legend (you can copy and paste it):
```
<p>
    Data from <a href="https://data.cityofnewyork.us/Social-Services/NYC-Women-s-Resource-Network-Database/pqg4-dm6b/data">NYC Open Data portal</a>
</p>
```
Let's link to each resource's website. Add a popup for the layer and add the url field to it. Then edit the HTML and find {{url}} in it. Replace {{url}} with this:
```
<a href="{{url}}">Learn more</a>
```
If you want the links to open in their own tab, use this instead:
```
<a href="{{url}}" target="_blank">Learn more</a>
```

Part 2: CSS

Let's make the link in the legend blend in better with the rest of it. We'll add top margin to the link to make space between it and the legend, then make the font a bit smaller. In the legend, update our current link:

<p>
    Data from <a href="https://data.cityofnewyork.us/Social-Services/NYC-Women-s-Resource-Network-Database/pqg4-dm6b/data">NYC Open Data portal</a>
</p>

with this:

<p style="margin-top: 20px; font-size: 10px;">
    Data from <a href="https://data.cityofnewyork.us/Social-Services/NYC-Women-s-Resource-Network-Database/pqg4-dm6b/data">NYC Open Data portal</a>
</p>

You may want to change more font styles, too. Try adding a style to the link, ending up with this:

<p style="margin-top: 20px; font-size: 10px;">
    Data from <a href="https://data.cityofnewyork.us/Social-Services/NYC-Women-s-Resource-Network-Database/pqg4-dm6b/data" style="color: #820575; font-weight: bold;">NYC Open Data portal</a>
</p>

Feel free to try a different color.