Tutorial HTML y CSS en Espanol: Crea tu Primera Pagina Web

HTML y CSS son los lenguajes fundamentales de la web. HTML estructura el contenido (titulos, parrafos, imagenes) y CSS lo hace visualmente atractivo (colores, fuentes, layouts). Juntos, son el primer paso para cualquier persona que quiera crear paginas web.

HTML basico: estructura tu contenido

HTML usa etiquetas para decirle al navegador que es cada parte de la pagina:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Primera Pagina</title>
</head>
<body>
  <h1>Hola Mundo</h1>
  <p>Esta es mi primera pagina web.</p>
  <img src="foto.jpg" alt="Mi foto">
  <a href="https://www.duobi.tech">Visitar Duobi</a>
</body>
</html>

CSS basico: dale estilo

/* Estilos basicos */
body {
  font-family: Arial, sans-serif;
  background-color: #0a0f1e;
  color: #f5f5f5;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #00e5a0;
  font-size: 2.5rem;
}

/* Flexbox para centrar */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Flexbox: el layout moderno

Flexbox es la forma moderna de organizar elementos en una pagina. Antes se usaban floats y hacks — ahora con dos propiedades centras cualquier cosa:

.navbar {
  display: flex;
  justify-content: space-between; /* separa los items */
  align-items: center;           /* centra verticalmente */
  padding: 1rem 2rem;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;     /* pasa a la siguiente linea */
  gap: 1rem;           /* espacio entre cards */
}

.card {
  flex: 1 1 300px;     /* minimo 300px, crece si hay espacio */
}

Responsive design: que se vea bien en celular

/* Mobile first: estilos base para celular */
.grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tablet y arriba */
@media (min-width: 768px) {
  .grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .grid > * {
    flex: 1 1 45%;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid > * {
    flex: 1 1 30%;
  }
}