Programación Para Tontos

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

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

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

```html
<body>
  

  <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)

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

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

```js
// 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`.

Split your HTML, CSS, and JavaScript into separate files to keep your project tidy.

Tutorial: organize your code into multiple files


A **variable** is like a labeled box where you store something to use later. The label is the variable's name, and what's inside is its value.

```js
let age = 25;
let name = 'Sofia';
let isStudent = true;
```

## Common data types

- **Number** (`25`): for counting or calculating.
- **Text/string** (`'Sofia'`): for words and phrases, always in quotes.
- **Boolean** (`true`/`false`): for yes/no answers.
- **List/array** (`[1, 2, 3]`): a box holding several things in order.
- **Object** (`{ name: 'Sofia', age: 25 }`): a box with several inner labels.

## Why does the type matter?

If you treat a number like text, weird things can happen:

```js
console.log('5' + 1); // '51' (text gets glued together)
console.log(5 + 1);   // 6   (numbers get added)
```

Knowing what type of data is in each "box" avoids many common beginner mistakes.

## Try it yourself

Try declaring three variables about yourself: your name, your age, and whether you like coding (`true` or `false`). That small exercise is already programming.


Understand variables and data types using labeled boxes instead of abstract theory.

Variables and data types explained with analogies


Programming sounds intimidating, but at its core it's just **giving very precise instructions** to a computer so it can solve a problem. Just like a recipe tells someone exactly what to do step by step, a program tells the computer what to do.

## A simple analogy

Imagine explaining to a friend how to make a sandwich:

1. Take two slices of bread.
2. Spread peanut butter on one.
3. Spread jam on the other.
4. Put them together.

A program is exactly that, just written in a language the computer understands, like JavaScript or Python.

## Why does code look so weird?

```js
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Ana'));
```

This code defines a reusable instruction (a **function**) called `greet`, then uses it. There's no magic here: just structure and practice.

## What you need to get started

- Curiosity and patience (errors are part of the process).
- A code editor (for example, VS Code).
- Willingness to experiment without fear of breaking something.

In the next articles we'll cover variables, data types, and how to structure a web page from scratch.


Find out what programming really means, with no confusing jargon, using everyday examples.

Fundamentos

Tutorial: organize your code into multiple files

Variables and data types explained with analogies

What is programming? A no-fear introduction