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 “terminal”, “SASS”, y otros. Además, considero que el curso no tuvo “fallas”; creo firmemente en la parte de ser “autodidacta” (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 “Hola” 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.

“La 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