Maquetación de la pantalla principal

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;
}

Pagina: https://jhonromero26.github.io/PlatziVideo/

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;
}

Les invito a ver mis resultados. Pásense, saludos!

https://codepen.io/angelcabrera/full/YzKRrwb
https://codepen.io/angelcabrera/full/VwZqxmM

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!