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

Maquetación de la pantalla principal

34/43
Recursos

Animate a completar el desafío de la clase: añadir las secciones de tendencias y originales de PlatziVideo en la pantalla principal.
Recuerda además que este curso hace parte de la Escuela de JavaScript de Platzi. El diseño de Frontend que nuestra profesora ha creado para el curso será el insumo principal para el resto de cursos. Parte del proceso de aprendizaje es que en los Curso del profesor Óscar Barajas, en especial en el Curso de React Router y Redux se realizarán validaciones del código CSS para optimizarlo y mejorarlo.

Aportes 458

Preguntas 63

Ordenar por:

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

El curso ha estado genial, pero un poco desorganizado. Para alguien que está empezando de cero, quizás se le hizo muy difícil tener que reorganizar todo desde cero, ya que nunca dieron esta estructura de carpetas ni la explicaron. Afortunadamente me tomé mi tiempo de hacerlo antes de llegar aquí, pero si hubiera hecho este curso unos meses atrás me habría vuelto un ocho. Ojo, de verdad la críticas es de la forma más honesta y constructiva posible. Vean todos los videos hasta aquí para que vean que pareciera que la secuencia se pierde.

Para darle estilo al scroll

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
::-webkit-scrollbar {
  width: 8px; 
  height: 8px;   
  background:rgba(255,255,255,.4);
  border-radius: 4px;
}
::-webkit-scrollbar:hover {
  background: #b3b3b3;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar:hover:active {
  background: #999;
}

No entiendo si el curso es para iniciados en la programación web o para personas que quieren empezar a adivinar el futuro.
El orden de la estructura de las carpetas es un caos, de la nada comienza vídeos diciendo “Ya hice esto”, en otras ocasiones aparecen cosas que jamás se hicieron en ningún vídeo.

Aun me falta hacerla responsive, y ando buscando informacion para lograr que el slide se recorra

No me gusta la organizacion de este curso. La profesora es muy buena explicando pero no le dieron una buena organizacion

Me hubiera gustado que en las anteriores clases fueramos creando la estructura de carpetas que aquí plantean. Ya que me perdí y tuve que descargar los archivos ya resueltos de esta clase.

Que curso mas desordenado uffff!!!

Descripción gráfica de esta clase:

Con esto puedes editar tu scrollbar

/* ---------------------scrollbar---------------------*/
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track{
  background: rgba(190, 189, 189, 0.219);
}
::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 0.281);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.699);
}```
o dentro del componente que quieras puedes esconderlo


body{
overflow-x: hidden;
}

Hola, comparto el codigo de personalizacion de mi scroll bar

.carousel::-webkit-scrollbar {
    width: 1em;
}

.carousel::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.carousel::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

Listo :3

Es confuso. Quizás deberían agregar clases(tipo blog) para explicar todos los cambios que se hicieron con los archivos en los directorios. Por ejemplo, las clases pasadas habíamos quedado con el directorio nuevo de login, que contiene el css y el html. Ahora nos presentan un directorio con todos los html que se hicieron conforme iban avanzando los capitulos del curso en una sola carpeta. ¿Donde están las imagenes y el css? ¿Header y Footer son html que deberíamos haber hecho en una clase? Es un poco de sentido común, pero confunde en un proceso de aprendizaje

Si quieren hacer que el scroll no se vea. Agreguen dentro de carrousel:

.carousel {
scrollbar-width: none;
}


Reto cumplido:)

Yeeeii!! Lo logré!

Esta es mi pantalla principal

Con de esta manera pueden estilizar sus scroll bars!

.carousel {
	width: 100%; height: 500px;
    overflow: scroll;
    padding: 30px;
	position: relative;
	
  }
 .carousel::-webkit-scrollbar {
	background-color: whitesmoke;
	border-radius: 50px;
	height: 10px;
	width: 0px;
}

.carousel::-webkit-scrollbar-thumb {
	background-color: #ffe604;
	border-radius: 10px;
	height: 10px;
}

.carousel::-moz-scrollbar {
	background-color: whitesmoke;
	border-radius: 50px;
	height: 10px;
	width: 0px;
}

.carousel::-moz-scrollbar-thumb {
	background-color: #ffe604;
	border-radius: 10px;
	height: 10px;
}

.carousel::-o-scrollbar {
	background-color: whitesmoke;
	border-radius: 50px;
	height: 10px;
	width: 0px;
}

.carousel::-o-scrollbar-thumb {
	background-color: #ffe604;
	border-radius: 10px;
	height: 10px;
}

Debo decir que esto fue un dolor de cabeza ya que nunca se explicó como crear los archivos y ponerlos en carpetas. Lo veo como un logro hacerlo, pero debió ser mejor explicado al inicio

Listo!! 😃

Hola dejo esta página para los que quieran personalizar su barra de sroll.
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Estuvo algo complicado armar todos los componentes en la página de maquetación principal. Pero de todas formas se logró.

Creo que ha debido desde el comienzo haberse puesto bien cómo iba a quedar el proyecto, para que después no hubiéramos tenido que hacer tantas vueltas. Pero igual se logró.

También encontré varios problemas con el css que no se habían dicho en el curso, o tal vez no le puse mucha atención. Pero bueno…así se aprende

![](

Ok…de por si voy atrasado y me encuentro con esto…se perdió la secuencia de la clase, que archivo de css ocupo?? El ultimo que quedo no corresponde y parece que juntaron todo en uno. Muy mal de verdad

Al principio tuve un problema con el scroll horizontal de toda la página ya que tenia un espacio que salia del viewport y aparecía el scroll horizontal de toda la página,
Era por las clases carousel y el categories__title, ya que tenían un width del 100% y aparte un padding de 30px
Solo hay que poner un box-sizing: border-box para ajustar el modelo de caja:

.categories__title {
    color: white;
    font-size: 16px;
    position: absolute;
    padding-left: 30px;
    width: 100%;
    box-sizing: border-box;
}
...
.carousel {
    overflow-x: scroll;
    padding-left: 30px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

Y listo, aquí el resultado:

me salen unas lineas blancas despues de cada item ,no encuentro el error

Para ir creando el portafolio 😎

profe a ratos confundes muchos a los estudiantes ademas, en los archivos y enlaces vi que colocaste mas cosas en css no las explicaste

La verdad este video en especifico no me gusto, por que en los otrso bueno era un poco desorganizado pero entendia repitiendo dos veces pero en este me perdi, cambia todo y literal es como si todo lo que hicimos en anteriores no eran se contradicen, ademas yo si soy cero diseño y esperaba entender mas a profundidad y me perdi, literal me deprimi que otros chicos aportaban sus diseños innovadores y ps yo tuve que descargar el proyecto resuelto para seguir la cuerda pero me perdi mas.

Recomiendo que reevaluen he indiquen si esto es para empezar de cero o no por que siendo yo una estudiandante cero diseño no lo recomendaria.

Nota:
El resto de videos de a pocos entiendo pero este si me dejo mal.

Mil gracias.

El curso no está desorganizado…lo que hizo la profe fue enseñar las partes principales dando por sentado que sabemos ya de html y css…cosa que debería ser así ya que si seguimos la ruta de aprendizaje…tuvimos que ver cursos de css y html del profe degranda…este curso es para reforzar y dar el salto a algo mas avanzado.

Resultado:

No me convence mucho mi color de fondo, quizá pruebo otro.

falto un poco de estructura a la hora de organización de archivos pro parte del tutor, así mismo ir a la par, pero igual tener en cuenta que también puede ser un reto para nosotros para implementar y organizar nuestro trabajo

Para los que deseen quitar el scroll Horizontal coloquen en el body esto:
overflow-x: hidden; /quitar scroll/

Mi resultado:

Iba bien hasta que me entere que el codigo estaba desorganizado y habia que separarlo en componentes, me termino saliendo feo por esto mismo.

Curso: 10
Organizacion del curso: -10

Voy a dejar el curso hasta acá, muy desorganizado a verdad

Estamos listos!!

Para ocultar el scroll del carousel que parace en la parte de abajo. solo cambian esta propiedad a hiden:

.carousel-item {
overflow: hidden;
}

Si queremos dar estilos al scroll que aparece

Listo! no cambie en tendencias las imagenes. Aunque no me gusto que mostrará el scroll vertical, como podría quitar eso?

Me perdi con la organización de las carpetas y archivos, no me quedo cuadrado todo bien, al final tome los archivos adjuntos.

Mi humilde aporte x3 xd

pd: tardé más en saber como poner un radial-gradient de fondo, que en hacer todo el resto de la página :v

Así me quedó 😃

Así va quedando mi proyecto, he leído varios comentarios no tan positivos en cuanto al orden del curso y al contenido, personalmente siento que si hubiera iniciado por la escuela de javascript donde este curso es el segundo hubiera sido muy complicado, antes de este curso tome el básico de programación, el definitivo y practico de html y css y además el de mobile first con estos logre seguir este curso y buscando en internet y leyendo los comentarios de la comunidad he podido avanzar, gracias a todos por sus valiosos aportes.

Es hora de hacer cosas increibles!

no pues siento que si le falta orden me quedo un frankenstein de pagina 😦

Git está revolcándose en su tumba… bueno, en su cama…

Echo!

Reto:

hecho estafany 😉

Reto 🙌


On Mobile:

Hola, soy el admin de la cuenta de instagram de simpsonizadoslatinos, este curso me está motivando a desarrollar algo como esto. Para practicar y hacer algunas cosas, si alguien quiere ayudar, bienvenido 😃

RETO ACEPTADO!
No logro entender porque sale la barra de scroll en mi pantalla.

¡Reto aceptado!

así va la mia 😉

¿Como ocultar el scrollbar?

Es cierto que con overflow: hidden; se puede resolver, pero creo que no es el método correcto, ya que de este modo estás inhabilitando el scroll dentro de ese <div> pero eso es depende de cada caso, da igual ya que no es necesario hacer scroll, pero… ¿que ocurriría si añades más contenido y necesitas hacer scroll y al mismo tiempo ocultar la barra de desplazamiento?

Con el siguiente estilo CSS lo resuelves:

::-webkit-scrollbar {
display: none;
}
Esto ocultará todas las barras de desplazamiento, pero luego si quieres puedes aplicar ese estilo a tan solo un elemento con una id o una clase.

Espero que les sirva ya que veo a muchos teniendo este pequeño problema…

Challenge.
link

Siendo honestos este curso tiene muy buen contenido y representa un buen reto para alguien que nunca habia hecho una maquetación web ni mucho menos estructurar carpetas eso de las carpetas seria bueno que en una clase teorica lo hubieran puesto y se resuelve muchos problemas pero por lo demás hasta el momento logre llevar organizado todo

Concuerdo con muchas personas llegado a esta clase. No tengo conocimientos previos y venia teniendo alguna dificultad, pero lo lleve bien hasta este ppunto, donde hizo un salto que me llevo tiempo organizar y comprender, creo que el problema aveces es que si una va a la escuela de desarrollo, ya platzi te acosnseja de seguir un recorrido que es este, y lamentablemente quizas como algunos dicen aqui, hay que estudiar otros cursos antes, yo recomendaria a platzi de realmente organizar mejor los recorridos de las escuelas, sino hay que “poner pausa un mes hasta aqui e ir a hacer otro curso para despues volver” , se hace medio complicado.

Para las personas que tengan el problema de que les aparece el scrollbar horizontal revisen que tenga esto correctamente.
.carousel {
overflow: hidden;
padding-left: 30px;
width: 100%;
position: relative;
}
.carousel-item {
border-radius: 20px;
overflow: hidden;
position: relative;
display: inline-block;
width: 200px;
height: 250px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
Fue lo que me funciono, deben de asegurarse de que los dos overflow estén en hidden.

la papu página Bv

JS Challenge 💛

Estuvo sufrido pero valió la pena

Tuve varios problemas con el carousel, tenía diferencias con respecto a lo visto en clase, tuve que revisar los archivos de la clase junto con mi proyecto para corregir las inconsistencias.

Asi va mi index!!!

hasta aqui llegue, aparecieron cosas que nunca vi a lo largo de los videos y eso desorganizo todo lo que tenia 😦

I wanted to have fun, so i personalized the website with my own style
BTW: throughout all the course i’ve been using Pug and Style

Me costo 3 días porque en algunas partes me faltaba código 😃

el curso va perfecto solo que si tenia algo de desorden omitió algunas cosas por eso me perdí un poco

Gracias al mal presentimiento que me brindó la profesora decidí abrir mi repositorio Git e ir haciendo merges de las otras ramas donde trabaja cada parte del proyecto.

Me imaginé que llegaría el momento en el que iba a mezclar todo de la manera más espantosa.

Gracias Freddy por haberme enseñado a utilizar Git y GitHub.

Descargue los archivos para comparar y veo que hay muchas cosas que no las hicimos como tal en el curso y hubiera sido bueno verlas y entenderlas mejor

Esta mal que lo ordenen hasta el final, con la secuencia hay que cambiar las rutas de todas las imagenes. A alguien que inicie desde cero lo van a complicar bastante.

Ya me perdí:’(

el diseño tiene un error muy grande, la ultima imagen del scroll no renderiza bien, por lo menos con js lo hubiera arreglado rapido, la estructura del curso es una locura, en youtube hay un tutorial de hacer una copia de netflix de 1 hora donde explican mejor elementos como los utilizados aca

Personalmente me gusto la idea de ir enseñando los temas mas importantes que un desarrollador web debe conocer cuando recién comienza. Pero este curso esta muy mal explicado, va a una velocidad muy rápida y encima no realiza buenas practicas. Además te deja para que realices cosas que en tu vida viste, si este es el primer video de HTML y CSS que ves en Platzi, si o si, recomiendo el curso “Definitivo de HTML y CSS”, sino van a estar muy perdidos con este.

Si, al igual que los demás compañeros, pienso que está muy mal organizado el curso, una lástima, pudo ser mejor, pero este tipo de cosas y que uno queda perdido de por donde va y que toca hacer no está bien.

gg

Hola todos, para los que les sale un scrollbar, que son las barras blancas que salen debajo el carrusel, se pueden quitar con :

overflow: hidden;

Con ese comando👆 se puede resolver, pero creo que no es el método correcto, ya que de este modo estás inhabilitando el scroll dentro de ese <div> , para casos que no sea realmente necesario no hay problema , pero… ¿Qué ocurriría si añades más contenido y necesitas hacer scroll y al mismo tiempo ocultar la barra de desplazamiento?, como es nuestro caso que se puede seguir colocando contenido. Con el siguiente estilo CSS lo resuelves:

::-webkit-scrollbar  {
     display: none; 
} 

Esto ocultará todas las barras de desplazamiento, pero luego si quieres, puedes aplicar ese estilo a tan solo un elemento con una id o una clase.
**Espero que te sirva de ayuda👍**😎

como puedo sacar las barritas de scroll que la pude ocultar pero queda el espacio en blanco con las flechitas

Para los amantes de HALO…
¡Saludos! y para todos ¡Éxitos!