Home » UNDECIMO_PW » MATERIAL DE APOYO HTML Y CSS

MATERIAL DE APOYO HTML Y CSS

in - on junio 01, 2026

 



Nos basaremos en el contenido completo y la estructura del video "Curso de HTML y CSS desde CERO" de Soy Dalto, he preparado un análisis detallado y un desglose estructurado del curso. Este video de 24 horas es uno de los recursos más exhaustivos que existen para aprender desarrollo web frontend y está diseñado con una metodología lógica que va desde los fundamentos hasta proyectos prácticos avanzados.

A continuación, tienes la ruta de aprendizaje definitiva y el desglose analítico por capítulos basado estrictamente en el contenido real del video, lo que te servirá como una guía paso a paso para dominar estas tecnologías.

Índice de Contenido y Desglose por Capítulos de Aprendizaje

Módulo 1: Fundamentos de la Web y Preparación del Entorno

Este bloque inicial establece los cimientos lógicos de cómo funciona la red antes de escribir una sola línea de código.

  • 00:00 - Introducción al Curso: Presentación de objetivos, alcance del curso de 24 horas y cómo se estructurará el aprendizaje profesional.

  • 02:35 - Entendiendo la WEB: * ¿Cómo viaja la información en internet?

    • La relación e interacción entre el Cliente (Navegador) y el Servidor Web.

    • Qué es una URL y cómo los navegadores interpretan el código para renderizar una página.

  • 13:38 - Entendiendo HTML y CSS: * ¿Qué es un lenguaje de marcado ligero vs. pesado?

    • Concepto de HTML como la Estructura (esqueleto) y CSS como la Estética (diseño) de una web.

    • Diferencia entre lenguajes interpretados en tiempo real y lenguajes compilados.

  • 26:10 - Editor de Código: * Instalación y configuración de Visual Studio Code.

    • Uso de extensiones esenciales como Prettier (formateador de código) y Live Server para previsualizar cambios en vivo.

Módulo 2: HTML Básico

Aprenderás a construir el esqueleto esencial de cualquier documento en la web.

  • 35:02 - Estructura de una etiqueta: Etiquetas de apertura y cierre, etiquetas autocerradas y el concepto de atributos.

  • 45:48 - Estructura de una página WEB: La jerarquía obligatoria de un documento (<!DOCTYPE html>, <html>, <head>, <body>).

  • 51:58 - Párrafos y encabezados: Uso correcto de la etiqueta <p> para ideas concretas y la jerarquía de títulos desde <h1> hasta <h6>.

  • 1:00:09 - Listas: Creación de listas ordenadas (<ol>), listas desordenadas (<ul>) y sus elementos de lista (<li>).

  • 1:10:45 - Enlaces (Básico): Uso de la etiqueta de ancla (<a>), el atributo href y la apertura de pestañas mediante target="_blank".

  • 1:26:09 - Imágenes y Rutas: * Inserción de imágenes con <img> y atributos src y alt.

    • Comprensión crucial de rutas absolutas (URLs de internet) y rutas relativas (dentro del proyecto local).

  • 1:41:40 - Formularios: Introducción a la captura de datos con la etiqueta <form> y los tipos básicos de elementos <input>.

Módulo 3: CSS Básico

Tu introducción al diseño visual y la manipulación de elementos en el espacio.

  • 1:56:45 - Introducción a CSS: Cómo enlazar estilos a tu HTML y sintaxis de las reglas CSS (selector, propiedad y valor).

  • 2:08:24 - Selectores (Básico): Selección por etiquetas, clases (.clase) e identificadores (#id).

  • 2:18:04 - Propiedades de texto y fuente: Control del tamaño (font-size), grosor (font-weight), alineación y decoración del texto.

  • 2:44:56 - Tipografías externas: Cómo importar fuentes externas (por ejemplo, Google Fonts) a tus proyectos.

  • 2:55:25 - Modelo de caja (Box Model): * Comprensión del núcleo del diseño web: Contenido (content), Relleno (padding), Borde (border) y Margen (margin).

  • 3:07:04 - Relleno y Margen (margin y padding): Aplicación práctica y propiedades individuales por lados (Top, Right, Bottom, Left).

  • 3:37:57 - Bordes: Estilos de borde (sólidos, punteados), grosores y colores.

  • 3:53:43 - Tamaño de caja (box sizing): El uso indispensable de box-sizing: border-box para evitar que el padding rompa las dimensiones de tus layouts.

  • 4:02:09 - Colores: Formatos de color en CSS (nombres, HEX, RGB y RGBA para opacidad).

  • 4:25:16 - Unidades: Diferencia entre unidades absolutas (px) y unidades relativas (em, rem, %, vw, vh).

  • 4:50:29 - Fondos, Gradientes y Sombras: Uso de imágenes de fondo, creación de degradados lineales/radiales y sombras textiles y de caja (box-shadow).

  • 5:31:15 - Ejercicio práctico: Primer proyecto integrador aplicando todo el HTML y CSS básico aprendido hasta el momento.

Módulo 4: HTML Avanzado

Enfoque en la semántica profesional, optimización para motores de búsqueda (SEO) y accesibilidad universal.

  • 5:38:02 - Metatags, Comentarios e Iconos: Configuración del <head>, etiquetas meta para SEO y redes sociales, e inclusión de favicons.

  • 5:57:18 - Textarea y Labels: Elementos avanzados de formularios y vinculación de etiquetas para mejorar la experiencia de usuario.

  • 6:24:18 - Select, Datalist y Option: Creación de menús desplegables y listas de sugerencias nativas.

  • 6:33:02 - Fieldset y Legend: Agrupación lógica y visual de campos dentro de formularios complejos.

  • 6:44:35 - Details y Summary: Creación de componentes colapsables nativos (tipo acordeón de preguntas frecuentes) sin usar JavaScript.

  • 6:51:34 - Enlaces (Avanzado): Atributos avanzados como rel y marcadores de sección internos (anclas en la misma página).

  • 7:04:12 - Tablas: Estructuración de datos tabulares complejos empleando <table>, <tr>, <td>, <th>, <thead> y <tbody>.

  • 7:22:25 - Audio y Video: Inserción y control nativo de elementos multimedia en la página web.

  • 7:34:10 - Lazy Loading: Optimización de rendimiento web retrasando la carga de imágenes fuera de pantalla mediante el atributo loading="lazy".

  • 7:39:37 - HTML Obsoleto: Identificación de etiquetas antiguas que ya no deben utilizarse en el desarrollo moderno.

  • 7:49:10 - HTML Semántico: El uso de contenedores con significado estructural claro (<header>, <nav>, <main>, <article>, <aside>, <footer>) en lugar de abusar de los <div>.

  • 7:57:42 - Accesibilidad WEB: Programación inclusiva utilizando validaciones con Lighthouse de Google Chrome y atributos ARIA (Accessible Rich Internet Applications) para lectores de pantalla.

Módulo 5: CSS Intermedio

Aprende las reglas de prioridad del navegador y las técnicas de posicionamiento de elementos.

  • 8:19:58 - Selectores (Avanzado): Selectores combinadores (hijos, hermanos, descendientes) y selectores de atributos.

  • 8:36:14 - Herencia, Cascada y Especificidad: Cómo el navegador decide qué estilos aplicar cuando hay reglas en conflicto (cálculo de especificidad).

  • 9:04:51 - Pseudoclases: Estilos basados en el estado del elemento (:hover, :focus, :nth-child()).

  • 9:30:38 - Pseudoelementos: Inserción de elementos cosméticos generados por CSS (::before, ::after).

  • 9:37:51 - Metodología BEM: Introducción a Block, Element, Modifier, un sistema estándar para nombrar clases CSS de forma limpia y mantenible.

  • 9:49:33 - Display: Dominio de los flujos de comportamiento de elementos: inline, block, inline-block y none.

  • 10:03:21 - Posición Relativa y Absoluta: Control manual y superposición de elementos usando position: relative y position: absolute.

  • 10:26:36 - Ventanas Modal: Creación de una interfaz de ventana emergente nativa combinando posiciones de CSS.

  • 10:35:20 - Posición Fixed y Sticky: Fijación de barras de navegación y elementos que se quedan "pegados" al hacer scroll.

  • 10:43:28 - Transiciones: Suavizado de cambios de estilos (ej. cambios de color al pasar el cursor).

  • 10:56:53 - Desbordamiento (overflow): Manejo de contenidos que exceden el tamaño de su contenedor (hidden, scroll, auto).

  • 11:01:49 - Control de flujo del texto: Propiedades para romper palabras, truncar textos y controlar el desbordamiento de cadenas largas.

  • 11:11:54 - Object fit y Object position: Escalado y posicionamiento inteligente de imágenes y videos dentro de cajas con tamaños fijos.

  • 11:16:34 - Contorno (outline): Diferencias entre bordes y contornos, clave para estilos de accesibilidad en el enfoque táctil o de teclado.

  • 11:25:13 - Emmet (Material re-usado): Atajos de teclado avanzados para acelerar la escritura de código estructural.

Módulo 6: CSS Flexbox (Maquetación Unidimensional)

Domina el primer gran sistema moderno de layouts, diseñado para alinear elementos en filas o columnas.

  • 11:43:11 - Introducción a Flexbox: Concepto del contenedor flexible (Flex Container) y los elementos flexibles (Flex Items).

  • 11:56:29 - Flex Direction, Flex Wrap y Flex Flow: Definición del eje principal y cómo permitir que los elementos salten de línea.

  • 12:17:33 - Alineación en los ejes: Distribución y alineación usando justify-content (eje principal) y align-items / align-content (eje secundario).

  • 12:34:59 - Order: Modificación del orden visual de los elementos sin alterar la estructura del código HTML original.

  • 12:41:37 - Flex Basis, Shrink y Grow: Control avanzado del tamaño inicial de un elemento, cuánto se puede estirar y cuánto se puede encoger para ocupar el espacio disponible.

  • 12:59:10 - Align Self: Alineación independiente de un único elemento flexible de forma aislada.

  • 13:02:42 - Layout con Flexbox: Ejercicios de maquetación de layouts reales utilizando este sistema.

Módulo 7: Responsive Design (Diseño Responsivo)

Aprende las técnicas necesarias para que tus páginas se adapten perfectamente a celulares, tablets y pantallas de escritorio.

  • 13:35:25 - Bloques y Multimedia flexible: Creación de layouts fluidos y videos/imágenes que escalan proporcionalmente.

  • 13:56:07 - Atributos SRCSET y SIZES: Técnicas avanzadas en la etiqueta de imagen para servir archivos de diferentes resoluciones según la pantalla del dispositivo.

  • 14:10:17 - Picture, Source y Media: Uso de la etiqueta <picture> para realizar dirección de arte (mostrar imágenes recortadas o totalmente diferentes según el tamaño de pantalla).

  • 14:21:18 - Media Queries: Declaraciones condicionales CSS basadas en el ancho, alto o resolución de la pantalla de destino.

  • 14:29:57 - Ejercicio "Holy Grail" con Flexbox: Maquetación del clásico diseño web "Santo Grial" (cabecera, barra lateral izquierda, contenido, barra lateral derecha y pie de página) adaptativo.

  • 14:48:36 - Mobile First: Filosofía de desarrollo donde se codifica primero el diseño para pantallas móviles y luego se añaden capas para pantallas grandes mediante Media Queries.

  • 14:55:08 - Feature Queries: Uso de @supports para verificar si el navegador del usuario es compatible con ciertas propiedades CSS antes de aplicarlas.

  • 14:59:01 - Container Queries: La nueva evolución del diseño responsivo: estilos basados en el tamaño del contenedor padre y no en el tamaño de toda la pantalla del dispositivo.

Módulo 8: CSS Grid (Maquetación Bidimensional)

Domina el sistema definitivo de rejillas para controlar simultáneamente filas y columnas.

  • 15:05:11 - Introducción a Grid: Conceptos clave de rejillas, líneas de cuadrícula y celdas.

  • 15:12:50 - Creando un Grid: Activación de display: grid y definición de filas y columnas.

  • 15:24:54 - Unidades "auto" y "fr": Uso de la unidad de fracción (fr) para crear distribuciones proporcionales y dinámicas.

  • 15:34:24 - Repeat y Minmax: Funciones CSS para simplificar declaraciones de rejillas masivas y definir límites mínimos y máximos de tamaño.

  • 15:42:18 - Grid implícito y explícito: Cómo maneja CSS Grid los elementos que exceden la cuadrícula definida manualmente.

  • 15:53:34 - Grid dinámico (y responsive): Combinación de auto-fit y auto-fill junto con minmax() para hacer layouts 100% responsivos sin necesidad de usar Media Queries.

  • 16:04:54 - Grid column y Grid row: Posicionamiento manual expandiendo elementos a través de múltiples filas y columnas.

  • 16:14:52 - Grid flow: Dense: Algoritmo de ordenamiento de Grid para rellenar huecos vacíos de la rejilla automáticamente si entran elementos más pequeños.

  • 16:19:34 - Grid areas: Creación de mapas semánticos visuales con grid-template-areas para maquetar de forma ultra rápida e intuitiva.

  • 16:35:06 - Alineación con grid: Control de alineación de la rejilla completa y de los elementos individuales en sus celdas.

  • 16:53:28 - Subgrid: Funcionalidad avanzada que permite a los elementos hijos heredar y alinearse perfectamente con la cuadrícula del elemento padre.

  • 17:02:14 - Creando una página WEB: Proyecto integral de desarrollo de una página web completa estructurada nativamente con CSS Grid.

Módulo 9: Animaciones CSS Modernas

Da vida a tus interfaces mediante movimientos y dinámicas interactivas avanzadas.

  • 18:02:13 - Transiciones (Repaso): Conexión conceptual entre transiciones simples y animaciones complejas.

  • 18:13:13 - Animaciones: Declaración de animaciones complejas utilizando reglas de fotogramas clave @keyframes y propiedades de control (animation-duration, animation-iteration-count, etc.).

  • 18:29:19 - Botones Animados y Efecto Typewriter: Proyectos prácticos de microinteracciones de botones y la creación de un efecto de "máquina de escribir" puramente con CSS.

  • 18:52:42 - Animaciones basadas en Scroll: Creación de efectos visuales modernos donde la animación progresa a medida que el usuario baja en la página web.

  • 19:07:35 - Rango de animaciones: Configuración fina de los puntos de inicio y finalización de las animaciones ligadas al scroll de pantalla.

  • 19:17:33 - Integrando animaciones en una WEB: Aplicación práctica de efectos de movimiento sutiles sobre un sitio web real.

  • 19:29:14 - Animaciones, cumpliendo la promesa: Conclusión del uso profesional y optimizado de los recursos de animación.

Módulo 10: Web Hosting y Despliegue

Saca tus proyectos de tu computadora local y muéstralos al mundo entero.

  • 19:31:07 - Introducción al WEB HOSTING: Conceptos de servidores, dominios y cómo funciona el almacenamiento en la nube.

  • 19:57:59 - Subir tu WEB a INTERNET: Proceso guiado paso a paso para desplegar en vivo tu proyecto web utilizando un servicio de hosting profesional.

Módulo 11: CSS Avanzado y Funciones Modernas

El arsenal de herramientas más recientes añadidas al estándar de CSS.

  • 20:09:16 - Filter y Backdrop Filter: Efectos visuales de desenfoque, contraste y escala de grises directos sobre elementos o fondos (efecto vidrio esmerilado / Glassmorphism).

  • 20:29:30 - Transform: Manipulación espacial de elementos mediante traslaciones, rotaciones, escalados y sesgos en 2D y 3D.

  • 20:40:54 - Min, Max y Clamp: Funciones matemáticas de CSS para crear tipografías y anchos fluidos e inteligentes de forma automática.

  • 20:54:26 - Variables (custom properties): Creación de variables CSS (--mi-color: #fff) para gestionar de forma global temas oscuros/claros y paletas de colores estables.

  • 21:05:50 - Función Calc: Realización de cálculos aritméticos dinámicos mixtos (ej. calc(100vh - 50px)) directamente en las hojas de estilo.

  • 21:14:58 - Propiedades del Scroll: Configuración del comportamiento del deslizamiento, como el scroll suavizado (scroll-behavior: smooth) y puntos de parada fijos (Scroll Snapping).

  • 21:22:31 - Initial Letter: Estilización avanzada de capitulares (la primera letra gigante de un párrafo de revista o periódico).

  • 21:27:28 - Unidades del Viewport Modernas: Dominio de las nuevas unidades dinámicas lvh, svh y dvh diseñadas para solucionar problemas de barras de navegación que se ocultan en navegadores móviles.

  • 21:32:45 - Min-content, Max-content y Fit-content: Palabras clave de dimensionamiento basadas estrictamente en la longitud intrínseca del contenido de un elemento.

  • 21:39:19 - Función Color Mix: Herramienta de CSS moderno para mezclar porcentajes de dos colores diferentes directamente en el código.

Módulo 12: Proyectos Finales de Portafolio

Aplicación de ingeniería frontend completa en componentes y maquetas modulares del mundo real.

  • 21:49:41 - Sidebar Menu & Chatbox (Proyectos 1 y 2): Desarrollo detallado de un menú de navegación lateral profesional responsivo y una interfaz completa de caja de chat para atención o mensajería.

  • 22:43:47 - Flip Card & One-Page View (Proyectos 3 y 4): Creación de tarjetas interactivas con efecto de volteo 3D al pasar el cursor y desarrollo de un sitio web fluido estilo presentación de una sola página.

  • 23:21:42 - Menú Acordeón (Proyecto 5): Construcción de un menú colapsable avanzado y estilizado dinámicamente para la organización de contenidos.

Módulo 13: Cierre y Continuidad Profesional

Orientación estratégica sobre el futuro de tu carrera como desarrollador.

  • 23:42:39 - Cómo seguir aprendiendo: * Recomendaciones de optimización de código y minimización de archivos para mejorar tiempos de carga reales.

    • Introducción al ecosistema de frameworks CSS con un enfoque en la popularidad y potencia de Tailwind CSS (Utility-First).

    • La necesidad indispensable de saltar a JavaScript para añadir interactividad de programación lógica profunda y backend/frontend dinámico.

    • Consejo de cierre: "No programen para solucionar problemas, programen para crear soluciones."

💡 Recomendación para consumir este curso:

Al ser una ruta de 24 horas, no intentes memorizar cada propiedad. Utiliza este desglose para estudiar un bloque por día o por semana, abre tu editor de código e imita los ejercicios prácticos de Soy Dalto. La clave para dominar HTML y CSS está en la práctica constante y en entender cómo se comportan los bloques y las cajas en el navegador. ¡Mucho éxito en tu aprendizaje!


Etiquetas: