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

Creación de un carousel de imágenes con CSS: Estructura principal

26/43
Recursos

Aportes 328

Preguntas 105

Ordenar por:

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

por que siento que la clase va asi?

Mi código con algunas notas por si son ūtiles para alguien.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0px;
    }
    /*1.- Width del 100% para que abarque toda la pantalla.
      2.- Con overflow establecemos la propiedad de scroll
      3.- padding del 30% para tener un margen de vista
      4.- Pos:Relative porque queremos que los elementos que hereden se ajusten con base en este elemento*/
    
    .carousel {
        width: 100%;
        overflow: scroll;
        padding: 30px;
        position: relative;
    }
    /* 1.- WhiteSpace nowrap Enlista todos los elementos en un solo renglón.
       2.- Establecemmos un pequeño espaciado entre los elementos de la lista.
       3.- Padding de 10px para evitar que se nos corte el elemento cuando hagamos hover
       4.-
       5.-*/
    
    .carousel__container {
        white-space: nowrap;
        margin: 70px 0px;
        padding: 10px;
    }
    /*
    
    
    */
    /* 1-3 Color, altura, anchura.
       4.- Qué tan curvo queremos nuestro borde
       5.- Overflow: Hidden Para que tome los estilos
       6.- Margin 10px separación entre elementos
       7.-InLineBlock: Un item al lado del otro
       8.-Cambia el icono del mouse cuando selecciona el elemento
       9.-Suaviza la transcisión para que se vea agradable
       10.- Ajusta los elementos para que no se salgan y empiecen de izq a derecha

    */
    
    .carousel__item {
        background-color: brown;
        width: 200px;
        height: 250px;
        border-radius: 30px;
        overflow: hidden;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        transition: 450ms;
        transform-origin: center left;
    }
    /*
    
    
    */
    /*
        Carousel hover.
        1.- Desplaza los elemenots hacia la derecha
        2.- ~ Selecciona todos los elementos excepto el elemento que está seleccionado
        3.-
    */
    
    .carousel__item:hover~.carousel__item {
        transform: translate3d(100px, 0, 0);
    }
    /*
    
    */
    /*
        1.- Opacidad
    */
    
    .carousel__container:hover .carousel__item {
        opacity: .3;
    }
    /*
        1.- Escala en 1.5 la imagen seleccionada
        2.- Cuando se le haga hover a un elemento especīfico, pone la opacidad en 1.
    */
    
    .carousel__container:hover .carousel__item:hover {
        transform: scale(1.5);
        opacity: 1;
    }
</style>

<body>
    <!-- Container General -->
    <section class="carousel">
        <div class="carousel__container">
            <div class="carousel__item">
            </div>
            <div class="carousel__item">
            </div>
            <div class="carousel__item">
            </div>
            <div class="carousel__item">
            </div>
            <div class="carousel__item">
            </div>
            <div class="carousel__item">
            </div>
            <div class="carousel__item">
            </div>

        </div>
    </section>
</body>

</html>```

Me gustan mucho los cursos de platzi, pero tengan cuidado en la edicion y el orden, el anterior video no usa flexbox por que segun no lo hemos visto, cuando 3 o 4 videos atras ya nos mostraron flexbox.

Es verdad que se fue bastante rapido, pero no creo que sea culpa como tal de la profesora, si no de todo lo que se tiene que abarcar en un solo curso. Para los que no entendieron la parte final, que es la que pienso que es donde se fue rapido:
1

   .carousel__item:hover~.carousel__item {
        transform: translate3d(100px, 0, 0);
    }

Esta linea inidica que todos los elementos posteriores al item de la clase .carousel__item que se encuentra en estado hover, seran transladados 100px en el eje x

translate3d(x,y,z)

2:

    .carousel__container:hover .carousel__item {
        opacity: 0.3;
    }

Esta linea de codigo indica que al momento de que el container(donde se alojan todos los items) todos los elementos con la clase .carousel_item tendran una opacidad de 0.3 en una escala de 0 a 1 o bien el 30% de su opacidad original.

3
Por ultimo

 .carousel__container:hover .carousel__item:hover {
        transform: scale(1.5);
        opacity: 1;
}

Esta linea de codigo nos indica que unicamente el item, que se necuentre en estado hover recibira los cambios hechos dentro del selector:

¡El termino oficial de "~" es colita de chancho! 😬🐷

Si comentamos el transform: scale(1.5) y agregamos más items (unos 5 está bien), el efecto de usar la tilde ** ~ **es mucho más notorio.

Actúa sobre sus hermanos posteriores, en este caso, los items de la derecha = ).

Me parece que se debe tener en cuenta de donde es el origen de la virgulilla ~ y por qué se aplica en la explicación.

En primer lugar este virgulilla hace parte de un conjunto de selectores llamados combinadores los cuales permiten hacer una combinación de selectores más simples como (id,clase, elemento) y ser más específico en las reglas que se deben aplicar en dichos elementos.

El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
Sintaxis: A ~ B
Ejemplo: La regla p ~ span se aplicará a todos los elementos <span> que siguen un elemento <p>.

Tomado de https://developer.mozilla.org/es/docs/Web/CSS/Selectores_CSS.

Aquí les dejo otra url que ayudara a entender mejor este tipo de selectores
https://medium.com/sngular-devs/combinadores-en-css-bf117a8c91f5

Muchas de las cosas no sabemos por qué se hacen, solo las hace por que sí. No sabemos cuándo usar qué propiedad. Son ejemplos muy simplistas cuando te estás comparando al producto final ya terminado. Hasta el momento solo vamos copiando lo que ella hace. Espero suba la calidad de la explicación.

Alguien sabe hacer sin scroll como el de netflix?

Para aquellos que se les muestra la barra de scroll en la sección de mi lista, les comparto el estilo que le di para que se vea un poco mejor con el aspecto/diseño general de la página.

.carousel::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.1);
    border-radius: 5px;
}

.carousel::-webkit-scrollbar {
    background-color: rgba(255,255,255,0.1);
}

PD: Pueden jugar con los valores, según sus gustos

Les pondré esta parte de código que me tomo un tiempo entenderlo y creo que ya lo tengo más claro. Espero les sirva 🚀

	.carousel__item {
	...
        /* Esto hace que todas las propiedades del transform pasen en medio segundo y no al instante (esto para que lo aprecie el usuario y no se pierda) */
        transition: 0.5s all;
        /* Esto hace que crezca el item desde el eje centro a la izquierda y no desde el centro que es como esta por default */
        /* Lo cual hace que no se vean tan separado */
        transform-origin: center left;
	}      
      /* Cuando estas con el mouse sobre un item todos los items SOLO DESPUES DE ESE (no antes) se mueven 100px a la derecha  */
      /* Sin esto este item taparía a los otros cuando estamos sobre el y crece */
      .carousel__item:hover ~ .carousel__item {
        transform: translate3d(100px, 0, 0);
      }
      /* Cuando estas con el mouse sobre el container todos los items tienen opacidad 0.3 */
      .carousel__container:hover .carousel__item {
        opacity: 0.3;
      }
      /* Cuando estas con el mouse sobre el container todos los items a los que pasas el mouse por encima se vuelven 50% más grandes (eso es lo que hace scale: 1.5) y su opacidad vuelve a la normalidad (opacity: 1))*/
      /* Y como siempre estaremos SOLO sobre un item entonces siempre pondra solo este item con opacidad normal y lo agrandará 50% dejando al resto con opacity 0.3 que está en el código bloque de código anterior*/
      .carousel__container:hover .carousel__item:hover {
        transform: scale(1.5);
        opacity: 1;
      }

Si les ayudo denle 💚

Compañeros quiero compartirles un poco de mi experiencia en este curso y en la ruta de JavaScript. Yo no tengo conocimientos previos en el tema, pero siento que he podido seguir el ritmo averiguando las cosas que no se explican a fondo en internet o apoyándome en los aportes de otros estudiantes con mayor conocimiento. La invitación es a que si se sienten frustrados continúen porque van por buen camino. En mi opinión con estos temas hay que si o si adquirir horas prácticas, no solo es ver el video con la explicación. Realizar los pequeños retos que dejan los profesores y profundizar por cuenta propia desarrolla lógica y abstracción. Estas dos habilidades son fundamentales para trabajar en nuevos proyectos. Si logramos sobrepasar la frustración podremos llegar al nuevo conocimiento. Aprender a programar o dominar nuevos lenguajes duele, pero vale la pena porque se adquieren nuevos super poderes. En mi opinión, la profe explica muy bien el ejercicio y no explica a profundidad ciertas cosas porque no son el foco de la clase y porque se volvería eterno el video. Si sienten en un punto que están copiando solamente sin entender lo que están haciendo paren y vallan al inspector de código. Dominar esa herramienta les permitirá hacer pruebas rápidas para observar al quitar o poner las líneas como modifican nuestra interfaz. La profe lo hace a menudo. Los desarrolladores no se aprenden todo de memoria, pienso que han desarrollado ciertas habilidades que les permite estructurar una solución y para las cosas puntuales como atributos, elementos etc.… de cada lenguaje se apoyan en Stack Overflow. ¡Ánimo y vos vemos en el examen final!

Yo cambié el selector para ponerle opacidad a los elementos que no estén en hover por el siguiente:

.carousel__container:hover .carousel__item:not(:hover) {
    opacity: .3;
}

De esta manera no necesitas ponerle opacity: 1 al carousel__item:hover.

Recomiendo que probéis alternativas para comprobar que estáis entendiendo lo que se hace y no solo copiar lo que muestra, así además os obligáis a investigar otras alternativas con el mismo resultado.

En vez de colocar la propiedad display: inline-block en el contenedor carousel__item , podemos colocar la propiedad display: flex en el contenedor carousel__container y funcionan de la misma manera 😃

Para los que igual que yo no quedaron claro para que utilizan la ~ la explicación es bastante sencilla una vez que lo comprendes haciendo experimentos y leyendo:
Al usar la ~ después del .carousel__item:hover (es decir después del item sobre el cuál esta el cursor) todos los items que están después del que tiene el hover se desplazarán 100px con el transform… A mi me sirvio poner en esa misma clase lo siguiente para darme cuenta del efecto que tiene la ~

.carousel__item:hover + .carousel__item {
        transform: translate3d(100px, 0, 0);
        background-color: yellow;
    }

Al refrescar el navegador te das cuenta que solo los elementos que están después del que tiene el hover se pintan en amarillo, y tiene sentido pues la transformación de desplazamiento se da hacia la derecha y ese es el objetivo de la ~ : modificar los elementos posteriores…

Saludos.

Nota: Seria bueno explicar un poquito mas a detalle la sección donde se emplea “transform” ya que cuando la instructora emplea:

.carousel__item:hover ~ .carousel__item{
        transform: translate3d(100px, 0, 0);
    }

es el equivalente para dejar un espacio entre los ítems del lado derecho, peroooo con la finalidad de que cuando ampliamos la escala a 1.5 y centramos los ítem el espacio que queda a la vista le da el efecto de tener el mismo espacio entre ítems.

En mi caso yo baje la escala a 1.3 para una mejor comodidad y no entendía por que quedaba un espacio mas ancho del lado derecho de mis ítems.

Solución: Prueba y error =), pero ya quedo. Gracias!

.carousel__item {
        background-color: blueviolet;
        width: 200px;
        height: 250px;
        border-radius: 20px;
        overflow: hidden;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        transition: 450ms all;
        transform-origin: center left;
    }
    .carousel__item:hover ~ .carousel__item{
        transform: translate3d(60px, 0, 0);
    }
    .carousel__container:hover .carousel__item {
        opacity: 0.3;
    }
    .carousel__container:hover .carousel__item:hover {
        transform: scale(1.3);
        opacity: 1;
    }

Para un teclado con idioma Español-España Alt Gr+4
Para un teclado con idioma Español-LatinoAmericano: Alt Gr + “+”(el que esta al costado del entrer)
Usando el teclado numérico: Alt+126
Con macOS: ⌥ Option+ñ

un carousel con purito css, genial

Este es el codigo para hacer el scroll invisible y no aparezca en la pantalla:

.carousel::-webkit-scrollbar {
    width: 0 !important;
}```

Extensiones utiles de CSS para VSCODE:

  • CSS Peek
  • HTML to CSS autocompletion
  • IntelliSense for CSS class names in HTML

virgulilla ALT+126 en windows

genial! no más plugins de wordpress para hacer esto en mis templates!!

Me pasaba que me salían estas barras de scroll que daban un aspecto muy feo, logre ocultarlas con el siguiente pseudo-elemento

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

Me gustaria compartirles algo muy interesante si utilizan lo siguiente:

.carrousel__item {
cursor: url (imagen.png) , pointer;
}

pueden seleccionar una imagen que será la que aparezca cuando el cursor este sobre alguno de nuestros items.

Después de ver esta clase valoras muchísimo más todos esos plugins, librerias y framworks de UI y UX que descargas como programador casi sin pensar, increíble todo el trabajo que hay detrás de la maquetación y diseño web con html y css.

Recuerdo que en uno de mis primeros proyectos me pidieron que dentro de una galería de imágenes, al momento de pasar el curso sobre la imagen, esta incrementara su tamaño y junto con ello apareciera texto que describiera dicha imagen, me tarde dos días en hacerlo 😂, todo se desmaquetaba, termine usando bootstrap 😆.

Excelente, todo esta claro ahora. aunque debo decir que tendré que ver de nuevo la clase.

Aconsejo utilizar “–” como separadores en el BEM dado que se hace mas facil navegar con el teclado en el editor y cambiar partes del string ya que si se usa “__” al hacer ctrl + -> se salta la clase completa y toca pasar manualmente hasta la palabra especifica que se quiere cambiar.

Alt + 126 = ~

para los que se hayan perdido un poco les dejo el codigo implementado

Si no entiende las clases de este curso, Don´t worry…

Estos son los primeros pasos, siempre será así, después de este curso continúen con el siguiente y el siguiente…

Poco a poco verán que han creado elasticidad en cerebro y será aún más fácil comprender desarrollo de software y emplearlo

Continuemos…

PD: no es cuestión de gustar, el desarrollador tiene que programar declarar en ingles

Esta clase estuvo de película. Sería genial hacer ese otro curso de efectos y animaciones, pero me encantaría que usted mismo lo diera.

Me gusto esta clase, me quedo genial el carousel, ademas realice algunas modificaciones en mi codigo para que me quedara visualmente mejor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <title>Platzi Videos</title>
</head>
<style>
    body{
        margin: 0;
        background-color: #0B9ED9;
        font-family: 'Muli', sans-serif;
    }
    .header{
        background-color: #0B9ED9;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header__img{
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
    }
    .header__menu{
        margin-right: 80px;
    }
    .header__menu--profile{
        margin-right: 8px;
        display: flex;
        align-items: center;
    }
    .header__menu--profile img{
        margin-right: 8px;
        width: 40px;
    }
    .header__menu--profile p{
        margin: 0px;
       color: white;
    }
    .header__menu ul{
        display: none;
        list-style: none;
        padding: 0px;
        position: absolute;
        width: 100px;
        text-align: right;
        margin: 0px 0px 0px -14px;
    }
    .header__menu:hover ul, ul:hover{
        display: block;
    }
    .header__menu li{
        margin: 10px 0px;
    }
    .header__menu li a{
        color: white;
        text-decoration: none;
    }
    .header__menu li a:hover{
        text-decoration: underline;
    }
    .main{
        padding-top: 30px;
        height: 180px;
        text-align: center;
    }
    .main__title{
        color: white;
        font-size: 25px;
    }
    .input{
        background-color: rgba(255,255,255,0.1);
        border: 2px solid white;
        border-radius: 35px;
        color: white;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
    }
    ::placeholder{
        color: white;
    }
    .carousel{
        width: 100%;
        overflow: scroll; /* Scroll horizontal */
        padding: 20px;
        position: relative;
    }
    .carousel__container{
        white-space: nowrap;
        margin: 70px 0px;
        padding-bottom: 10px;
    }
    .carousel__item{
        background-color: blueviolet;
        width: 200px;
        height: 250px;
        border-radius: 20px;
        overflow: hidden;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        transition: 450ms all;
        transform-origin: center left;
    }
    .carousel__item:hover ~ .carousel__item{
        transform: translate3d(100px, 0, 0);
    }
    .carousel__container:hover .carousel__item{
        opacity: 0.3;
    }
    .carousel__container:hover .carousel__item:hover{
        transform: scale(1.5);
        opacity: 1;
    }

</style>
<body>
    <header class="header">
        <img class="header__img" src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png" alt="Platzi Video">
        <div class="header__menu">
            <div class="header__menu--profile">
                <img src="./usuario.png" alt="Usuario">
                <p>Perfil</p>
            </div>
            <ul>
                <li><a href="">Cuenta</a></li>
                <li><a href="">Cerrar sesión</a></li>
            </ul>
        </div>
    </header>

    <section class="main">
        <h2 class="main__title">¿ Qué quieres ver hoy ?</h2>
        <input class="input" type="text" placeholder="Buscar...">
    </section>

    <section class="carousel">
        <div class="carousel__container">
            <div class="carousel__item">

            </div>
            <div class="carousel__item">

            </div>
        </div>
    </section>
</body>
</html>

Usando Flex:

.carousel__container{
  white-space: nowrap;
  margin: 70px 0px;
  padding-bottom: 10px;
  display:flex;
  gap: 30px;
}

.carousel__item{
  width: 200px;
  min-width: 200px;
  height: 250px;
  min-height:250px;
  border-radius: 20px;
  background-color:aliceblue;
}

Para aquellos que no tenían claro la importancia de las clases, pueden darse cuenta en este video como se puede crear muchos items sin tener que escribir todas las características que debe llevar en cada uno, simplemente escribes <div class=“carousel__item”></div> en el body y este toma todas las características que tienes en la clase .carousel__item. Con esto te ahorras cientos de líneas en cada proyecto.

interesante, no conocia el selector (~), por si alguien se ha sentido perdido con este selector, tengan en cuenta que cuando le hacemos hover a un item del carousel, en este caso un card, los elementos despues de este se desplazan un poco hacia la derecha. Eso es lo que hace esta regla que establecimos:

.carousel__item:hover ~ .carousel__item {
        transform: translate3d(100px, 0, 0);
    }

Basicamente le decimos, quiero que al hacer hover sobre un item, los elementos que preceden a este, es decir solo los que estan despues de él, se desplazen 100px hacia la derecha. Los que estan antes no se ven afectados.

Lo deje un tiempo ya que precisamente en esta clase sentía que me perdía demasiado.
Me puse a practicar un poco más, tomar un par de cursos y volví.
Debo decir que pese a eso nuevamente se me complico el tema del hover por los selectores qué se usaron y un poco de la animación.
Pero esta vez si lo obtuve (volviendo a ver la clase, claro). Me gusta como va quedando 😄

No pues súper que la profe sepa! pero en realidad es bastante frustrante que pone y pone cosas y creo que he tenido que ir un montón a Youtube y otras herramientas pa seguirle el ritmo.... en verdad es muy chévere la profe y todo, pero la clase es muy difícil de seguir 🤷🏽‍♂️

Para los que nos puedan hacer la virgulilla (~)como nos indica la profe, lo pueden hacer asi: ALT + 126 = ~.

si crees que la profe va algo rápido en el curso yo te recomiendo tomar el curso definitivo de html y css para tener algo de conocimiento #NUNCAPARESDEAPRENDER

alt + 126 en windows para sacar el caracter
https://elcodigoascii.com.ar/

Excelente clase!!!
Con esto ahora sé crear un slider 😄 😄

esto deberia ser un curso practico, para que tanto preambulo en 22 partes del curso, hablando de html y css basico, para luego dar un salto tan grande?, he entendido todo por que ya conozco las propiedades, pero 0 de buenas practicas

practicando ando…
look at this carousel…

Quiero aportar que lo que ha estado haciendo la profesora de mantener el HTML y el CSS en el mismo archivo es una muy mala practica, no es relevante para el desarrollo del curso pero es algo a tener en cuenta.

La forma correcta es usando una etiqueta de link en el head del HTML de esta forma:

<link rel="stylesheet" href="./css/style.css">

Si quedaron con dudas como yo del uso de la “~” les dejo la documentación oficial sobre el tema aquí

Una clase magnífica. Siempre deseé realizar ese efecto, y estilo. Gracias.

Para el símbolo “~” = “alt+126”, eso en código ASCII, creo que eso es en cualquier teclado y sistema operativo, suerte!!!

Hola, alguien sabra porque al momento de crear el container aparecen unas barras de desplazamiento adentro del navegador

Y que puedo hacer para ocultarlas o quitarlas

ya se va pareciendo

No se como pero se logro

para el minuto 9:35 esto les servirá para entender si les quedo alguna duda

Nunca entiendo cuando hace el proceso de acomodar la clase con el hover. ¿Alguien podría explicarme? Les juro que repito y enfoco la mayor concentración posible en lo que dice, pero no logro entender a lo que se refiere.

(De pronto a veces exagero un poco, pero porfis ayúdenme)

Una clase muy interesante que nos demuestra que podemos hacer cosas muy linda usando solo CSS, desconocida por completo el uso del ~ en los selectores. 😮

En CSS es importante saber la especificidad que tienen los selectores

Para poder entender mejor esta clase, lo que hice fue escribir el código poco a poco e ir viendo los resultados.

Primero coloqué el código sin la virgulilla:

.carousel-item:hover {
  transform: translate3d(100px, 0, 0);
}

Luego continué con el código:

.carousel-item:hover ~ .carousel-item {
  transform: translate3d(100px, 0, 0);
}

La virgulilla se utiliza para aplicar las reglas a los elementos hermanos siguientes del elemento dado, en este caso todos los elementos hermanos con la clase carousel-item

Imagen animada

aca les dejo un enlace por si no les quedó claro la funcion del overflow ahi se detallan los diferentes valores que puede tener, como: visible, hiddeen, scroll, auto. espero les sirva! https://www.w3schools.com/css/css_overflow.asp

Si alguien no recordaba para que servia lo virgulilla
Significa que todos los elementos adyacentes que le siguen a ese elemento van a tener una transición
Es por eso que el siguiente item se mueve a la derecha

Hola buenas! al momento de hacer hover en un articulo, funciona todo bien, menos el hecho de quitar opacidad al resto de articulos. es decir: el articulo crece y se desplaza, pero el resto sigue con la misma opacidad. alguien sabe que puede estar ocurriendo? MUCHAS GRACIAS

HTML 
------
<section class="carrusel">
<div class="carrusel-container">
    <article class="carrusel-item"></article>
    <article class="carrusel-item"></article>
    <article class="carrusel-item"></article>
    <article class="carrusel-item"></article>
</div>
</section>

CSS
-------
.carrusel{
    width: 100%;
    overflow: scroll;
    padding: 30px;
    position: relative;
}
.carrusel-container{
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;
}
.carrusel-item{
    width: 200px;
    height: 250px;
    margin-right: 10px;
    border-radius: 20px;
    background-color: white;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    transition: 450ms all;
    transform-origin: center left;
}
.carrusel-item:hover ~ .carrusel-item{
    transform: translate3d(100px, 0, 0);
}
.carrusel-container:hover ~ .carrusel-item{
    opacity: 0.3;
}
.carrusel-container:hover .carrusel-item:hover{
    transform: scale(1.5);
    opacity: 1;
}```

~

ALT + 126 (Windows)

Calacar XD

🟢Este es el curso de animación con css que menciona la Profe Fany

https://platzi.com/clases/animaciones-css/

Ya encontre el error

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>carousel</title>
</head>

<style>

body{
    margin: 0px;
}
.carousel{
    width: 100%;
    overflow: scroll;
    padding: 30px;
    position: relative;
}
.carousel__container{
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;
}
.carousel__item{
    background-color: tomato;
    width: 200px;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
    transition: 450ms;
    transform-origin: center left;
}
.carousel__item:hover ~ .carousel__item{
    transform: translate3d(100px, 0, 0);    
}
.carousel__container:hover .carousel__item{
    opacity: 0.3;
}
.carousel__container:hover .carousel__item:hover{
    transform: scale(1.5);
    opacity: 1;

}
</style>

<body>

    <section class="carousel">
        <div class="carousel__container">
            <div class="carousel__item"> 

            </div>
            <div class="carousel__item"> 

            </div>

        </div>
            
    </section>
    
</body>
</html>```

Como voy desde cero, estoy comentando cada línea de código que hace cosas muy interesantes como lo del carousel para luego repasarla y tener claro, me gusta esto de CSS Y HTML

Aquí el código de la clase de hoy :3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0%;
      }
      .carousel {
        overflow: scroll; /*Permite que el carousel haga scroll*/
        padding: 30px;
        position: relative; /*los elementos de adentro se posicionaran en relacion al contenedor padre*/
        width: 100%;
      }
      .carousel__container {
        margin: 70px 0px;
        padding-bottom: 10px; /*para que no se vean cortado los elementos*/
        white-space: nowrap; /*no envuelve los elementos, permite que fluyan a los laterales*/
      }
      .carousel__item {
        background-color: rgba(90, 90, 90, 0.5);
        border-radius: 20px;
        cursor: pointer; /*Cuando pasamos el puntero por el item cambia una mano de selección */
        display: inline-block; /*Posiciona los items uno al lado del otro */ /*Por defecto viene display:block*/
        height: 250px;
        margin-right: 10px;
        overflow: hidden; /*Evita que no podamos colocar elementos dentro del item con bordes redondeados */
        width: 200px;
        transition: 450ms all; /*le da un tiempo a la transicion, suavizandola*/
        transform-origin: center left; /*alinea los elementos para que no se salgan, y empiezan de izq a der*/
      }
      .carousel__item:hover ~ .carousel__item {
        /*~ selecciona todo los elementos excepto sobre el que se hace hover*/
        transform: translate3d(
          100px,
          0,
          0
        ); /*al hacer hover se trasladan a la derecha*/
      }
      .carousel__container:hover .carousel__item {
        opacity: 0.3; /*le da opacidad a los otros elementos cuando hacemos hover en uno*/
      }
      .carousel__container:hover .carousel__item:hover {
        opacity: 1; /*le quitamos la opacidad al elemento en especifico*/
        transform: scale(
          1.5
        ); /*agranda el elemento cuando hacemos hover en el*/
      }
    </style>
  </head>
  <body>
    <section class="carousel">
      <div class="carousel__container">
        <div class="carousel__item"></div>
        <div class="carousel__item"></div>
      </div>
    </section>
  </body>
</html>

noté que me aparece esta linea debajo, voy bien? o puse algo de mas.

El curso es un poco superficial en los conceptos, por eso si quieren o están interesados en la maquetación o animaciones hagan la escuela de arquitectura web

Excelente explicación del carrusel.

anexo mi estilo.

Anexo Código HTML
<!DOCTYPE html>
<html lang=“es”>

<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Cesar Paulino">
<title>Platzi Video</title>
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="css/platzi.css">
<link href="https://fonts.googleapis.com/css2?family=Muli&display=swap" rel="stylesheet">

</head>

<body>

<header class="header">
    <img class="header__img" src="images/logo-platzi-video.png" alt="Platzi Video">
    <div class="header__menu">
        <div class="header__menu--profile">
            <img src="images/user-mascarasteatro.png" alt="User">
            <p>Perfil</p>
        </div>
        <ul>
            <li><a href="#">Cuenta</a></li>
            <li><a href="#">Cerrar Sesión</a></li>
        </ul>
    </div>
</header>

<section class="main">
    <h2 class="main__title">¿Qué se te apetece disfrutar hoy?</h2>
    <input class="input" type="text" placeholder="Buscar....">
</section>

<section class="carousel">
    <h3>Mi lista</h3>
    <div class="carousel__container">
        <div class="carousel__item">
            <img class="carousel__img" src="/images/red.jpeg" alt="Conspiracion_Red">
            <h3></h3>
            <p></p>
        </div>
        <div class="carousel__item">
            <img class="carousel__img" src="/images/swordfish.jpeg" alt="Accesso_Autorizado">
        </div>
        <div class="carousel__item">
            <img class="carousel__img" src="/images/hacker_ame.jpeg" alt="Hackers">
        </div>
        <div class="carousel__item">
            <img class="carousel__img" src="/images/hacker1.jpg" alt="Hacker1">
        </div>
        <div class="carousel__item">
            <img class="carousel__img" src="/images/piratas.jpeg" alt="Pirates of Silicon Valley">
        </div>
    </div>

</section>

</body>

</html>

Anexo Código CSS

body {
background-color: #8f57fd;
font-family: ‘Muli’, sans-serif;
margin: 0px;
}

.header {
align-items: center;
display: flex;
justify-content: space-between;
height: 80px;
width: 100%;
}

.header__img {
margin-top: 10px;
margin-left: 10px;
width: 200px;
}

.header__menu {
margin-right: 30px;
}

.header__menu ul {
display: none;
list-style: none;
margin: 0px 0px 0px -14px;
padding: 0px;
position: absolute;
text-align: right;
width: 100px;
}

.header__menu:hover ul, ul:hover {
display: block;
}

.header__menu li{
margin: 10px, 0px;
}

.header__menu li a{
color: white;
text-decoration: none;
}

.header__menu li a:hover{
text-decoration: underline;
}

.header__menu–profile {
align-items: center;
cursor: pointer;
display: flex;
margin-right: 8px;
}

.header__menu–profile img {
margin-right: 8px;
width: 40px;
}

.header__menu–profile p {
color: white;
margin: 0px;

}

.main {
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
height:240px;
}

.main__title {
color: white;
font-size: 25px;
}

.input {
background-color: rgba(255, 255,255, 0.1);
border: 2px solid white;
border-radius: 35px;
color: white;
font-family: ‘Muli’, sans-serif;
font-size: 16px;
height: 40px;
outline: none;
padding: 0px 20px;
width: 70%;
}

::placeholder {
color: white;
}

.carousel {
overflow: scroll;
padding: 30px;
position: relative;
width: 100%;
}

.carousel h3 {
color: white;
font-family: ‘Muli’, sans-serif;
}

.carousel__container {
margin: 70px 0px;
padding-bottom: 10px;
white-space: nowrap;
}

.carousel__item {
border-radius: 20px;
display: inline-block;
cursor: pointer;
height: 250px;
margin-right: 10px;
overflow: hidden;
transition: 450ms all;
transform-origin: center left;
width: 170px;

}

.carousel__img{
height: 250px;
width: 170px;
}

.carousel__item:hover ~ .carousel__item {
transform: translate3d(100px, 0, 0);
}

.carousel__container:hover .carousel__item {
opacity: 0.4;
}

.carousel__container:hover .carousel__item:hover {
transform: scale(1.5);
opacity: 1;
}

No me sale lo de la opacidad, les dejo el codigo de esa parte, y no se que esta mal

.Carrusel__container:hover .Carrusel__item {
opacity: 0,1;
}
.Carrusel__container:hover .Carrusel__item:hover {
transform: scale(1.5);
opacity: 1;
}

Woooa esto me inspira a tomar los cursos de transiciones y animaciones con CSS.

Esta es mi interpretación de los combinadores y selectores 👨‍💻. Espero que sea de ayuda:
.

/* cuando x, aplique estilos a (determinados) y */
/*        x      (determinados)    Y */
/*    elemento       ~           elemeto2 */

/* Cuando un item del carrusel esté seleccionado, a todos los items adyacentes aplique:*/
.carousel__item:hover ~ .carousel__item{
    /* mover hacia la derecha */
    transform: translate(100px, 0);
    /* transform: translate(x,y); */
}

/* Cuando el contenedor del carrusel esté seleccionado, a todos los items de carrusel aplique: */
.carousel__container:hover .carousel__item{
    opacity: 0.3;   
}

/* Cuando el contenedor del carrusel esté seleccionado, al item seleccionado aplique: */
.carousel__container:hover .carousel__item:hover{
    transform: scale(1.5);
    opacity: 1;
}

La virgulilla (~) se escribe así en el teclado: alt + 126

alt + “126” = ~

Al fin entiendo como se utiliza transform y transición!

Si desean le pueden agregar una propiedad al carousel__item llamado box-shadow para que se vea en esta imagen que tengo y le den este efecto.
El valor que le di fue este:

<box-shadow: 11px 15px 28px -5px rgba(0,0,0,0.40);>

Los valores de box-shadow en orden de izquierda a derecha:

  1. Horizontal Length
  2. Vertical Length
  3. Blur Radius : es la difuminación
  4. Spread Radius : el radio de propagación
  5. COLOR

Si en caso tal en algún proyecto desean darle un box-shadow interno a algún item que normalmente solo lo hacen para darle sombra interna al momento de clickear un botón le colocan la palabra inset cómo? De esta Manera:

<box-shadow: inset 11px 15px 28px -5px rgba(0,0,0,0.40);>

Espero haber ayudado!

No entiendo para que es este signo “~”

Hay alguna diferencia en utilizar display: flex; dentro del container?

Me gustaria una renovacion del curso de animaciones D:

¿para qué funciona ?

<code>

A mi no me sale el carrusel y mi código está igual por que debe ser?

porque no me aparecen los dos div carrousel ?cuando lo recargo solo me aparece uno

Que hace exactamente esto?

.carousel__item:hover ~ .carousel__item{
        transform: translate3d(100px,0,0);
    }```

como veo que se esta haciendo grande el archivo pase todo el css a otra hoja .css en lugar de tener el <style> en el html. Alguien mas hizo lo mismo? es lo mismo o trae algún problema?

Para nosotros los mortales de windows el (~) lo colocamos por código ASCII pulsando alt + 126

Este era el curso que faltaba en mi vida.

Tengo que adivinar muchas cosas… pasa por alto justo lo q es más complejo

Impresionante tanta información que se va descubriendo…

Hacer esto me devolvió la ilusión de mis primeras lineas de código con CSS, que emoción.
Aquí un poco de la documentación de Transform.

Me encanta la manera como conectan todos los cursos que tienen, demostrando que Platzi lo tiene todo y es lo mejor.
Incredible curso, hasta el momento no me despego de la pantalla.

ALT + 126 ~

🙀Wow super ese truco de

white-space: no-wrap;

para los que no tengan “el palito de la ñ” la virgulilla sale con ALT + 126 ~

Saludos.

En que variaria si en ves de inline-block , uso flex ?

En que casos se usa la ~ ? No me quedo muy claro su uso, alguien podría ayudarme?

Me ha parecido esta una gran clase. La explicación que da la instructora es muy clara y precisa. Vaya que he aprendido cosas nuevas con esta clase.

Habrá que hacer el curso de transiciones que dice hay.