Curso de Frontend Developer

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
Martha Liliana Dominguez Gonzalez
Martha Liliana Dominguez Gonzalez
Estudiante

Yo llamé mi clase “carousel__items” y no agarró el código de ninguna forma aunque he sido cuidadosa de escribirlo bien en todo lado. Quería saber si hay alguna explicación de por qué en plural no lo agarra? Gracias!

0
Fernando Avila Ruiz
Fernando Avila Ruiz
Estudiante

Este es el resultado final del registro, no logro hacer que la etiqueta <p> este en el centro aunque le ponga el display: flex y el align-content: center, alguien sabe porque?

Registrate y 7 páginas más - Personal_ Microsoft​ Edge 11_05_2021 05_27_42 p. m..png
1
Fernando Avila Ruiz
Fernando Avila Ruiz
Estudiante

siempre sera mejor maquetar todo en html antes de los estilos o depende del proyecto?

0
Martha Liliana Dominguez Gonzalez
Martha Liliana Dominguez Gonzalez
Estudiante

Con CSS GRID sería mucho más fácil la ubicación de todo cierto?

2
Nicolás Leal
Nicolás Leal
Estudiante

Ósea que si paso la evaluación ya soy front-end developer👨‍💻? que me falta para llegar a serlo🤔…

0
Nicolás Leal
Nicolás Leal
Estudiante

Ósea que si paso la evaluación ya soy front-end developer👨‍💻?

3
Nicolás Leal
Nicolás Leal
Estudiante

Ósea que si paso la evaluación ya soy front-end developer👨‍💻? que me falta para llegar a serlo🤔…

0
Gustavo Exequiel Gualtieri
Gustavo Exequiel Gualtieri
Estudiante

Siempre he visto la etiqueta <style>dentro de<head>, pero en este caso estoy viendo a la profesora añadiéndola fuera.
¿Existe algún tipo de relevancia dónde se coloquen los estilos?¿O simplemente es una buena práctica?
Gracias

2
Cristian David Suárez
Cristian David Suárez
Estudiante

Hola me pueden ayudar por favor, creo que mis ultimas líneas de código no se están aplicando, de hecho veo que opacity y to top se queda en color blanco y no se porque…

style.css - cursoplatzivideo - Visual Studio Code 8_05_2021 10_53_44 p. m. (2).png
0
Dani-Ideas
Dani-Ideas
Estudiante

¿esta clase explica lo que es el Critical Rendering Path o me estoy confundiendo?

0