πŸ—οΈ HTML Skeleton

Lesson 1 Β· LecciΓ³n 1 Β· Estructura HTML

Every website starts as a skeleton β€” an HTML file that tells the browser what to load. In this lesson you'll see how our visualization page is structured and why each piece is there.

Todo sitio web empieza como un esqueleto β€” un archivo HTML que le dice al navegador quΓ© cargar.

1

The File Structure Β· La Estructura de Archivos

Before writing any code, let's see how the project is organized. Think of it like folders and papers on a desk:

docs/ β”œβ”€β”€ index.html ← The main page β”œβ”€β”€ css/ β”‚ └── style.css ← Visual styling β”œβ”€β”€ js/ β”‚ β”œβ”€β”€ main.js ← Starts everything β”‚ β”œβ”€β”€ csvParser.js ← Reads the data β”‚ β”œβ”€β”€ scene.js ← 3D world setup β”‚ └── visualization.js ← Draws the bars └── data/ └── oakland-languages.csv ← The real data!
πŸ’‘

Tip: The docs/ folder is what GitHub puts on the internet. Everything inside it becomes your live website.

2

The <head> Section Β· La SecciΓ³n <head>

The <head> is invisible to visitors but very important β€” it loads fonts, styles, and tells the browser about Three.js. 

<!-- Tell the browser this is HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character set (handles Spanish, Chinese, etc.) -->
  <meta charset="UTF-8" />

  <!-- Mobile-friendly sizing -->
  <meta name="viewport" content="width=device-width" />

  <!-- Load Google Fonts -->
  <link href="https://fonts.googleapis.com/..." />

  <!-- Load our styles -->
  <link rel="stylesheet" href="css/style.css" />
</head>
🌍

Why charset="UTF-8"? UTF-8 supports over 1 million characters β€” including Spanish accents (Β‘Hola!), Chinese (δ½ ε₯½), Arabic (Ω…Ψ±Ψ­Ψ¨Ψ§), and more. Always include it!

3

The Import Map Β· El Mapa de ImportaciΓ³n

Three.js is a huge library. Instead of downloading it, we tell the browser where to find it online using an import map: 

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.163.0/...",
    "three/addons/": "https://unpkg.com/three@0.163.0/jsm/"
  }
}
</script>

Now any JavaScript file can write import * as THREE from 'three' and the browser knows exactly where to get it. No npm, no bundler needed!

βœ“ No npm install needed
βœ“ No build step
βœ“ Works in any modern browser
4

The <body> Β· El Cuerpo

The body holds everything visitors actually see. Our page has just a few key elements: 

<body>
  <!-- Three.js draws here (full-screen canvas) -->
  <canvas id="canvas"></canvas>

  <!-- Title card (top-left overlay) -->
  <header class="title-card">
    <h1>Oakland Habla</h1>
    <p>Language Diversity 2016–2017</p>
  </header>

  <!-- Start the JavaScript -->
  <script type="module" src="js/main.js"></script>
</body>
πŸ’‘

Notice type="module" on the script tag. This tells the browser our JavaScript uses modern ES Modules β€” the same system that lets us import Three.js without a build step.

πŸ›  Try It Β· IntΓ©ntalo

Open docs/index.html in your text editor. Find the <h1> tag and change "Oakland Habla" to your own title. Save the file, then open it in a browser to see your change!

Abre docs/index.html en tu editor. Cambia el texto del <h1>. Β‘Guarda y refresca el navegador!

← All Lessons Lesson 2: Loading Data β†’