The Platform, No Tooling

Code

index.html — the page skeleton

We start with index.html — the page skeleton. The full file is in the code column; it's small, but every line matters.

A few parts:

<!DOCTYPE html> — tells the browser to use modern ("standards") mode. Without it, the browser drops into an old compatibility mode.
data-theme="dark" on <html> — our theme. The CSS reacts to it; we'll add the theme toggle later.
<meta name="viewport"> — so the page looks right on a phone (for responsiveness).
<link rel="stylesheet" href="style.css"> — loads the styles. style.css is provided with the project (~800 lines). You built its foundation in the HTML and CSS foundations track; this one hands you the finished sheet so the focus stays on JavaScript. Just place it next to index.html.
<main id="app"> — the container JavaScript will render into. For now it holds "Loading Cosmos…".
<script type="module" src="js/main.js"> — loads our JavaScript. type="module" is the crucial part: it makes the file an ES module, so main.js can import other files. Without type="module", import wouldn't work.

The structure is always the same: index.html is the one and only page (this will be a single-page app — an SPA), and JavaScript drives all the content.

Tip. Why is <script> at the end of <body> (not in <head>)? So the browser creates <main id="app"> first, then runs main.js, which looks for it. With type="module" this is automatic (modules run after the HTML is parsed), but keeping the script at the end is a good habit.

index.html CREATE

Create this file in ./

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmos — Astronomy Picture of the Day</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- The whole app will render inside here. For now, a placeholder. -->
  <main id="app">Loading Cosmos…</main>

  <!-- type="module" is the important part: it makes this an ES module, so
       main.js can `import` other files. It also means the browser FETCHES
       the script — which is why the page must be served over http, not
       opened as a file:// path (see the gotcha in this lesson). -->
  <script type="module" src="js/main.js"></script>
</body>
</html>