
Cuando empiezas en desarrollo web, escuchas HTML, CSS y JavaScript todo el tiempo, pero no siempre queda claro qué hace cada uno. Usemos la analogía de una casa.

## HTML: la estructura

HTML (HyperText Markup Language) es el **esqueleto** de la casa: las paredes, las puertas, las habitaciones.

```html
<h1>Mi casa</h1>
<p>Esta es la sala.</p>
```

## CSS: la decoración

CSS (Cascading Style Sheets) es la **pintura, los muebles y la decoración**. Define colores, tamaños y disposición.

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

## JavaScript: la electricidad y la interacción

JavaScript es lo que hace que las cosas **funcionen y reaccionen**: prender la luz al apretar un interruptor, abrir la puerta del garaje, etc.

```js
document.querySelector('button').addEventListener('click', () => {
  alert('¡Hiciste clic!');
});
```

## En resumen

| Lenguaje   | Función principal          |
| ---------- | --------------------------- |
| HTML       | Estructura y contenido       |
| CSS        | Apariencia y diseño          |
| JavaScript | Comportamiento e interacción |

Con estos tres, ya puedes construir cualquier página web. En el próximo tutorial vamos a crear tu primera página desde cero.


La analogía de la casa para entender de una vez por todas para qué sirve cada lenguaje web.

HTML, CSS y JavaScript: ¿qué hace cada uno?


**Git** es una herramienta que guarda el historial de cambios de tu código, como un "control+Z" gigante con superpoderes. **GitHub** es un sitio web donde puedes guardar ese historial en la nube y compartirlo con otras personas.

## Los tres comandos que más usarás

```bash
git add .
git commit -m "Explica qué cambiaste"
git push
```

1. `git add .` — marca los archivos que cambiaste para guardarlos.
2. `git commit -m "..."` — guarda una "foto" de esos cambios con un mensaje.
3. `git push` — sube esa foto a GitHub para que quede respaldada.

## ¿Por qué debería usar Git desde el principio?

- Puedes deshacer errores sin miedo.
- Puedes ver exactamente qué cambió y cuándo.
- Es la forma estándar en la que trabajan los equipos de programación.

## Tu primer repositorio

1. Crea una carpeta para tu proyecto.
2. Ejecuta `git init` dentro de ella.
3. Crea una cuenta en GitHub y crea un repositorio nuevo.
4. Sigue las instrucciones de GitHub para conectar tu carpeta local con el repositorio remoto.

No necesitas entenderlo todo de una vez. Con estos tres comandos ya puedes empezar a versionar tus proyectos.


Aprende qué es Git, qué es GitHub, y los tres comandos que usarás el 90% del tiempo.

Git y GitHub para principiantes: guía sin dramas


Una **variable** es como una caja con una etiqueta donde guardas algo para usarlo después. La etiqueta es el nombre de la variable, y lo que hay dentro es su valor.

```js
let edad = 25;
let nombre = 'Sofía';
let esEstudiante = true;
```

## Tipos de datos comunes

- **Número** (`25`): para contar o calcular.
- **Texto o string** (`'Sofía'`): para palabras y frases, siempre entre comillas.
- **Booleano** (`true`/`false`): para respuestas de sí o no.
- **Lista o array** (`[1, 2, 3]`): una caja que contiene varias cosas en orden.
- **Objeto** (`{ nombre: 'Sofía', edad: 25 }`): una caja con varias etiquetas internas.

## ¿Por qué importa el tipo?

Si tratas un número como si fuera texto, pueden pasar cosas raras:

```js
console.log('5' + 1); // '51' (se pega el texto)
console.log(5 + 1);   // 6   (se suma el número)
```

Saber qué tipo de dato tienes en cada "caja" evita muchos errores comunes al empezar a programar.

## Practica tú mismo

Intenta declarar tres variables sobre ti: tu nombre, tu edad y si te gusta programar (`true` o `false`). Ese pequeño ejercicio ya es programar.


Entiende qué son las variables y los tipos de datos usando cajas etiquetadas en lugar de teoría abstracta.

Variables y tipos de datos explicados con analogías

Programación Para Tontos


En este tutorial vas a crear tu primera página web desde cero, sin frameworks ni herramientas complicadas: solo un editor de texto y un navegador. Sí, en serio, es así de fácil. No, no necesitas un doctorado.

## Paso 1: crea la carpeta del proyecto

Crea una carpeta llamada `mi-primera-pagina` y abre un archivo nuevo llamado `index.html`. Ponerle nombre a una carpeta: nivel de dificultad, cero.

## Paso 2: escribe la estructura básica

```html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera página</title>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>
```

Guarda el archivo y ábrelo con doble clic: ya tienes una página web funcionando en tu navegador. Felicidades, técnicamente ya eres "desarrollador web" (no le digas esto a nadie en una entrevista de trabajo todavía).

## Paso 3: agrega estilos

Crea un archivo `estilos.css` en la misma carpeta:

```css
body {
  font-family: sans-serif;
  background-color: #0e1e25;
  color: #ffffff;
  text-align: center;
  padding: 4rem;
}

h1 {
  color: #00e5bf;
}
```

Recarga la página en el navegador: deberías ver el fondo oscuro y el título en color verde azulado. Si ves otra cosa, no entres en pánico: revisa que guardaste el archivo (a todos nos ha pasado, no juzgamos).

## Paso 4: agrega una imagen y un enlace

```html
<img src="https://placekitten.com/300/200" alt="Un gato" />
<p>
  Aprende más en
  <a href="https://developer.mozilla.org/es/">MDN Web Docs</a>.
</p>
```

## ¿Qué acabas de aprender?

- Cómo estructurar una página con HTML.
- Cómo conectar un archivo CSS para darle estilo.
- Cómo agregar imágenes y enlaces.

En el próximo tutorial vamos a darle vida a esta página con JavaScript, porque una página bonita pero muda es simplemente... un póster caro.


Sigue estos pasos y crea tu primera página web funcional en menos de 20 minutos.

Tutorial: tu primera página web con HTML y CSS


Ahora que ya tienes una página con HTML y CSS, vamos a agregarle un botón que reaccione cuando alguien haga clic. Tranquilo, nadie va a explotar, es solo JavaScript.

## Paso 1: agrega un botón a tu HTML

En tu archivo `index.html`, dentro de `<body>`, agrega:

```html
<button id="boton-saludo">Saludar</button>
<p id="mensaje"></p>
<script src="script.js"></script>
```

## Paso 2: crea tu archivo JavaScript

Crea `script.js` en la misma carpeta:

```js
const boton = document.querySelector('#boton-saludo');
const mensaje = document.querySelector('#mensaje');

boton.addEventListener('click', () => {
  mensaje.textContent = '¡Hola! Acabas de ejecutar tu primer JavaScript.';
});
```

## Paso 3: prueba en el navegador

Abre `index.html`, haz clic en el botón "Saludar" y observa cómo aparece el mensaje. Si no pasa nada, revisa la consola del navegador antes de culpar a la computadora, casi siempre es un typo (lo sabemos por experiencia, no juzgamos). Acabas de:

1. Seleccionar elementos del HTML desde JavaScript.
2. Escuchar un evento (`click`).
3. Modificar el contenido de la página dinámicamente.

## Reto extra

Modifica el script para que, en lugar de un mensaje fijo, salude usando el valor de un campo de texto:

```html
<input id="nombre" type="text" placeholder="Tu nombre" />
```

```js
const input = document.querySelector('#nombre');

boton.addEventListener('click', () => {
  mensaje.textContent = `¡Hola, ${input.value || 'amigo'}!`;
});
```

¡Felicidades! Ya combinaste HTML, CSS y JavaScript en un solo proyecto. Guárdate ese ego boost, te lo has ganado (aunque tu código tenga un console.log de más por ahí).


Agrega interactividad a tu página web con tu primer script en JavaScript, paso a paso.

Tutorial: tu primer script en JavaScript

Toda página que "hace algo" con lo que escribes (un login, un buscador, un formulario de contacto) empieza con la misma etiqueta: `<form>`. Hoy vas a construir uno, y no, no necesitas saber backend todavía.

## Paso 1: la estructura del formulario

```html
<form>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required />

  <label for="correo">Correo</label>
  <input type="email" id="correo" name="correo" required />

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje"></textarea>

  <button type="submit">Enviar</button>
</form>
```

Cada `<input>` tiene un `id` que coincide con el `for` de su `<label>`. Esto no es decoración: así el navegador (y los lectores de pantalla) saben qué campo pertenece a qué etiqueta.

## Paso 2: usa el tipo de input correcto

```html
<input type="email" /> 
<input type="number" />
<input type="date" />
<input type="checkbox" />
```

Usar `type="email"` en vez de `type="text"` le da validación gratis al navegador. Cero líneas de JavaScript, cero esfuerzo, mucha elegancia.

## Paso 3: marca campos obligatorios

El atributo `required` evita que el formulario se envíe si el campo está vacío. Pruébalo: deja el nombre en blanco y haz clic en "Enviar". El navegador te va a regañar amablemente, así que tú no tienes que hacerlo.

## ¿Qué acabas de aprender?

- Cómo estructurar un formulario con `<form>`, `<label>` e `<input>`.
- Por qué el tipo de input correcto te ahorra trabajo.
- Cómo marcar campos obligatorios sin escribir JavaScript.

Por ahora este formulario no envía datos a ningún lado (para eso hace falta un servidor), pero más adelante lo vamos a validar y mejorar con JavaScript.

Aprende a crear formularios HTML funcionales para recolectar nombre, correo y mensajes.

Programación fácil. Para todos. Incluso para ti.

Últimos artículos

HTML, CSS y JavaScript: ¿qué hace cada uno?

Git y GitHub para principiantes: guía sin dramas

Variables y tipos de datos explicados con analogías

Últimos tutoriales

Tutorial: tu primera página web con HTML y CSS

Tutorial: tu primer script en JavaScript

Tutorial: formularios HTML para pedirle datos al usuario

Explora por categoría