Tutorial: organize your code into multiple files

Stuffing all your code into one giant HTML file works at first, but it becomes a headache fast. Let's split things up like in any real project.

Step 1: the folder structure

my-project/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── app.js

Organizing by file type (HTML at the root, CSS in its own folder, JS in its own) is such a common pattern you'll recognize it in almost every project you open from now on.

Step 2: link the CSS

<head>
  <link rel="stylesheet" href="css/styles.css" />
</head>

Step 3: link the JavaScript (at the end of the body, not by accident)

<body>
  <!-- all your content -->

  <script src="js/app.js"></script>
</body>

Placing the <script> right before closing </body> ensures the HTML has already fully loaded before your JavaScript tries to find elements with document.querySelector. Carelessly putting it in the <head> is a classic recipe for the "Cannot read properties of null" error.

Step 4: split your JavaScript into modules (for growing projects)

<script type="module" src="js/app.js"></script>

// js/utils.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

// js/app.js
import { formatDate } from './utils.js';

console.log(formatDate('2026-01-01'));

type="module" lets you use import and export to split your JavaScript into smaller, focused files, instead of one 2,000-line file nobody wants to open.

What did you just learn?

• How to organize HTML, CSS, and JS into separate folders.
• Why the <script> tag goes near the end of <body>.
• How to split JavaScript into modules with import/export.