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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Conclusi贸n del curso y paso siguiente

41/43
Recursos

隆Felicidades por haber llegado hasta aqu铆!

Te invito a seguir practicando HTML y CSS. No te quedes 煤nicamente con lo visto en este curso, no basta con aprenderse las etiquetas y la documentaci贸n. La pr谩ctica constante te llevar谩 a un mejor aprendizaje de estas tecnolog铆as y te convertir谩 en un mejor profesional.

Aportes 235

Preguntas 4

Ordenar por:

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

Tomando los conocimientos de este curso logre desarrollar la apariencia de mi propio reproductor web con un scroll en y en la parte derecha:3 excelente curso

Comparto mi ejercicio Clonando Netflix鈥
Clone Netflix

Muy buen curso, me ayudo bastante ya que no tenia muy claro algunos conceptos al dar estilos a una p谩gina. Por mi parte hice esta pagina, en la cual intento replicar la pagina web de PlayStation.

Me tomo algo de tiempo, pero logre hacer el home de facebook.
Repositorio: https://github.com/Sebastian-Cifuentes/clon-face

Excelente. de verdad que 9/10 puntos. Lo 煤nico fue que a veces se sent铆a algo de desorganizaci贸n o que saltaban muchos pasos, especialmente con la estructura y organizaci贸n de las carpetas del proyecto. De todas formas, excelente.

Durante este curso la maestra nos dejo muchas referencias les dejo un repo con el consolidado de estas.
Referencias

este curso no me dejo dormir pero

Muchas Gracias, se帽orita @teffcode Aguilar. Aprend铆 mucho, pero tambi茅n, me di cuenta que me falta estudiar m谩s la 鈥渢erminal鈥, 鈥淪ASS鈥, y otros. Adem谩s, considero que el curso no tuvo 鈥渇allas鈥; creo firmemente en la parte de ser 鈥渁utodidacta鈥 (no todo tiene que ser explicado paso a paso). La parte de retarte a ti mismo, y poder encontrar soluciones a lo que falte. Muchas gracias tambi茅n, a la comunidad por el apoyo (personas con mucho talento).

Hola.

Este es el resumen a mi manera del curso: https://docs.google.com/document/d/1epZ2PgDYImsu7RdKtJxRZXvM2iOXSTFWmexPi8EPq74/edit?usp=sharing

Y ac谩 colocar茅 lo aprendido en las clases: https://github.com/Zorayda/learningCss

Gracias!

Tres estrellas

Hay gente que se comporta como si fueran bots; no les sale ninguna pr谩ctica pero a煤n as铆 llegan al final del curso comentando, saludos Wilson Delgado

Temas MUY interesantes pero no hay suficiente explicaci贸n, como en el caso de FlexBox y CSSGrid, tuve que aprenderlos por mi cuenta, y otros tuve que reforzarlos para terminarlos de comprender

Se salta pasos y en ocasiones llega con c贸digo ya hecho a dar la explicaci贸n

Saludos, anexo mi resultado del proyecto:
https://teremir.github.io/vzlafood/login.html

Login

Principal

Excelente curso, lo recomiendo.

Muy buen curso y muy bien explicado
Los invito a ver mi pagina terminada! Todas las fotos fueron tomadas por m铆. Tiene un login artificial hecho con hrefs. Lo proximo ser铆a hacer un login de verdad en JS, pero estoy muy satisfecho. Falta tambien hacer responsive todas las secciones.
https://irungaray.github.io/RayHub/

y aca esta el codigo:
https://github.com/Irungaray/RayHub

Hola gente, tengo un problema que le he dado mil vueltas y no he podido resolver.

Quiero que mi carrusel se ajuste al tama帽o de la p谩gina, para el usuario solo tenga que usar la scrollbar del carrusel, pero por alguna razon, se me genera este espacio a la derecha que hace que se genere un scrollbar horizontal en la parte de abajo de la p谩gina, y no se c贸mo quitarlo.

Les agradecer铆a mucho si me pudieran ayudar.

Aprender PUG tambi茅n viene bastante bien. Es un preprocesador de HTML

Buen curso, le respond铆 todos los 鈥淗ola鈥 a la profesora

Alguna vez ya hab铆a aprendido algunas cosas de html y css. Sin embargo, con el curso aprend铆 maneras de hacer escalable mi c贸digo y funciones muy interesantes que me facilitan la vida (Flex-Box)

Holas, les comparto mis notas: HTML y CSS.

Aqui el repo donde desarrolle las actividades.

El curso estuvo excelente, pues a pesar de que en algunas ocasiones qued茅 un poco perdido, no fue sino tomar la iniciativa de complementar lo aprendido con mi propia experiencia al buscar solucionar los peque帽os conflictos que ten铆a.
Da una gran base para continuar descubriendo y practicando, siendo esto 煤ltimo la clave para lograr el 茅xito a nivel de conocimiento.

Me encanta que dejen retos y temas poco explicados.
Nos ponen a pensar y a resolver eventualidades que si o si van a suceder a lo largo de nuestra carrera como programadores.

Excelente curso, reforc茅 muchos conocimientos y tambien aprend铆 a hacer mejor las cosas.

鈥淟a practica hace al maestro鈥 馃槂

De mis cursos favoritos 鉂わ笍
ame 鉂わ笍 este curso , y aprend铆 muchas cosas nuevas

La verdad tuve que investigar varias cosas llegue sin saber css pero aqui les dejo mi proyecto en github, le faltan muchos retoques que ire haciendo conforme avance en los cursos

pagina

Muchas gracias de verdad profesora Estefany 鉂わ笍
Fue un curso lleno de aprendizaje.
Recuerdo c贸mo batalle en el carousel鈥 pero no me di por vencido.
Estudie un par de cursos y volv铆 m谩s preparado.
Le deseo el mejor de los 茅xitos en lo que haga y vamos a por ese examen 馃槃

Aqu铆 mi proyecto (encantado de recibir su feedback).
https://mauricio2802.github.io/anime-world/

Muy buen curso, realmente aprend铆 elementos muy valiosos para seguir apostando a mi futuro como Frontend Developer. Gracias Estefany, tienes una explicaci贸n clara y asertiva. 鉁

He empezado desde cero todo esto y ha sido un reto comprender la l贸gica detr谩s de esto

La realidad es que css m谩s de l贸gica es intuitivo requiere mucha practica y los preprocesadores son fundamentales para codear a gusto

En html si requiere estudiar cada etiqueta y analizar que es m谩s conveniente en cada caso

Sin dudas el frontend es un campo inmenso pero vale la pena estudiarlo como alguien que siempre se ha considerado backend ha sido maravilloso aprender todo esto

Excelente curso, aprend铆 mucho, ahora tengo las bases para seguir mi camino de desarrollo web, Html y Css, fueron buenos, pero tengo m谩s ansias de conocer los preprocesadores y JavaScript. Estefany muchas gracias.

Un muy buen curso. Obviamente tuvo sus complicaciones, pero es parte del aprendizaje y del ser autodidacta. Agradezco a Estefany por el curso. A ustedes por sus incre铆bles aportes y sus ganas de ayudar. Les deseo mucha suerte en su carrera como desarrolladores. Somos una comunidad muy unida y eso me motiva a seguir aprendiendo.

Nunca paren de aprender 馃挌

Este ha sido el curso muy bueno, est谩 muy bien explicado y resuelve dudas muy f谩cilmente. De verdad 100% recomendado. 馃槏馃槏馃槏馃槏馃槏馃槏馃槏

Me gust贸 mucho el curso y recuerda:

La practica hace al maestro

A practicar !

Muchas gracias por compartir todos esos conocimientos, aprend铆 mucho pero estoy seguro que esto solo es la punta del iceberg, a seguir practicando.!

Excelente curso, me gusto mucho, aprendi demasiado, y voy con todas las ganas de seguir aprendiendo.

Este curso esta bueno para las personas que ya tienen conocimientos previos. Para los que sienten que no se explicaron bien algunas partes, Platzi tiene cursos muchisimos mas detallados para ello

Buen curso, recomendado si alguien se ha perdido en alg煤n punto ver primero los cursos m谩s b谩sicos de fundamentos ya que el siguiente curso de este learning path ser谩 m谩s complejo.

Este curso estuvo bien chevere, muy explicado todo, y no quer铆a que terminara, pero que chevere que aprend铆 cosas nuevas.

muchas gracias.

隆Muchas gracias! La verdad tendr茅 que seguir viendo varios v铆deos de tu curso para reforzar y recordar temas 馃槈

Muy buenas clases del cursos estuvo muy interesante aunque falto aclarar algunos detalles para aquellos que tienen conceptos b谩sicos.

Me encant贸 el curso. Aprend铆 demasiado y reforc茅 algunas cosas que a煤n no ten铆a muy claras. 隆Muchas gracias! Por cierto, 隆qu茅 bonito acento tiene Estefany Aguilar!

Muchas gracias he aprendido muchas cositas 馃槂 y aqui esta mi repositorio de github: https://github.com/lskywolfll/Platzi-Video

Me gust贸 mucho el curso, creo que eres muy buena profesora. Espero que hagas muchos m谩s cursos.

Comparto el link de mi proyecto:
https://github.com/BossAlvarado03/PlatziVideo

!Muchas gracias! curso Frontend Developer lo m谩ximo a seguir practicando. Estefany Aguilar muchas gracias.

Excelente curso! Empezar a crear un proyecto desde cero me motiva much铆simo.
Muchas gracias Estefany Aguilar por tan buenos consejos!

Igualmente, tambi茅n quiero felicitarlos, este curso personalmente me encanto, mucho mejor que Netflix.

Me gust贸 mucho el curso, gracias por haberme ense帽ado tantas cosas, ahora queda seguir aprendiendo en los pr贸ximos cursos!

Me gust贸 mucho este curso! desde el proyecto hasta la metodolog铆a 馃挌

Muy buen curso, hay cursos de HTML y CSS, de Responsive Design, CSS-grid y todo eso.

Pero en este curso me encanto que se trat贸 todo, adem谩s de la accesibilidad, Flexbox, etc.

Me encanto este curso, con toda a por JavaScript

Excelente Curso. Me encant贸 cada detalle es un curso que te lleva de lo b谩sico a lo profesional legalmente Excelente Profesora 鉂わ笍

Muy buen curso. Felicitaciones a la profe por la facilidad en que explica todo.

Estupendo curso instructora Estefany, me gust贸 mucho la explicaci贸n de los componentes sobre todo el carrusel, como podemos integrarlos y el uso de SASS para poder lograr m谩s con menos c贸digo.

Muy buen curso la verdad, desafortunadamente creo que el css no es lo mio xd, pero al menos logre entender varios conceptos que me costaron, gracias

El curso esta bien, pero considero que en la ruta donde esta ubicado debe estar antes, en cuanto a sem谩ntica y accesibilidad web hace mucho menci贸n de ello, pero lo aplica m铆nimamente, en ese sentido podr铆a haber una mejora, ojo, hablo del contenido, la profa muy bien explicado.

Hola a todos.
Este curso me pareci贸 excelente. Como comentario a todas las cr铆ticas negativas, por eso hay una ruta de aprendizaje. Sugiero tomar otros cursos m谩s b谩sicos antes de tomar este curso y que adopten la idea de ser autodidacta. No siempre tendremos las cosas explicadas con manzanas. A veces hay que investigar m谩s fondo.

Profesora Estefany Aguilar la felicito por su gran labor. Hace un excelente trabajo. Aprend铆 mucho en su curso y le agradezco por eso. Con usted se combina a la perfecci贸n belleza e inteligencia. 馃槝鈾

PROYECTO TERMINADO

Dejo por aqu铆 el repositorio:

https://github.com/EdgardoAVS/platzi-video

Lo que hice con este proyecto fue practicar un poco Pug y Saas dos preprocesadores, uno para HTML y el otro para CSS.

Muy buen curso, me gust贸 practicar con HTML y CSS para empezar con Platzi video 馃槂

Mi proyecto finalizado 馃懆鈥嶐煔

Con los conocimientos de este curso desarrolle mi primer repositorio de arte lo mejor de todo, lo inicie en versi贸n movil

https://polipop-art.github.io/Art_folder/

Excelente curso, comparto mi resultado del proyecto (mejorando aspectos a煤n)

OMG! que bien se siente el avance del curso, se que falta mucho pero llena de satisfacci贸n lo que hemos aprendido.

Super interesante curso, mil gracias, son buenas bases y depende de cada uno continuar con el proceso鈥 nunca pares de aprender 鈥 gracias @EstefanyAguilar

Bueno a practicar como loco

gracias profe

te voy a extra帽ar 馃槬 jajaja muy buen curso 鉂

Ahora a dominar JS!!

Muy provechoso el curso, me ha gustado.

muy buen curso, aprend铆 buenas practicas, quede fasinado

Un gran curso !!!

Gracias @teffcode

le faltan detalles pero bueno se hace lo que se puede.

No me queda m谩s que agradecer por haber llegado hasta aqui completando este genial curso me ayudara a contruir mi portafolio web y tambien a realizar mis propios proyectos consiguiendo mis propios proyectos como Desarrollador Web

Gracias se aprendieron varias cositas.

Maquetaci贸n Lista
Codigo GITHub

Muy buen curso!!! Reforc茅 y adquir铆 nuevos conocimientos. Es importante tener claras las estiquetas y la forma de utilizar css. De esta forma podemos empezar ya a darle acci贸n a la p谩gina.

Hola Estefany, 驴d贸nde est谩 el examen que dices que preparaste para obtener el diploma del curso?

una consulta , en que nos ayudaria aprender foundation y bootstrap ?

Genial, estuvo interesante el curso.

Que linda la quiero de maestra de nuevo 鉂わ笍

隆Muchas gracias! 馃槃

Que buen curso, gracias.

Muy buen curso, bastante completo. La profesora genial.

De los mejores cursos que pude lograr completar, me gusto mucho!!

Excelente el Cuso, Gracias!

Muchas gracias, excelente curso, ahora a seguir practicando

馃槀

Genial el curso, ahora solo queda practicar, buscar un dise帽o e intentar hacerlo y leer mas documentacion para nunca parar de aprender 馃槃

Sin duda fuiste una excelente profesora.
Me encanto aprender con tigo.

Me gust贸 mucho este curso. Lo recomiendo a todo aquel que se interese por el desarrollo web

Excelent铆simo curso

Buen curso

Excelente curso muy bueno

Gracias馃挌

Muchas gracias miss, incre铆ble

Me encanto el curso 馃槂.

D贸nde podr铆a encontrar el enlace del repositorio?

Muy Bueno el curso, vali贸 cada minuto y pr谩ctica !!!

muchas gracias