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鈥檛 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 鈥淟ive 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鈥檚 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!!!