Módulo 1: Interfaces web profesionales con HTML y CSS

Toda aplicación creada con React o Next.js termina produciendo una interfaz que el navegador interpreta mediante HTML y CSS. Por eso, antes de trabajar con componentes y frameworks, necesitas comprender la estructura y la presentación de una página web.

En este módulo no vas a memorizar una lista interminable de etiquetas y propiedades. Vas a construir una página real desde el inicio. Cada práctica añadirá o mejorará una parte del mismo proyecto.

Al finalizar podrás observar una interfaz, dividirla en secciones, representar correctamente su contenido con HTML y convertirla en un diseño adaptable con CSS. También comenzarás a utilizar Git y GitHub para conservar el historial del proyecto y una herramienta de inteligencia artificial para revisar tu trabajo sin delegarle tu razonamiento.

Principio del módulo: HTML comunica qué significa el contenido. CSS decide cómo se presenta. La inteligencia artificial ayuda a revisar y acelerar el trabajo, pero tú tomas las decisiones y compruebas el resultado.

Al completar el módulo serás capaz de:

• Explicar qué función cumplen HTML, CSS y el navegador dentro de una página web.
• Crear la estructura base de un documento HTML5.
• Organizar una página mediante etiquetas semánticas.
• Escribir contenido accesible con encabezados, enlaces, imágenes, botones y formularios correctamente utilizados.
• Conectar una hoja de estilos externa.
• Aplicar selectores, colores, tipografía, espaciado, bordes y estados interactivos.
• Comprender y utilizar el modelo de caja.
• Crear distribuciones de una dimensión con Flexbox.
• Crear cuadrículas de dos dimensiones con CSS Grid.
• Desarrollar interfaces con un enfoque mobile first.
• Utilizar Git para registrar cambios y GitHub para publicar un repositorio.
• Pedir ayuda a una inteligencia artificial mediante instrucciones claras.
• Revisar, probar y modificar el código propuesto por una IA antes de aceptarlo.
• Construir una landing page profesional sin utilizar JavaScript.

Durante el módulo desarrollarás progresivamente una página para presentar un curso de COA:

┌──────────────────────────────────────────────────────────────┐
│ COA                    Cursos  Beneficios  Contacto  Ingresar │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  Aprende desarrollo web moderno          [Vista del curso]   │
│  Construye aplicaciones reales...                            │
│  [Ver programa] [Conocer beneficios]                         │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│              Tres beneficios principales                     │
├──────────────────────────────────────────────────────────────┤
│             Contenido organizado en tarjetas                  │
├──────────────────────────────────────────────────────────────┤
│               Resultados y llamada a la acción                │
├──────────────────────────────────────────────────────────────┤
│                  Formulario de contacto                       │
├──────────────────────────────────────────────────────────────┤
│                         Pie de página                         │
└──────────────────────────────────────────────────────────────┘

Esta representación no define colores ni detalles decorativos. Su propósito es mostrar la estructura de la información antes de comenzar a diseñarla.

Los tiempos son orientativos. Puedes dedicar más tiempo a una práctica si necesitas experimentar, corregir errores o mejorar el resultado.

La web y la preparación del proyecto

Una página web puede compararse con un edificio:

• HTML es la estructura: paredes, puertas, habitaciones y rótulos.
• CSS es la presentación: colores, tamaños, distribución, iluminación y decoración.
• JavaScript será el comportamiento: acciones, cambios e interacciones. Se trabajará en el siguiente módulo.
• El navegador interpreta esos archivos y dibuja la interfaz.

En este módulo trabajarás con archivos locales. El navegador los leerá directamente desde tu computadora:

index.html ── define el contenido y su estructura ──┐
                                                   ├──> Navegador ──> Página visible
styles.css ── define la apariencia y distribución ─┘

Más adelante, esos archivos se publicarán en internet. La base seguirá siendo la misma.

Prepara las siguientes herramientas:

• Un navegador moderno.
• Un editor de código.
• Git instalado en tu computadora.
• Una cuenta gratuita de GitHub.
• Acceso a ChatGPT o Claude. GitHub Copilot es opcional.

No necesitas instalar React, Next.js ni Tailwind CSS todavía.

Crea una carpeta llamada coa-landing con esta estructura:

coa-landing/
├── assets/
│   └── images/
├── index.html
├── styles.css
└── README.md

Utiliza nombres de archivos en minúsculas, sin espacios ni tildes. Esta convención evita problemas cuando el proyecto se publica en distintos sistemas.

En index.html, escribe:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta
      name="description"
      content="Curso de desarrollo web moderno de COA."
    >
    <title>Desarrollo Web Moderno | COA</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Desarrollo Web Moderno</h1>
  </body>
</html>

Abre el archivo en el navegador. Si puedes ver el título, la primera conexión entre tu código y el navegador funciona.

¿Qué hace cada línea importante?

Comprobación rápida

Guarda este código en styles.css:

body {
  background-color: #f5f7fb;
}

Actualiza el navegador. Si el fondo cambia, HTML y CSS están conectados.

HTML5 semántico y accesible

HTML es un lenguaje de marcado. No se utiliza para decidir si un título será azul o si una tarjeta tendrá sombra. Se utiliza para declarar qué representa cada parte del contenido.

<h1>Desarrollo Web Moderno</h1>

En este ejemplo:

• <h1> es la etiqueta de apertura.
• Desarrollo Web Moderno es el contenido.
• </h1> es la etiqueta de cierre.
• El conjunto completo es un elemento.

Algunos elementos incluyen atributos:

<a href="#programa">Ver el programa</a>

El atributo href indica el destino del enlace.

Los elementos pueden contener otros elementos:

<article>
  <h2>Aprendizaje práctico</h2>
  <p>Construirás proyectos desde el primer módulo.</p>
</article>

Los elementos deben cerrarse en el orden inverso al que fueron abiertos:

<!-- Correcto -->
<p>Aprende <strong>creando proyectos</strong>.</p>

<!-- Incorrecto -->
<p>Aprende <strong>creando proyectos</p></strong>

Utiliza sangría para que la relación entre elementos sea visible. El navegador puede interpretar código sin sangría, pero una persona tendrá más dificultad para revisarlo.

Una página profesional no debe convertirse en una colección de <div> sin significado. HTML5 incluye elementos que describen las regiones principales:

body
├── header
│   └── nav
├── main
│   ├── section
│   │   └── article
│   ├── section
│   └── section
└── footer

Ejemplo:

<body>
  <header class="site-header">
    <a class="logo" href="#">COA</a>

    <nav aria-label="Navegación principal">
      <ul class="nav-list">
        <li><a href="#beneficios">Beneficios</a></li>
        <li><a href="#programa">Programa</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">
      <div>
        <p class="eyebrow">Curso práctico de 40 horas</p>
        <h1>Desarrollo Web Moderno con React, Next.js e IA</h1>
        <p>
          Aprende a construir interfaces modernas, comprender el código
          y utilizar inteligencia artificial como herramienta profesional.
        </p>
        <a class="button" href="#programa">Ver programa</a>
      </div>
    </section>

    <section id="beneficios" aria-labelledby="titulo-beneficios">
      <h2 id="titulo-beneficios">Aprenderás mediante proyectos reales</h2>

      <article>
        <h3>Práctica constante</h3>
        <p>Cada concepto se aplica en una interfaz real.</p>
      </article>
    </section>
  </main>

  <footer>
    <p>© COA — Cursos Online Avanzados</p>
  </footer>
</body>

Los encabezados organizan el documento:

h1  Título principal de la página
├── h2  Sección: Beneficios
│   ├── h3  Beneficio: Práctica constante
│   └── h3  Beneficio: Revisión profesional
└── h2  Sección: Programa
    ├── h3  Módulo 1
    └── h3  Módulo 2

Buenas prácticas:

• Utiliza un <h1> que describa el propósito principal de la página.
• Continúa con <h2> para las secciones principales.
• Utiliza <h3> dentro de esas secciones cuando exista una subdivisión.
• No elijas un nivel por su tamaño visual. El tamaño se cambia con CSS.
• Evita saltar de <h2> a <h4> sin una razón estructural.

Utiliza un enlace cuando la acción lleva a otro lugar:

<a href="#contacto">Ir al formulario</a>

Utiliza un botón cuando la acción cambia algo en la interfaz:

<button type="button">Abrir menú</button>

En este módulo la mayoría de las llamadas a la acción serán enlaces, porque conducen a otra sección. Los comportamientos de los botones se programarán con JavaScript en el siguiente módulo.

No utilices <div> o <span> para imitar un botón. Los elementos correctos incluyen comportamientos de teclado y significado que benefician a todos los usuarios.

Toda imagen necesita una decisión consciente sobre su texto alternativo:

<img
  src="assets/images/estudiante-programando.webp"
  alt="Estudiante construyendo una interfaz web en su computadora"
>

El atributo alt describe la información relevante de la imagen. No debe comenzar con “imagen de”, porque el lector de pantalla ya anuncia que se trata de una imagen.

Si una imagen es puramente decorativa, utiliza un texto alternativo vacío:

<img src="assets/images/decoracion.svg" alt="">

No coloques información indispensable únicamente dentro de una imagen.

Cada campo necesita una etiqueta asociada:

<form id="contacto">
  <div class="form-field">
    <label for="nombre">Nombre completo</label>
    <input id="nombre" name="nombre" type="text" autocomplete="name" required>
  </div>

  <div class="form-field">
    <label for="correo">Correo electrónico</label>
    <input id="correo" name="correo" type="email" autocomplete="email" required>
  </div>

  <div class="form-field">
    <label for="mensaje">¿Qué deseas aprender?</label>
    <textarea id="mensaje" name="mensaje" rows="5"></textarea>
  </div>

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

En este módulo el formulario se evaluará por su estructura y diseño. Todavía no enviará información a un servidor.

Antes de considerar terminado el HTML, comprueba:

• El documento declara lang="es".
• Existe un orden lógico de encabezados.
• Los enlaces describen su destino. Evita textos aislados como “haz clic aquí”.
• Las imágenes tienen un alt útil o vacío cuando son decorativas.
• Cada campo del formulario tiene un <label>.
• Los elementos interactivos pueden recibir foco con la tecla Tab.
• No se utiliza el color como único medio para comunicar información.
• La estructura sigue siendo comprensible sin CSS.

Práctica guiada 1 — Reparar una estructura

El siguiente código funciona visualmente, pero no representa bien el contenido:

<div>
  <div>COA</div>
  <div>
    <span>Inicio</span>
    <span>Programa</span>
  </div>
</div>

<div>
  <div>Desarrollo Web Moderno</div>
  <div>Aprende creando proyectos reales.</div>
  <div>Ver programa</div>
</div>

<div>Todos los derechos reservados.</div>

Realiza estas mejoras:

1. Sustituye los contenedores genéricos por header, nav, main, section y footer cuando corresponda.
2. Convierte el nombre del curso en el encabezado principal.
3. Convierte “Inicio” y “Programa” en enlaces dentro de una lista.
4. Convierte “Ver programa” en un enlace hacia #programa.
5. Mantén un <div> solamente si lo necesitas para agrupar contenido sin significado propio.

<header>
  <a href="#">COA</a>
  <nav aria-label="Navegación principal">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#programa">Programa</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h1>Desarrollo Web Moderno</h1>
    <p>Aprende creando proyectos reales.</p>
    <a href="#programa">Ver programa</a>
  </section>
</main>

<footer>
  <p>Todos los derechos reservados.</p>
</footer>

Práctica guiada 2 — Diseñar primero el contenido

Antes de escribir CSS, crea en tu index.html:

1. Un encabezado con la marca COA y tres enlaces.
2. Una sección principal con una frase breve, un <h1>, un párrafo y dos llamadas a la acción.
3. Una sección de beneficios con un <h2> y tres artículos.
4. Una sección de programa con un <h2> y al menos cuatro módulos.
5. Un formulario de contacto con nombre, correo y mensaje.
6. Un pie de página.

Abre la página sin CSS. Si el contenido está ordenado, es legible y se entiende qué representa cada parte, tienes una base correcta.

Video recomendado

Mientras observas el video, identifica cuáles de tus elementos podrían ser más semánticos.

Fundamentos prácticos de CSS3

.course-card {
  background-color: #ffffff;
  border-radius: 1rem;
}

Utiliza clases para la mayoría de los estilos:

<article class="course-card">...</article>

.course-card {
  padding: 1.5rem;
}

Evita depender de identificadores para diseñar:

/* Evita esta práctica como estrategia habitual de estilos */
#tarjeta-principal {
  padding: 1.5rem;
}

Los identificadores son útiles para destinos de enlaces, asociaciones accesibles y usos concretos. Las clases son más fáciles de reutilizar.

Cuando varias reglas afectan la misma propiedad, el navegador decide cuál aplicar. Para este módulo conserva tres reglas prácticas:

1. Una regla más específica puede imponerse sobre una más general.
2. Entre reglas de especificidad similar, suele ganar la que aparece después.
3. Algunos valores, como el color del texto y la tipografía, se heredan desde el elemento padre.

p {
  color: #475569;
}

.hero-description {
  color: #1e293b;
}

Un párrafo con la clase hero-description utilizará el segundo color.

No utilices !important para resolver conflictos durante este módulo. Primero revisa el selector, el orden y la herencia.

Añade al inicio de styles.css:

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #172033;
  --color-muted: #5f6b7a;
  --color-surface: #ffffff;
  --color-background: #f5f7fb;
  --color-border: #dbe2ea;
  --shadow-card: 0 1rem 2.5rem rgba(15, 23, 42, 0.1);
  --radius-small: 0.6rem;
  --radius-medium: 1rem;
  --radius-large: 1.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

Las propiedades personalizadas declaradas en :root funcionan como variables de diseño. Permiten reutilizar decisiones visuales:

.button {
  background-color: var(--color-primary);
}

Si el color principal cambia, solo necesitas actualizarlo en un lugar.

Cada elemento visual se comporta como una caja:

┌──────────────────────────── margen ───────────────────────────┐
│  ┌──────────────────────── borde ──────────────────────────┐  │
│  │  ┌──────────────────── relleno ──────────────────────┐  │  │
│  │  │                                                   │  │  │
│  │  │                    contenido                      │  │  │
│  │  │                                                   │  │  │
│  │  └───────────────────────────────────────────────────┘  │  │
│  └─────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

• padding: espacio interior entre contenido y borde.
• border: línea que rodea el relleno y el contenido.
• margin: espacio exterior que separa una caja de otras.
• width y height: dimensiones de la caja.

.course-card {
  max-width: 24rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  margin: 1rem;
}

El valor global box-sizing: border-box hace que el ancho declarado incluya el relleno y el borde. Esto vuelve el dimensionamiento más predecible.

No existe una unidad correcta para todos los casos. En este módulo utiliza principalmente rem, %, fr, max-width y algunos px para bordes o puntos de interrupción.

Un patrón útil para controlar el ancho del contenido:

.container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

.section {
  padding-block: 4rem;
}

width: min(100% - 2rem, 70rem) permite que el contenido:

• conserve un espacio lateral en pantallas estrechas;
• crezca con la pantalla;
• deje de crecer al llegar a 70rem.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  color: #ffffff;
  background-color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.button:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

.button--secondary {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

El estado :hover ayuda a quien utiliza un puntero. El estado :focus-visible ayuda a quien navega con teclado. No elimines el contorno de foco sin proporcionar una alternativa claramente visible.

• Olvidar el punto antes del nombre de una clase.
• Escribir el nombre de una clase de forma diferente en HTML y CSS.
• Olvidar el punto y coma o una llave de cierre.
• Intentar aplicar estilos a un archivo CSS que no está correctamente enlazado.
• Utilizar anchos fijos grandes que producen desplazamiento horizontal.
• Repetir los mismos colores y espacios en muchas reglas en lugar de reutilizar variables.
• Usar !important para ocultar un problema de cascada.
• Diseñar solamente el estado normal y olvidar hover, focus-visible o los campos inválidos.

Práctica guiada 3 — Convertir contenido en una sección visual

Aplica estilos a tu sección principal para conseguir:

1. Fondo claro y texto oscuro.
2. Un ancho máximo de contenido.
3. Espacio vertical suficiente.
4. Una frase breve en mayúsculas o con peso destacado.
5. Un título que se adapte sin utilizar un ancho fijo.
6. Un botón principal y otro secundario.
7. Un foco visible para ambos enlaces.

Puedes utilizar:

.hero {
  padding-block: 5rem;
}

.hero h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
}

.hero-description {
  max-width: 60ch;
  color: var(--color-muted);
}

ch ayuda a limitar la longitud de una línea según el ancho aproximado de los caracteres. clamp() permite indicar un tamaño mínimo, uno flexible y uno máximo.

Práctica guiada 4 — Investigar con las herramientas del navegador

1. Abre tu página.
2. Haz clic derecho sobre una tarjeta y selecciona Inspeccionar.
3. Cambia temporalmente su padding.
4. Desactiva una propiedad CSS desde el panel.
5. Identifica el modelo de caja mostrado por el navegador.
6. Regresa al archivo styles.css y realiza allí el cambio definitivo.

Los cambios hechos en el inspector desaparecen al actualizar la página. Utilízalo para experimentar y diagnosticar, no como sustituto del archivo CSS.

Distribución con Flexbox y CSS Grid

Antes de utilizar un sistema de distribución, recuerda que el navegador ya organiza los elementos:

• Los elementos de bloque suelen ocupar una línea completa.
• Los elementos en línea ocupan solo el espacio necesario.
• El contenido aparece en el mismo orden en que fue escrito.

Mantener un orden lógico en HTML es importante. CSS puede modificar la apariencia, pero no debe convertir un orden confuso en una interfaz aparentemente correcta.

Flexbox es apropiado cuando necesitas distribuir elementos principalmente en una fila o en una columna:

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

Eje principal  ──────────────────────────────────────────────>

┌──────────┐        ┌──────────┐        ┌──────────┐
│ Elemento │        │ Elemento │        │ Elemento │
└──────────┘        └──────────┘        └──────────┘
      ↑
      │ Eje transversal
      ↓

Propiedades fundamentales:

Ejemplo para las llamadas a la acción:

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

Ejemplo para la navegación:

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  color: var(--color-muted);
  font-weight: 600;
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--color-primary);
}

Video recomendado

Grid es apropiado cuando necesitas controlar filas y columnas:

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

             Columna 1       Columna 2       Columna 3
           ┌───────────┬───────────────┬───────────────┐
Fila 1     │ Tarjeta 1 │ Tarjeta 2     │ Tarjeta 3     │
           ├───────────┼───────────────┼───────────────┤
Fila 2     │ Tarjeta 4 │ Tarjeta 5     │ Tarjeta 6     │
           └───────────┴───────────────┴───────────────┘

Una cuadrícula flexible puede decidir cuántas columnas caben:

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}

Lee esta regla de adentro hacia afuera:

• Cada columna intenta medir al menos 16rem.
• Nunca será más ancha que el contenedor en una pantalla estrecha.
• Cada columna puede crecer hasta ocupar una fracción del espacio disponible.
• auto-fit coloca tantas columnas como puedan caber.

Este patrón reduce la cantidad de consultas de medios necesarias, pero siempre debes probar el resultado.

Video recomendado

No son herramientas rivales. Una cuadrícula puede contener tarjetas que internamente utilizan Flexbox.

Práctica guiada 5 — Encabezado adaptable

Construye un encabezado que contenga:

• La marca COA.
• Una lista de tres enlaces.
• Un enlace visual con el texto “Ingresar”.

Requisitos:

1. Utiliza Flexbox.
2. Permite que los elementos pasen a otra línea si el espacio es insuficiente.
3. Conserva una separación clara mediante gap.
4. No cambies el orden visual con la propiedad order.
5. Comprueba la navegación con la tecla Tab.

Práctica guiada 6 — Cuadrícula de beneficios

Crea tres artículos con:

• Un número o icono decorativo.
• Un <h3>.
• Un párrafo de una o dos líneas.

Requisitos:

1. Utiliza Grid en el contenedor.
2. Utiliza una sola columna en pantallas estrechas.
3. Permite que la cuadrícula cree más columnas cuando haya espacio.
4. Mantén el mismo espaciado interno en todas las tarjetas.
5. Añade un borde o una sombra sutil, sin reducir la legibilidad.

Una base posible:

.benefit-card {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface);
}

.benefit-card h3 {
  margin-top: 0;
}

Diseño adaptable con enfoque mobile first

Diseño adaptable no significa crear una página para teléfono y otra para computadora. Significa crear una interfaz flexible que responda al espacio disponible.

El enfoque mobile first comienza con la versión más estrecha y añade mejoras cuando el contenido tiene espacio suficiente:

.hero-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .hero-layout {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }
}

Antes de 48rem, la sección utiliza una columna. Después, utiliza dos. El punto de interrupción debe responder a una necesidad del contenido, no al nombre de un dispositivo específico.

• Incluye siempre la etiqueta meta viewport.
• Evita anchos fijos grandes.
• Utiliza max-width: 100% para imágenes.
• Permite que botones y grupos de elementos se envuelvan.
• Diseña primero una columna clara.
• Añade columnas cuando exista espacio real.
• No ocultes contenido importante para resolver un problema de distribución.
• Comprueba que no aparezca desplazamiento horizontal.

Utiliza el modo de dispositivos del navegador y prueba, como mínimo:

• 320 px: pantalla estrecha.
• 768 px: pantalla mediana.
• 1024 px o más: pantalla amplia.

En cada tamaño comprueba:

• ¿Se puede leer el texto sin ampliar?
• ¿Los botones tienen suficiente espacio?
• ¿Las tarjetas conservan una anchura útil?
• ¿La navegación sigue siendo comprensible?
• ¿Las imágenes mantienen su proporción?
• ¿Existe algún elemento cortado?
• ¿Aparece una barra horizontal inesperada?

Práctica guiada 7 — Detectar el punto de ruptura

1. Abre tu página con una anchura grande.
2. Reduce lentamente la ventana.
3. Detente cuando la sección principal se vea comprimida.
4. Anota ese ancho aproximado.
5. Crea una consulta de medios para añadir la segunda columna solamente a partir de ese punto.
6. Repite la prueba después del cambio.

No copies automáticamente un punto de interrupción sugerido por otra persona o por una IA. Primero observa cuándo tu contenido necesita cambiar.

Video recomendado

Control de versiones con Git y GitHub

• Git registra cambios en el proyecto desde tu computadora.
• GitHub aloja repositorios y permite compartirlos por internet.
• Un repositorio es un proyecto cuyo historial administra Git.
• Un commit es un registro intencional de un conjunto de cambios.

Archivos modificados
        │
        ▼
Área de preparación: git add
        │
        ▼
Historial local: git commit
        │
        ▼
Repositorio remoto: git push

La primera vez que utilices Git en tu computadora, configura tu nombre y correo:

git config --global user.name "Tu Nombre"
git config --global user.email "tu-correo@ejemplo.com"

Utiliza el correo asociado con tu cuenta de GitHub si deseas que los commits se vinculen a tu perfil.

Abre una terminal dentro de la carpeta coa-landing:

git init
git status
git add .
git commit -m "Crea la estructura inicial de la landing"

Comprueba el estado con frecuencia:

git status

No esperes hasta el final para crear un único commit. Registra avances que representen una unidad de trabajo:

Crea la estructura semántica de la página
Diseña la sección principal y sus botones
Agrega la cuadrícula de beneficios
Adapta la navegación a pantallas estrechas
Mejora el foco visible del formulario

Mensajes como cambios, prueba o final final 2 no explican el historial.

Crea un repositorio vacío en GitHub. No añadas desde GitHub un README, una licencia o un archivo .gitignore si esos archivos ya existen localmente.

Después conecta ambos repositorios:

git branch -M main
git remote add origin URL-DE-TU-REPOSITORIO
git push -u origin main

Sustituye URL-DE-TU-REPOSITORIO por la dirección que proporciona GitHub.

Para los siguientes cambios:

git add .
git commit -m "Describe el cambio realizado"
git push

Escribe en README.md:

Landing page de un curso COA

Página desarrollada como proyecto del Módulo 1 del curso Desarrollo Web Moderno con React, Next.js e Inteligencia Artificial.

• HTML5
• CSS3

• Estructura semántica
• Diseño adaptable
• Uso de Flexbox y CSS Grid
• Controles con foco visible

Abre el archivo index.html en un navegador.

No publiques contraseñas, claves privadas, tokens ni información personal sensible. Un repositorio público puede ser visto y copiado por cualquier persona.

### Práctica guiada 8 — Crear un historial comprensible

Realiza tres mejoras pequeñas en la página y crea un commit después de cada una:

1. Mejora la estructura HTML.
2. Mejora la presentación de una sección.
3. Corrige un problema adaptable o de accesibilidad.

Al terminar, ejecuta:

git log --oneline

Lee el historial. Los mensajes deben permitir comprender la evolución del proyecto sin abrir los archivos.

### Video recomendado

[Aprende Git y GitHub práctico en 20 minutos — DevOpsea (22 min 40 s)](https://www.youtube.com/watch?v=mbqXrtDbPIA)

---

Revisión profesional asistida por inteligencia artificial

ChatGPT, Claude o GitHub Copilot pueden:

• explicar una regla de CSS;
• detectar posibles errores;
• proponer una estructura inicial;
• sugerir nombres de clases;
• revisar accesibilidad;
• comparar dos alternativas;
• ayudar a localizar la causa de un comportamiento inesperado.

También pueden:

• inventar propiedades;
• proponer código innecesario;
• cambiar requisitos sin avisar;
• generar una solución que parece correcta pero falla en algunos tamaños;
• utilizar etiquetas sin considerar su significado;
• afirmar que algo es accesible sin haberlo probado.

Por eso utilizarás este ciclo:

Comprender el objetivo
        ↓
Pedir una ayuda concreta
        ↓
Leer y explicar la respuesta
        ↓
Probar en el navegador
        ↓
Aceptar, modificar o rechazar
        ↓
Registrar un cambio con Git

Una buena solicitud incluye:

1. Contexto: qué estás construyendo.
2. Objetivo: qué resultado necesitas.
3. Código relevante: solo la parte necesaria.
4. Restricciones: qué tecnologías o decisiones deben conservarse.
5. Formato esperado: explicación, diagnóstico, lista o fragmento de código.

Ejemplo:

Estoy construyendo una landing page únicamente con HTML5 y CSS3.
La cuadrícula de tarjetas produce desplazamiento horizontal a 320 px.

Analiza el HTML y el CSS que incluyo abajo.
No reescribas toda la página y no uses JavaScript ni frameworks.

1. Identifica la causa más probable.
2. Explica por qué ocurre.
3. Propón el cambio mínimo.
4. Indica cómo puedo comprobar la corrección en el navegador.

[Pega únicamente el código relevante]

Entrega a ChatGPT o Claude una sección de tu HTML con esta solicitud:

Actúa como revisor de HTML semántico y accesibilidad.
No reescribas el código todavía.

Analiza la sección que incluyo y crea una tabla con:
- problema detectado;
- por qué puede afectar a una persona usuaria;
- cambio mínimo recomendado;
- nivel de prioridad: alto, medio o bajo.

Revisa especialmente encabezados, enlaces, botones, imágenes,
etiquetas de formulario y orden del contenido.

[Pega aquí una sola sección de tu HTML]

Después:

1. Lee cada recomendación.
2. Decide si es aplicable.
3. Rechaza cualquier cambio que no puedas explicar.
4. Implementa solamente los cambios comprobados.
5. Prueba la sección con teclado y en el navegador.
6. Registra en tu bitácora qué aceptaste y qué rechazaste.

Utiliza esta tabla:

Nunca pegues en una herramienta pública contraseñas, tokens, datos privados de usuarios ni código confidencial que no estés autorizado a compartir.

Construir un componente visual completo que presente un curso de COA y funcione correctamente en pantallas estrechas y amplias.

La tarjeta debe incluir:

• Un <article> como contenedor semántico.
• Una categoría.
• Un encabezado.
• Una descripción breve.
• Una lista con duración, cantidad de módulos y modalidad.
• Un enlace de llamada a la acción.
• Al menos un estado :hover.
• Un foco visible mediante :focus-visible.
• Espaciado consistente.
• Un ancho flexible sin desbordamiento a 320 px.

Paso 1. Escribe el contenido

Redacta primero la información real. Evita textos de relleno como “Lorem ipsum”.

Paso 2. Crea el HTML

Comprueba que la tarjeta se entienda sin CSS.

Paso 3. Aplica el modelo de caja

Define fondo, borde, relleno, separación y radio.

Paso 4. Organiza la información

Utiliza Flexbox para los datos breves si se distribuyen en una fila. Permite que pasen a otra línea.

Paso 5. Diseña la interacción

El enlace debe mostrar cambios visibles al pasar el puntero y al recibir foco con teclado.

Paso 6. Prueba

Comprueba la tarjeta a 320 px, 768 px y 1024 px.

Paso 7. Revisa con IA

Solicita una revisión de accesibilidad y claridad. No pidas que genere nuevamente toda la tarjeta.

• No utilices JavaScript.
• No utilices Bootstrap, Tailwind CSS ni otro framework.
• No copies una tarjeta completa sin comprender cada elemento y propiedad.
• No cambies el orden del contenido únicamente con CSS.

Conserva la tarjeta dentro del proyecto. Se reutilizará en la landing page del proyecto de módulo.

• Puedo explicar por qué utilicé <article>.
• El encabezado conserva el nivel correcto dentro de la página.
• La tarjeta se entiende sin CSS.
• No existe desplazamiento horizontal.
• El enlace se distingue del texto normal.
• El foco del teclado es visible.
• Puedo explicar cada propiedad CSS utilizada.
• Probé el resultado en tres anchos.

Construye una landing page profesional para presentar un curso de COA. La página debe comunicar con claridad qué ofrece el curso, a quién está dirigido, qué aprenderá el estudiante y cómo puede solicitar más información.

El proyecto integrará las prácticas realizadas durante el módulo. No necesitas comenzar desde una carpeta vacía: mejora, organiza y completa la página que ya construiste.

Encabezado

Debe incluir:

• Marca o logotipo textual de COA.
• Navegación con al menos tres enlaces internos.
• Una llamada a la acción.

Sección principal

Debe incluir:

• Una frase de contexto.
• Un único <h1> que describa el curso.
• Una propuesta de valor clara.
• Dos llamadas a la acción.
• Una imagen relevante con texto alternativo o un recurso decorativo correctamente marcado.

Beneficios

Debe incluir:

• Un <h2>.
• Al menos tres beneficios.
• Una estructura de tarjetas creada con Grid.

Programa

Debe incluir:

• Un <h2>.
• Al menos cuatro módulos o etapas.
• La tarjeta creada en el mini proyecto o una adaptación de ella.

Resultados de aprendizaje

Debe explicar qué podrá construir o realizar el estudiante al finalizar.

Llamada a la acción

Debe presentar una razón clara para continuar y un enlace hacia el formulario.

Formulario

Debe incluir:

• Nombre completo.
• Correo electrónico.
• Mensaje o interés principal.
• Etiquetas asociadas correctamente.
• Campos obligatorios cuando corresponda.
• Botón de envío.

El formulario no necesita enviar datos todavía.

Pie de página

Debe incluir:

• Nombre de COA.
• Una frase breve o información de derechos.
• Al menos un enlace útil.

• HTML5 semántico.
• Hoja CSS externa.
• Uso correcto de encabezados.
• Clases con nombres comprensibles.
• Variables CSS para las decisiones visuales principales.
• Uso de Flexbox en al menos dos grupos de elementos.
• Uso de Grid en al menos una sección.
• Enfoque mobile first.
• Al menos una consulta de medios basada en las necesidades del contenido.
• Página usable desde 320 px.
• Sin desplazamiento horizontal inesperado.
• Imágenes flexibles.
• Estados hover y focus-visible.
• Formulario con etiquetas visibles.
• Repositorio de Git con al menos cinco commits descriptivos.
• Repositorio publicado en GitHub.
• Archivo README.md.
• Bitácora de al menos dos usos de IA.

Utiliza ChatGPT, Claude o GitHub Copilot en al menos dos tareas diferentes. Algunas opciones:

• revisar la semántica de una sección;
• encontrar la causa de un desbordamiento;
• comparar dos alternativas de Grid;
• revisar el contraste de una paleta;
• mejorar los nombres de clases;
• explicar una regla que no comprendes.

Por cada uso registra:

1. La herramienta.
2. La solicitud.
3. La recomendación principal.
4. Lo que aceptaste, modificaste o rechazaste.
5. La prueba realizada.
6. Lo aprendido.

No se aprobará como evidencia una respuesta copiada sin análisis.

Fase 1. Define el contenido

Responde antes de diseñar:

• ¿Cuál es el curso?
• ¿Para quién es?
• ¿Qué problema ayuda a resolver?
• ¿Qué resultado promete de forma realista?
• ¿Cuál es la acción principal de la página?

Fase 2. Crea un esquema

Dibuja la página en papel o con cajas simples. Decide el orden de las secciones sin pensar todavía en colores.

Fase 3. Construye el HTML

Escribe toda la estructura y compruébala sin CSS.

Fase 4. Define el sistema visual

Elige:

• un color principal;
• un color de fondo;
• colores de texto legibles;
• una escala pequeña de espacios;
• radios consistentes;
• una sombra sutil;
• una tipografía del sistema o una fuente web correctamente configurada.

Fase 5. Diseña desde la pantalla estrecha

Comienza con una sola columna. Añade distribuciones más amplias únicamente cuando exista espacio.

Fase 6. Integra Flexbox y Grid

Utiliza cada herramienta por la necesidad que resuelve, no solo para cumplir el requisito.

Fase 7. Prueba

Realiza pruebas:

• a 320 px, 768 px y 1024 px;
• con teclado;
• con CSS temporalmente desactivado;
• con una imagen que tarde en cargar o no esté disponible;
• con textos un poco más largos.

Fase 8. Revisa con IA

Solicita revisiones pequeñas y específicas. Comprueba cada recomendación.

Fase 9. Limpia el código

Elimina reglas no utilizadas, corrige nombres confusos y revisa la sangría.

Fase 10. Publica

Actualiza el README, revisa el historial de Git y envía los cambios a GitHub.

Envía en el punto de entrega del módulo:

1. Enlace público al repositorio de GitHub.
2. Captura de la página en pantalla estrecha.
3. Captura de la página en pantalla amplia.
4. Bitácora de uso de IA.
5. Breve reflexión de entre 100 y 180 palabras:

• qué decisión de HTML o CSS fue la más importante;
• qué problema encontraste;
• cómo lo comprobaste;
• qué puedes explicar ahora que antes no comprendías.

Antes de enviar, abre el enlace del repositorio en una ventana privada para comprobar que el instructor podrá acceder.

El proyecto debe ser aprobado por el instructor. Si recibe observaciones, corrige el repositorio, crea commits que describan las correcciones y vuelve a entregar.

El Módulo 2 permanecerá bloqueado hasta que:

• el proyecto alcance el puntaje mínimo;
• se cumplan los requisitos críticos;
• la evaluación del módulo esté aprobada.

Aunque el puntaje alcance 75, el proyecto deberá corregirse si ocurre alguno de estos casos:

• El repositorio no puede abrirse.
• La página no contiene un <h1>.
• El formulario no tiene etiquetas asociadas.
• La interfaz no puede utilizarse a 320 px.
• Existe desplazamiento horizontal que impide acceder al contenido.
• El foco del teclado no es visible.
• El proyecto utiliza un framework no permitido.
• No existe evidencia de uso razonado de IA.
• El estudiante no puede explicar una parte sustancial del código entregado.

¿Cuál es la función principal de HTML?

A. Administrar versiones del proyecto. B. Describir la estructura y el significado del contenido. C. Crear todas las interacciones de la página. D. Publicar automáticamente un sitio.

¿Cuál es la mejor opción para el grupo principal de enlaces de una página?

A. <div> B. <span> C. <nav> D. <article>

¿Cuándo debe utilizarse un enlace en lugar de un botón?

A. Cuando la acción lleva a otra página o sección. B. Cuando se desea aplicar un color de fondo. C. Cuando el texto debe aparecer en negrita. D. Cuando el elemento está dentro de un formulario.

¿Qué representa padding en el modelo de caja?

A. El espacio exterior entre una caja y otras. B. El espacio interior entre el contenido y el borde. C. El ancho total de la pantalla. D. La sombra de un elemento.

¿Qué herramienta es más apropiada para alinear tres botones principalmente en una fila?

A. Flexbox. B. Git. C. HTML semántico. D. Una imagen.

¿Qué herramienta es más apropiada para organizar un catálogo en filas y columnas?

A. Un encabezado. B. CSS Grid. C. Un atributo alt. D. GitHub.

¿Qué caracteriza a un enfoque mobile first?

A. Diseñar únicamente para teléfonos. B. Crear una página independiente para cada dispositivo. C. Comenzar con el espacio estrecho y añadir mejoras cuando exista más espacio. D. Ocultar todo el contenido en pantallas pequeñas.

¿Qué comando crea un registro de los cambios preparados?

A. git status B. git add . C. git commit -m "mensaje" D. git init

¿Cuál es el uso profesional más adecuado de una IA durante este módulo?

A. Copiar una landing completa y entregarla sin leerla. B. Aceptar cualquier sugerencia porque la IA ya la verificó. C. Solicitar una revisión específica, comprenderla y probar cada cambio. D. Sustituir HTML por una descripción escrita.

Una cuadrícula se desborda a 320 px. ¿Cuál es el primer paso más útil?

A. Ocultar la cuadrícula completa. B. Observar el elemento con las herramientas del navegador e identificar qué regla impone el ancho. C. Añadir !important a todas las reglas. D. Convertir toda la página en una imagen.

Crea una segunda combinación de colores modificando únicamente las variables de :root. Comprueba nuevamente el contraste y no dupliques toda la hoja CSS.

Intenta que una sección de tarjetas se adapte mediante:

grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));

Explica cuándo este patrón funciona y cuándo todavía necesitarías una consulta de medios.

Duplica temporalmente la longitud de los títulos y descripciones. Corrige cualquier desbordamiento sin recortar información importante.

Investiga cómo añadir un enlace al inicio de la página que permita saltar directamente al contenido principal. Debe aparecer al recibir foco y funcionar con teclado.

Videos recomendados del módulo

No mires los videos de forma pasiva. Pausa, reproduce los ejemplos y compara cada explicación con tu proyecto.

Documentación y recursos de lectura

• 📖Primeros pasos con HTML — MDN
• 📖Estructura web y documentación — MDN
• 📖Empezar con CSS — MDN
• 📖HTML como base de la accesibilidad — MDN

• 📖Modelo de caja de CSS — MDN
• 📖Flexbox — MDN
• 📖Cuadrículas — MDN
• 📖Diseño receptivo — MDN

• 📖Configuración de Git — Documentación de GitHub
• 📖Acerca de Git — Documentación de GitHub
• 📖Libro Pro Git en español

• 📖Prácticas recomendadas para redactar instrucciones en ChatGPT — OpenAI

La documentación es una herramienta de consulta. No necesitas leerla completa antes de continuar. Utilízala para confirmar comportamientos, buscar propiedades y ampliar los temas que necesites reforzar.

Glosario

Accesibilidad: práctica de crear productos que puedan utilizar personas con distintas capacidades, tecnologías y formas de interacción.

Atributo: información adicional incluida en la etiqueta de apertura de un elemento HTML.

Cascada: conjunto de reglas que utiliza el navegador para decidir qué estilos se aplican cuando existen conflictos.

Clase: atributo HTML reutilizable que permite seleccionar elementos, especialmente desde CSS.

Commit: registro de un conjunto intencional de cambios en el historial de Git.

CSS: lenguaje que define la presentación y distribución de un documento.

Diseño adaptable: enfoque que permite que una interfaz responda a diferentes anchos, resoluciones y condiciones de uso.

Elemento HTML: conjunto formado normalmente por una etiqueta de apertura, contenido y una etiqueta de cierre.

Flexbox: sistema de distribución principalmente unidimensional.

Git: sistema de control de versiones distribuido.

GitHub: plataforma que aloja repositorios Git y facilita su colaboración y publicación.

Grid: sistema CSS de distribución en filas y columnas.

HTML: lenguaje de marcado que estructura y describe el significado del contenido web.

Media query: regla CSS que aplica estilos cuando se cumple una condición del medio, como un ancho mínimo.

Mobile first: estrategia que comienza con el diseño para espacios estrechos y añade mejoras progresivas cuando existe más espacio.

Modelo de caja: representación de un elemento mediante contenido, relleno, borde y margen.

Repositorio: carpeta de proyecto cuyo historial es administrado por Git.

Semántica: significado que una etiqueta aporta a la estructura del contenido.

Selector: patrón utilizado por CSS para elegir los elementos que recibirán estilos.

Viewport: área visible de una página dentro del navegador.

Resumen del módulo

En este módulo construiste la base visual y estructural del desarrollo web moderno.

Aprendiste que:

• HTML no existe para decorar, sino para describir correctamente el contenido.
• Una buena semántica mejora la comprensión, el mantenimiento y la accesibilidad.
• CSS controla presentación, espaciado, tipografía, estados y distribución.
• El modelo de caja explica gran parte de los problemas de tamaño y separación.
• Flexbox resuelve distribuciones principalmente lineales.
• Grid permite organizar filas y columnas.
• El diseño adaptable comienza con contenido flexible, no con una colección infinita de tamaños de dispositivo.
• Git conserva un historial útil cuando los commits representan cambios claros.
• GitHub permite compartir el proyecto.
• La IA aporta valor cuando recibe una tarea concreta y sus respuestas son comprendidas, probadas y evaluadas.

Al aprobar el módulo podrás:

• convertir un esquema visual en HTML semántico;
• diseñar una interfaz coherente con CSS;
• construir tarjetas y secciones adaptables;
• detectar problemas básicos con las herramientas del navegador;
• publicar el código en un repositorio;
• solicitar y evaluar ayuda de una IA;
• entregar una landing page profesional como base para futuras aplicaciones.

Confirma que completaste:

• Las nueve prácticas guiadas.
• El mini proyecto.
• La landing page profesional.
• La bitácora de uso de IA.
• El repositorio y el README.
• La evaluación del módulo.
• Las correcciones solicitadas por el instructor.
• La aprobación del proyecto.

Cuando el proyecto esté aprobado, estarás preparado para añadir comportamiento real a la interfaz en el Módulo 2: JavaScript moderno en el navegador.