HTML5, CSS3 y JavaScript (Videos 1-4)

1. Video 1: Estructuras de Datos, Metadatos y Manipulación Global de Estilos

En la construcción de una web, la estructura es el cimiento. Un error común es subestimar el uso de etiquetas específicas, recurriendo al uso excesivo de contenedores genéricos.

Listas y Comentarios

<ul> (Unordered List): Para listas con viñetas.
<ol> (Ordered List): Para listas numeradas.
<li> (List Item): El contenedor obligatorio para cada elemento.

Es fundamental documentar el código. Los comentarios en HTML no se renderizan en el navegador y utilizan la sintaxis .

<!-- Lista principal desordenada -->
<ul>
  <li>Café</li>
  <li>Té
    <!-- Sublista numerada para pasos de preparación -->
    <ol>
      <li>Hervir agua</li>
      <li>Añadir hojas</li>
    </ol>
  </li>
</ul>

Tablas

Una tabla no es solo un conjunto de filas (<tr>) y celdas (<td> para datos, <th> para encabezados). Para un control profesional y mejor accesibilidad, debemos segmentarlas:

<thead>, <tbody>, y <tfoot>: Estas etiquetas no cambian visualmente la tabla de inmediato, pero funcionan como hooks de CSS y organizan semánticamente el contenido.
Atributo colspan: Se utiliza para fusionar celdas horizontalmente (similar a "combinar celdas" en Excel). Ejemplo: <td colspan="2"> ocupará el espacio de dos columnas.

Metadatos y el Objeto `document`

Los metadatos en el <head> definen el comportamiento del sitio:

<meta charset="utf-8">: Vital para evitar errores en caracteres especiales.
<meta name="viewport" content="...">: Indispensable para que el sitio sea responsivo en móviles.
<title>: El nombre de la pestaña.

Manipulación avanzada con JavaScript: Como Senior, te sugiero conocer el acceso profundo a las hojas de estilo, no solo al estilo en línea de un elemento.

Pasted image 20260506115442.png

Meta Etiquetas

Las meta etiquetas definen metadatos sobre el documento HTML y generalmente no son visibles para el usuario. No son etiquetas contenedoras (no tienen etiqueta de cierre).

Pasted image 20260506115545.png

2. Video 2: Maquetación Semántica y el Modelo de "Cajas Invisibles"

El diseño moderno no se trata de colocar elementos al azar, sino de seguir un Modelo Mental de Filas y Columnas

Lógica de Maquetación

Filas Primero: Descomponemos la página en grandes bloques horizontales (filas) que ocupan el 100% del ancho.
Columnas Después: Dentro de una fila, anidamos contenedores que actuarán como columnas. No puedes poner cajas lado a lado sin un contenedor padre que las gestione.

Elementos Semánticos de HTML5

Debemos reemplazar el div genérico por etiquetas que aporten significado:

<header>, <footer>, <nav>, <main>, <section>, <article>, <aside>.

Flexbox y Proporciones

Para activar el comportamiento de columnas, aplicamos display: flex al contenedor padre (la fila).

/* El contenedor padre activa el contexto flex */
.row {
  display: flex;
  padding: 20px; /* Espacio interno para ver el contenedor */
}

/* Control de proporciones entre columnas */
.col-sidebar {
  flex: 1; /* Ocupa una parte */
  margin-right: 10px;
}

.col-main {
  flex: 3; /* Ocupa tres partes (proporción 25% / 75%) */
}

/* Limpieza de márgenes en el último elemento */
.col:last-child {
  margin-right: 0;
}

3. Video 3: Tipos de Datos y Procesamiento de Inputs

Uno de los errores más frecuentes en juniors es confiar en el atributo type de los inputs para el manejo de datos en JavaScript.

UX vs. Tipado de Datos

Para el Usuario: type="number" o type="date" sirven para mostrar el teclado correcto en móviles o validar el formato.
Para JavaScript: El valor obtenido mediante .value siempre es un String.

El Problema de la Concatenación

Si intentas sumar 1 al valor "45" de un input, obtendrás "451". JavaScript concatena el texto en lugar de realizar una suma aritmética.

Función	Propósito	Resultado
`Number()`	Conversión general a número.	`4.5`
`parseInt()`	Convierte a entero (descarta decimales).	`4`
`parseFloat()`	Mantiene los puntos decimales.	`4.5`

Pasted image 20260506115949.png
Pasted image 20260506120128.png

4. Video 4: Atributos de Datos Personalizados (Data Attributes)

Los Data Attributes son la forma estándar de almacenar información extra en el HTML que JavaScript puede consumir fácilmente.

Sintaxis y CamelCase

En HTML usamos el prefijo data- seguido de guiones. En JavaScript, accedemos a través de .dataset usando CamelCase (eliminando guiones y usando mayúsculas).

HTML: data-product-type="drink"
JS: dataset.productType

Lectura, Escritura y el "Round-Trip"

Cuando modificas un valor en el dataset, JavaScript actualiza automáticamente el atributo en el DOM, siguiendo la convención de guiones de vuelta al HTML.

Pasted image 20260506120411.png
la consistencia en el nombramiento de los data-attributes es clave para mantener la lógica de tu aplicación clara y libre de errores de referencia.