Curso de Frontend Developer

Clases del Curso de Frontend Developer

Instruido por:
Estefany Aguilar
Estefany Aguilar
Básico
4 horas de contenido
Ver la ruta de aprendizaje
Desarrollo visual de Platzi Video
Proyecto del curso
Desarrollo visual de Platzi Video

Usando 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.

Curso de Frontend Developer

Curso de Frontend Developer

Progreso del curso:0/43contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/43contenidos(0%)

Introducción al curso

Material Thumbnail

Presentación y bienvenida al curso de Frontend Developer

01:59 min

Material Thumbnail

HTML y CSS: definición y usos

Material Thumbnail

¿Qué son y para qué nos sirven HTML y CSS?

04:55 min

Material Thumbnail

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

08:20 min

5 tips para aprender CSS

00:01 min

Conceptos iniciales de HTML

Material Thumbnail

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

05:52 min

Material Thumbnail

Anatomía de un Documento HTML: DOCTYPE, html, head y body

09:43 min

Funciones de las etiquetas HTML más importantes

00:35 min

Material Thumbnail

La importancia del código semántico

07:14 min

Material Thumbnail

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

07:25 min

Reto 1: Organiza el siguiente bloque de código de forma semántica

00:13 min

Conceptos iniciales de CSS

Material Thumbnail

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

03:17 min

Material Thumbnail

Tipos de selectores, pseudo-clases y pseudo-elementos

11:02 min

Material Thumbnail

Valores relativos y absolutos

06:20 min

Funciones de las propiedades CSS más usadas

03:37 min

Posicionamiento en CSS

00:27 min

Arquitectura CSS

Material Thumbnail

¿Qué son y para qué nos sirven las arquitecturas CSS?

04:14 min

Material Thumbnail

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

08:10 min

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

00:10 min

Construcción de componentes

Material Thumbnail

¿Qué es un componente? Analicemos nuestros diseños

03:59 min

Material Thumbnail

Estructura con HTML y BEM de un menú desplegable

10:27 min

Material Thumbnail

Estilizando nuestro menú desplegable con CSS

13:12 min

Material Thumbnail

Creación de un buscador

10:18 min

Material Thumbnail

Creación de un carousel de imágenes con CSS: Estructura principal

13:03 min

Material Thumbnail

Creación de un carousel de imágenes con CSS: Detalle de cada item

11:30 min

Maquetación y diseño responsivo

Material Thumbnail

Nuestro nuevo sistema de layout: CSS Grid

07:17 min

Material Thumbnail

Maquetación de la pantalla de login: Estructura HTML

10:46 min

Material Thumbnail

Maquetación de la pantalla de login: Estilización con CSS

11:46 min

Material Thumbnail

Estilización de inputs y footer en la pantalla de login

13:07 min

Material Thumbnail

Maquetación de la pantalla principal

06:11 min

Reto 3: Maquetación de la pantalla de Not Found

00:27 min

Preprocesadores

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

01:31 min

Material Thumbnail

Instalación de SASS y configuración inicial

04:44 min

Material Thumbnail

Hablemos de variables, herencia, anidamiento, operadores y más

07:18 min

Accesibilidad

Material Thumbnail

La accesibilidad y nuestra responsabilidad como desarrolladores

03:21 min

Material Thumbnail

Mejorando la accesibilidad de nuestra página de inicio

04:06 min

Conclusión

Material Thumbnail

Conclusión del curso y paso siguiente

01:27 min

Bonus

Material Thumbnail

Visualización de un botón usando storybook para HTML

04:00 min

nuevosmás votadossin responder
Jader Andrés Peláez Gaviria
Jader Andrés Peláez Gaviria
Estudiante
caja1.PNG

Por qué caja 1 es más grande si tiene menos px?

1
Arianna Corona
Arianna Corona
Estudiante

¿Qué uso tienen los puntos? A qué se refieren esos puntos?
Sí yo hago una pregunta, me bajan puntos?

1
Arianna Corona
Arianna Corona
Estudiante

¿Por qué Platzi me quitó los puntos? Ahora me sale negativo… alguien me puede decir, a qué se debe eso?

1
Miguel Gutiérrez
Miguel Gutiérrez
Estudiante

Puedo instalas sass y stylus al mismo tiempo en pc o crearia algun conflicto?

1
Arianna Corona
Arianna Corona
Estudiante

Hola buenas tardes, ya hice el reto. Pero, ¿ no hay un profesor, que mire y corrija lo que uno haga?

1
Antony Jesus  Romero Garcia
Antony Jesus Romero Garcia
Estudiante

Tengo un problema con mi logo de platzi, no me carga la imagen en mi pagina y ya revise y compare mi código y todo bien. ¿Alguien me podría resolver esa duda? por faaa

2
Luis Ernesto Guevara Rodriguez
Luis Ernesto Guevara Rodriguez
Estudiante

como puedo aplicar los MediaQuery pero a la pagina principal osea al index.html para que sea responsive también ya que esa al verla desde un mobile se me desordena un poco

1
Evelyn Vargas Uribe
Evelyn Vargas Uribe
Estudiante

¿Alguien sabe como poner imágenes en los fondos?muchos hacen eso en los aportes, pero no se cómo. Agradecería si alguien me puede enseñar, gracias.

1
Carlos Andres Correa Llanos
Carlos Andres Correa Llanos
Estudiante

Donde puedo encontrar todo el codigo fuente del curson de fronted? muchas gracias.

1
Andrés Felipe Mosquera Hernández
Andrés Felipe Mosquera Hernández
Estudiante

Listo !
imagen carousel.png
¿Cuál Agregarían?

5