Programación Para Tontos


When you start in web development, you hear HTML, CSS, and JavaScript all the time, but it's not always clear what each one does. Let's use a house analogy.

## HTML: the structure

HTML (HyperText Markup Language) is the **skeleton** of the house: the walls, the doors, the rooms.

```html
<h1>My house</h1>
<p>This is the living room.</p>
```

## CSS: the decoration

CSS (Cascading Style Sheets) is the **paint, furniture, and decoration**. It defines colors, sizes, and layout.

```css
h1 {
  color: teal;
  font-size: 2rem;
}
```

## JavaScript: the electricity and interaction

JavaScript is what makes things **work and react**: turning on a light when you flip a switch, opening the garage door, etc.

```js
document.querySelector('button').addEventListener('click', () => {
  alert('You clicked!');
});
```

## Summary

| Language   | Main role                 |
| ---------- | -------------------------- |
| HTML       | Structure and content       |
| CSS        | Appearance and layout       |
| JavaScript | Behavior and interaction    |

With these three, you can already build any web page. In the next tutorial we'll build your first page from scratch.


The house analogy to finally understand what each web language is for.

HTML, CSS and JavaScript: what does each one do?


**Git** is a tool that saves the history of changes to your code, like a giant "Ctrl+Z" with superpowers. **GitHub** is a website where you can store that history in the cloud and share it with others.

## The three commands you'll use most

```bash
git add .
git commit -m "Explain what you changed"
git push
```

1. `git add .` — marks the files you changed to be saved.
2. `git commit -m "..."` — saves a "snapshot" of those changes with a message.
3. `git push` — uploads that snapshot to GitHub so it's backed up.

## Why should I use Git from the start?

- You can undo mistakes without fear.
- You can see exactly what changed and when.
- It's the standard way programming teams work.

## Your first repository

1. Create a folder for your project.
2. Run `git init` inside it.
3. Create a GitHub account and a new repository.
4. Follow GitHub's instructions to connect your local folder to the remote repository.

You don't need to understand everything at once. With these three commands you can already start versioning your projects.


Learn what Git is, what GitHub is, and the three commands you'll use 90% of the time.

Git and GitHub for beginners: a drama-free guide


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.

Articles

HTML, CSS and JavaScript: what does each one do?

Git and GitHub for beginners: a drama-free guide

Variables and data types explained with analogies

What is programming? A no-fear introduction