Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

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

4

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

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

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

7

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

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

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

11

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

Conceptos iniciales de CSS

12

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

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

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

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

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

Construcción de componentes

22

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

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

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

27

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

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

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

32

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

33

Media queries

34

Maquetación de la pantalla principal

35

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

Preprocesadores

36

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

37

Instalación de SASS y configuración inicial

38

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

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

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

43

Flexbox

Presentación y bienvenida al curso de Frontend Developer

1/43
Recursos
Transcripción

Aportes 369

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Para las persona nuevas aquí están todos los componentes gráficos que utilizaremos durante el curso https://mega.nz/#F!T8s3hSYA!BkgIzaEF7NrZF_Qz0aBMzQ
Recuerden darle corazón para que no se pierda la publicación y las nuevas persona lo puedan encontrar entre los más votados

Una mujer!!! que excelente!

Que hermosa profe ❤️ y el proyecto tambien se ve muy bien, ya me gustó el curso jajajjaa

Me alegra mucho tener a una profe Mujer que orgullo 😃

Que emoción empezar y mi admiracion a la maestra necesitamos mas mujeres programadoras… saludos

El CSS no es mi fuerte, estoy emocionado a aprender mucho

Preparado para iniciar con el JS Challenge y emocionado por aprender más sobre todos estos temas y dominarlos :3
A echarle tiempo!

Like si vienen por el JS Challenge!! 💚💛

Excelente !!! Me encanta el tema de FrontEnd ❤️ y la profe esta re linda ❤️ ❤️ ❤️

Ready to start Monday the JS Challenge, can’t wait any more.

Este es el repositorio del curso https://github.com/platzi/curso-frontend-escuelajs
Solo tienen que cambiar de rama para ver los archivos de cada clase, si no saben que es eso hagan el curso de git y github de inmediati.

Se ve muy genial el proyecto que vamos a realizar

Antes de ver este curso les recomiendo que tomen el curso de Animaciones para la web o sino será un poco difícil de comprender algunas partes del curso.

Muy entusiasmado por este curso 😃
Aunque ya hice algo de trampa porque llevo algo avanzada la carrera de Front End Cx

Mi segundo curso para el JS Challenge, estoy preparada para iniciar.

Recomiendo empezar con el Curso Definitivo de HTML y CSS, ya que ayuda bastante con ek desarrollo de los temas y facilita conceptos.

Iniciando para refozar todo lo aprendido!🤞

Hoy me inscribí en PLATZI , a cumplir el reto Punto y Coma.

50hrs para lograr el reto punto y coma, a darle!! 💪💪

Que interfaz mas Hermosa!! Guao!! 😮

espere bastante para sacar esta carrera A darle con Todo!.

vamos a darle con Dios por delante

Excelente, es lo que estaba buscando. Con muchas expectativas. Gracias

Soy muy malo como frontend y esta es la oportunidad perfecta para mejorar bastante.

Admiro mucho el perfil profesional de la profesora. 😲😮

Quiero ser freelancer, espero y deseo que con este curso pueda empezar una nueva carrera. Suerte a todos y enfoque al 100%!!!

Iniciando el JS Challenge, ánimo para todos compañeros

A reforzar conocimientos 💪

tengo buenas expectativas!

Este curso es lo que le hacía falta a la carrera de Arquitecto Frontend!

Genial ver una paisa como profesora en Platzi. A parte que es súper tesa! Te admiro mucho Estefany😁

Vamos con el segundo curso de la carrera de Js, ¡Tiene buena pinta!

😃 primero en comentar y super contento de tomar el segundo curso de la escuela de Javascript

Excelente inicio del curso 😃 .

El proyecto tiene un diseño limpio y elegante.

Me encanta el Twitter de @Teffcode, tiene hilos sobre Css super padres.

Continuando con el JS Challenge, segundo curso aquí vamos!!

Es emocionante iniciar un nuevo curso 😄

Hey el projecto se ve super bien!! Se ve interesante el curso

Me encanta esta profe. Explica divino

Vamos con todo!!, muy linda la maestra

Profe! ❤️

Se ve muy interesante el proyecto, espero aprender mucho…

Buenisima!!!

reto puntoycoma here we goooo

Para todos los que están comenzando, les recomiendo fuertemente que descarguen la extensión “Live server” de Visual Studio Code. Te actualiza automáticamente la página cada vez que guardas tu archivo html.

Esto les va a ahorrar MUCHÍSIMO tiempo, ya que no estarán actualizando para ver en tiempo si lo que han hecho funciona. Incluso pueden dividir el monitor en dos ventanas para tener una actualización en tiempo real sin necesidad de estar cambiando de una ventana a otra.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Iniciando el JS Challenge

#JSChallenge. No se de que va el reto, pero le entro!!

¡A DARLE!.. POR EL RETO JS CHALLENGE ❤️

Vamooos JS Challenge, animo a todos ❤

A  por el JS Challenge

Empezando #JSChallenge, dale corazón si estas entusiasmado.

Se ve genial el proyecto, ni comparacion a la primera vez que use CSS hace como 20 anios jaja nada que ver solo texto y colores o por lo menos eso fue lo que me enseniaron en ese entonces.

Listo para empezar el JS Challenge!

Tengo miedo :v

Hello world!!

Excelente!

Interesante proyecto. Vamos con todo!

Contento por comenzar este curso!

Estoy muy emocionado!!!

Vamooooss !

Perfect, super interesante.

Preparado para el segundo curso!!!

Emocionado por el curso. Se ve muy bueno el proyecto.

espere un mes para esté curso!!!

Iniciando ♥ Segundo curso EJS

Alegre y feliz de comenzar con el curso, espero poder triunfar y mejorar mis habilidades como Front-End.

Gracias Platzi por hacer grandes cursos, de lo mejor.

bueno vamos a mejor en el frontend yujuu

continuamos con la ruta

Arranquemos

carticas ❤️

Ando emocionado, vamos a terminar este antes de acabe el año (:

Emocionado al 100% por el curso, me encanta💚

#NuncaParesDeAprender!!!

Empezando el año con la escuela de javascrip! Vamos!!

Di a una pausa a la carrera de Arquitectura Frontend para tomar esta clase, espero profundizar más en HTML, CSS, preprocesadores, etc.

Listo para el reto puntoycoma

Uff el efecto de la selecion de videos 💚💚💚

A darle, se ve muy bueno el curso y la profesora es muy guapa. 😄

Ya se de html y css pero igual vale la pena profundizar!

A repasar conocimientos!

Empecemos!

a darle carajo jajaja

A darle!! Siuuu

Vamos por el Reto de ser un Agente Punto y Coma!!!

así se da ganas de estudiar

dale me encorazona si también estás haciendo el reto puntoycoma!

Alla vamos reto Puntoycoma!!

Let’s go!!!

Excelente! Comencemos esto 😄

comenzamos, suerte

😄

Se ve un curso muy prometedor , excelente !!!

Interesante curso, animo team Platzi!

Excelente ❤️

Una profe paisa!! me encanta

A dar lo mejor en esta escuela.

El proyecto se ve muy interesante…
Vamos con todo!!!