luxIA/📖 aprendiendo
🎨

HTML & CSS

🧑‍🍳 Cocinero

La estructura y el estilo

HTML define la estructura. CSS define cómo se ve. Juntos crean interfaces visuales.

HTML esencial

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Página</title>
</head>
<body>
  <header>
    <h1>Bienvenido</h1>
  </header>
  <main>
    <p>Contenido principal</p>
  </main>
  <footer>
    <p>© 2026</p>
  </footer>
</body>
</html>

Tags importantes

TagUso
<div>Contenedor genérico
<span>Texto inline
<a href="">Enlaces
<img src="">Imágenes
<button>Botones
<input>Campos de formulario
<form>Formularios

CSS moderno

/* Variables */
:root {
  --color-primary: #3b82f6;
  --spacing: 1rem;
}

/* Estilos */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing);
}

.button {
  background: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

Flexbox

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Tailwind CSS

En lugar de escribir CSS, usa clases utilitarias:

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

💡 Recomendación: Usa Tailwind para proyectos nuevos.

Practica

→ Landing Page Responsive

Enlaces útiles