DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
Clase 4 de 43 • Curso de Frontend Developer 2019
Contenido del curso
Conceptos iniciales de HTML
- 6
Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos
05:52 min - 7
Anatomía de un Documento HTML: DOCTYPE, html, head y body
09:43 min - 8
Funciones de las etiquetas HTML más importantes
00:35 min - 9
La importancia del código semántico
07:14 min - 10
Tipos de errores en HTML, debugging y servicio de validación de etiquetas
07:25 min - 11
Reto 1: Organiza el siguiente bloque de código de forma semántica
00:13 min
Conceptos iniciales de CSS
- 12
Anatomía de una declaración CSS: Selectores, Propiedades y Valores
03:17 min - 13
Tipos de selectores, pseudo-clases y pseudo-elementos
11:02 min - 14
Modelo de caja
10:26 min - 15
Valores relativos y absolutos
06:20 min - 16
Displays en CSS
00:13 min - 17
Funciones de las propiedades CSS más usadas
03:37 min - 18
Posicionamiento en CSS
00:27 min
Arquitectura CSS
Construcción de componentes
- 22
¿Qué es un componente? Analicemos nuestros diseños
03:59 min - 23
Estructura con HTML y BEM de un menú desplegable
10:27 min - 24
Estilizando nuestro menú desplegable con CSS
13:11 min - 25
Creación de un buscador
10:18 min - 26
Creación de un carousel de imágenes con CSS: Estructura principal
13:03 min - 27
Creación de un carousel de imágenes con CSS: Detalle de cada item
11:30 min
Maquetación y diseño responsivo
- 28
Flexbox
05:05 min - 29
Nuestro nuevo sistema de layout: CSS Grid
07:17 min - 30
Maquetación de la pantalla de login: Estructura HTML
10:46 min - 31
Maquetación de la pantalla de login: Estilización con CSS
11:46 min - 32
Estilización de inputs y footer en la pantalla de login
13:07 min - 33
Media queries
03:56 min - 34
Maquetación de la pantalla principal
06:11 min - 35
Reto 3: Maquetación de la pantalla de Not Found
00:27 min
Preprocesadores
Accesibilidad
Conclusión
Bonus
Resumen
DOM: Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.
CSSOM: así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.
Render Tree: es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.
Pasos que sigue el navegador para construir las páginas web:
- Procesa el HTML para construir el DOM.
- Procesa el CSS para construir el CSSOM.
- El DOM se une con el CSSOM para crear el Render Tree.
- Se aplican los estilos CSS en el Render Tree.
- Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.