🚀 Aprende HTML y CSS como un PRO

1. ¿Qué es HTML?

HTML (HyperText Markup Language) es el esqueleto de toda página web. Con él defines la estructura: títulos, párrafos, imágenes, enlaces...

Etiquetas básicas

<h1>Título grande</h1>
<p>Un párrafo de texto</p>
<a href="https://google.com">Un enlace</a>
<img src="foto.jpg" alt="foto">

Las etiquetas se abren <etiqueta> y se cierran </etiqueta>. ¡Así de fácil!

2. ¿Qué es CSS?

CSS (Cascading Style Sheets) es el maquillaje de la web. Le da color, forma, tamaño y posición a los elementos HTML.

Ejemplo básico

p {
  color: #ff6ec7;
  font-size: 18px;
  background: black;
}

Seleccionas un elemento (por etiqueta, clase o id) y le aplicas propiedades. ¡Ya está!

3. Junta HTML + CSS

Puedes poner el CSS dentro del HTML con la etiqueta <style>, o en un archivo aparte llamado estilos.css.

Plantilla lista para copiar

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background: #222; color: white; }
  </style>
</head>
<body>
  <h1>¡Hola mundo!</h1>
</body>
</html>

Guarda esto como index.html y ábrelo en tu navegador. ¡Ya tienes tu primera web!

4. Consejos PRO 💡

• Practica TODOS los días, aunque sea 15 minutos.
• Usa class para reutilizar estilos: <div class="caja">
• Aprende Flexbox y Grid para maquetar como un jefe.
• Mira el código de otras webs con clic derecho → Inspeccionar.
• No tengas miedo de romper cosas: así se aprende.

HTML CSS FLEXBOX GRID