Web Mapping with Carto

CARTO is an online tool that allows you to make customizable web maps with your own or existing data.

CARTO Tutorials

• Geocoding Data - CARTO understands that geocoding is essential to data management. You can edit your dataset (or map) and apply geocoding coordinates to transform your data. This section describes the available geocoding options.
• CARTO Sidebar - The CARTO sidebar enables you to access additional tools to help you customize your map data. 
• Choropleth Map for election data - This guide describes how to make a choropleth map using 2016 US Presidential election data.

Best Practices Checklist for creating maps with CARTO.

The CARTO Map Academy.

Customize your map with HTML and CSS

HTML tags are keywords (tag names) surrounded by angle brackets that describe different webpage content: 

<tagname>content</tagname> 

Tags used in CARTO:

<div> - a container that group elements of page.
<p>This is some text in a paragraph. </p>
<a href="url">link text</a>
<img src="this is where you link to an image" alt="use this"/>
<a href="url"><img src="this is where you link to an image" alt="use this"/></a>
<br> - creates a line break.
</div> 

Double Brackets in CARTO:

{{ }} – refer to the information in your columns. If you refer to the {{name}} it will pull the information from each row in the name column of your spreadsheet.

Example of CARTO HTML:

<div class="cartodb-popup v2" >
  <a href="#close" class="cartodb-popup-close-button close" >x</a>
  <div class="cartodb-popup-content-wrapper">
    <div class="cartodb-popup-content">
      <p><a href="{{website}}" target="_blank"><img src="{{logo}}" alt="{{name}} logo"/></a><br>
        <a href="{{website}}" target="_blank">{{name}}</a></p>

      <p><a href="{{holdings_by_institution}}" alt="Primeros Libros Holdings" target="_blank">Primeros Libros Holdings</a></p>
    </div>
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>

Basic HTML for Carto - pdf 

Miriam Posner's - Beginning HTML and Beginning CSS

HTML5 Tutorial from w3schools.com