Temario y recursos del Curso de Frontend Developer
Temario del Curso de Frontend Developer
Introducción al curso
- Presentación y bienvenida al curso de Frontend Developer
- HTML y CSS: definición y usos
- ¿Qué son y para qué nos sirven HTML y CSS?
- DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
- 5 tips para aprender CSS
Conceptos iniciales de HTML
- Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos
- Anatomía de un Documento HTML: DOCTYPE, html, head y body
- Funciones de las etiquetas HTML más importantes
- La importancia del código semántico
- Tipos de errores en HTML, debugging y servicio de validación de etiquetas
- Reto 1: Organiza el siguiente bloque de código de forma semántica
Conceptos iniciales de CSS
- Anatomía de una declaración CSS: Selectores, Propiedades y Valores
- Tipos de selectores, pseudo-clases y pseudo-elementos
- Modelo de caja
- Valores relativos y absolutos
- Displays en CSS
- Funciones de las propiedades CSS más usadas
- Posicionamiento en CSS
Arquitectura CSS
- ¿Qué son y para qué nos sirven las arquitecturas CSS?
- OOCSS, BEM, SMACSS, ITCSS y Atomic Design
- Reto 2: Identifica el error de arquitectura del siguiente bloque de código
Construcción de componentes
- ¿Qué es un componente? Analicemos nuestros diseños
- Estructura con HTML y BEM de un menú desplegable
- Estilizando nuestro menú desplegable con CSS
- Creación de un buscador
- Creación de un carousel de imágenes con CSS: Estructura principal
- Creación de un carousel de imágenes con CSS: Detalle de cada item
Maquetación y diseño responsivo
- Flexbox
- Nuestro nuevo sistema de layout: CSS Grid
- Maquetación de la pantalla de login: Estructura HTML
- Maquetación de la pantalla de login: Estilización con CSS
- Estilización de inputs y footer en la pantalla de login
- Media queries
- Maquetación de la pantalla principal
- Reto 3: Maquetación de la pantalla de Not Found
Preprocesadores
- ¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?
- Instalación de SASS y configuración inicial
- Hablemos de variables, herencia, anidamiento, operadores y más
Para este curso vas a necesitar
4 Horas de contenido
20 Horas de práctica
Proyecto del curso
Desarrollo visual de Platzi VideoUsando HTML Y CSS programarás y darás estilos al front de Platzi Video, una aplicación para ver videos en línea. Diseña el home, la pantalla de registro, el login y la pantalla de error de esta aplicación web.
Para este curso vas a necesitar
4 Horas de contenido
20 Horas de práctica
Proyecto del curso
Desarrollo visual de Platzi VideoUsando HTML Y CSS programarás y darás estilos al front de Platzi Video, una aplicación para ver videos en línea. Diseña el home, la pantalla de registro, el login y la pantalla de error de esta aplicación web.
Introducción al curso
- Presentación y bienvenida al curso de Frontend Developer
- HTML y CSS: definición y usos
- ¿Qué son y para qué nos sirven HTML y CSS?
- DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
- 5 tips para aprender CSS
Conceptos iniciales de HTML
- Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos
- Anatomía de un Documento HTML: DOCTYPE, html, head y body
- Funciones de las etiquetas HTML más importantes
- La importancia del código semántico
- Tipos de errores en HTML, debugging y servicio de validación de etiquetas
- Reto 1: Organiza el siguiente bloque de código de forma semántica
Conceptos iniciales de CSS
- Anatomía de una declaración CSS: Selectores, Propiedades y Valores
- Tipos de selectores, pseudo-clases y pseudo-elementos
- Modelo de caja
- Valores relativos y absolutos
- Displays en CSS
- Funciones de las propiedades CSS más usadas
- Posicionamiento en CSS
Arquitectura CSS
- ¿Qué son y para qué nos sirven las arquitecturas CSS?
- OOCSS, BEM, SMACSS, ITCSS y Atomic Design
- Reto 2: Identifica el error de arquitectura del siguiente bloque de código
Construcción de componentes
- ¿Qué es un componente? Analicemos nuestros diseños
- Estructura con HTML y BEM de un menú desplegable
- Estilizando nuestro menú desplegable con CSS
- Creación de un buscador
- Creación de un carousel de imágenes con CSS: Estructura principal
- Creación de un carousel de imágenes con CSS: Detalle de cada item
Maquetación y diseño responsivo
- Flexbox
- Nuestro nuevo sistema de layout: CSS Grid
- Maquetación de la pantalla de login: Estructura HTML
- Maquetación de la pantalla de login: Estilización con CSS
- Estilización de inputs y footer en la pantalla de login
- Media queries
- Maquetación de la pantalla principal
- Reto 3: Maquetación de la pantalla de Not Found
Preprocesadores
- ¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?
- Instalación de SASS y configuración inicial
- Hablemos de variables, herencia, anidamiento, operadores y más
