Estilos CSS para Pantalla de Orden en HTML

Clase 16 de 22 • Curso Práctico de Frontend Developer

Resumen

Estilizaremos el código HTML que realizamos para la sección “my order” con las opciones que nos brinda CSS para lograr que usuarios vean su pedido de esta manera:

Cómo aplicar CSS en una orden de compra

Una orden de compra tiene una cantidad indefinida de artículos y por eso debemos implementar estilos de CSS que funcionen tanto para ventas menores como para ventas mayores de miles de artículos.

¿Qué debemos hacer para construir estas dos vistas? Sigue estos pasos:

Define las dimensiones del contendor principal y centra su contenido

.my-order {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }

La medida relativa vh, viewport height, define la altura del contenedor. En este caso le estamos diciendo que sea del total de la pantalla.

Establece el tamaño de la fuente del título y su separación de la barra de totales

.title {
      font-size: var(--lg);
      margin-bottom: 40px;
    }

Prepara la grilla de CSS Grid

.my-order-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }

Brinda espacio a los elementos y confecciona otra grilla

.my-order-content {
      display: flex;
      flex-direction: column;
    }
     .order {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: center;
      background-color: var(--text-input-field);
      margin-bottom: 24px;
      border-radius: 8px;
      padding: 0 24px;
    }
    .order p:nth-child(1) {
      display: flex;
      flex-direction: column;
    }
    .order p span:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }
    .order p span:nth-child(2) {
      font-size: var(--sm);
      color: var(--very-light-pink);
    }
    .order p:nth-child(2) {
      text-align: end;
      font-weight: bold;
    }

Define la parte visual de “shopping cart”

    .shopping-cart {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
    }
    .shopping-cart figure {
      margin: 0;
    }
    .shopping-cart figure img {
      width: 70px;
      height: 70px;
      border-radius: 20px;
      object-fit: cover;
    }
    .shopping-cart p:nth-child(2) {
      color: var(--very-light-pink);
    }
    .shopping-cart p:nth-child(3) {
      font-size: var(--md);
      font-weight: bold;
    }

¿Qué logra object-fit en CSS?

A las imágenes le aplicamos la propiedad object-fit, ya que resuelve como el contenido se ajustará a su contendor.

Sus valores pueden ser:

contain → mantiene la relación de aspecto mientras le ajusta dentro del contendedor.
cover → mantiene la realción de aspecto, pero la ajusta para llenar el contenedor.
fill → modifica su tamaño para llenar el contenedor.
none → no se redimensiona.
scale-down → el contenido se dimensiona como si none o contain estuvieran especificados, lo que resulta en un tamaño de objeto concreto más pequeño.

Documentación.

¿Sabías que tener en claro estos conceptos te puede favorecer en una entrevista de trabajo?
Mira lo que te pueden preguntar acerca de HTML y CSS para el puesto de frontend developer.

Contribución creada por: Guadalupe Monge Barale

Arianna Corona

student•

Así vamos...

Ever Jose

student•

👏👏

Max Andy Diaz Neyra

student•

Esta genial, buen trabajo.

Nabil Aparicio

student•

esta profesora se confunde cambia el html y lo hace tan rapido que cuesta seguir el paso

Antonio Javier Colmenarez Gonzalez

student•

me paso en esta clase, entre tantos divs que uso y la rapidez con la que lo hacia me perdi por completo

Adriel Francesco Pezo Vizcarra

student•

Te recomendaría ponerlo en 0.75 y normal, más fácil para ver y comprender la sesión.

Carlos Lefin Henriquez

student•

Que horrible el desorden para explicar

Reinaldo Mendoza

student•

Jaja, eso no es ni cerca de lo que se van a encontrar en un proyecto real

Luis Ariza

student•

Jajajaja Completamente de acuerdo con Reinaldo! No soy el más apto para decirlo, pero dejen de quejarse tanto y continúen aprendiendo, el curso es excelente aun con sus errores.

Isaac Godinez Cortes

student•

Siento que va sacando el maquetado del html como le viene a la mente, sin una planeación anterior, supongo que en un trabajo real suele pasar así, pero esto es un curso, debe estar ya diseñado, es medio molesto estar refactorizando el código a cada rato.

Fabio Gomez

student•

Pienso igual

Eduardo Peña Ramos

student•

Es para simular mejor el mundo real. En la vida real se reutiliza el código, se van puliendo detalles y puliendo bugs. A mi me gusta mucho cuando los profes tienen errores y hacen debug, eso también es muy didáctico. Saludos! :D

Lex Urrea

student•

Yo opino que quienes se fijan mas en si la profesora utiliza "buenas practicas" o "no tiene todo hecho", no estan aprovechando realmente la oportunidad de aprender, si bien en ocasiones es un poco confuso, no hay nada que con lo que hemos aprendido no podamos solucionar, he realizado todo el proyecto con archivos html y css por aparte y no he tenido ningun lio, animo a todos menos excusas y mas ganas de aprender :)

Libian María Hernández Gil

student•

Una buena alternativa, es proponerse hacer el html y los estilos por sí mismo... A mi me resultó, aunque estoy aprendiendo como la mayoría, veo la explicación de la profe como una orientación pero no hago exactamento lo mismo que ella está haciendo. He visto otras opciones y me han funcionado.... La metodología de la profe me gusta, porque me enseña a solventar errorres en la marcha. Aquí comparto mi código...

!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Menú mobile</title>
    <style>
        :root{
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #8FBC8B;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD982;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body{
            margin: 0;
            padding: 0;
            font-family: 'Quicksand', sans-serif;
        }
        
        .container{
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
        }
        .myOrders--container{
            width: 320px;
            height: 100vh;
        }

        .title{
            font-size: var(--lg);
            margin-bottom: 40px;
        }
        .myOrders--header{
            width: initial;
            height: 80px;
            background-color: var(--text-input-field);
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            margin: auto;
        }
        .myOrders--header p{
            display: flex;
            flex-direction: column;
        }
        .myOrders--header p span:nth-child(1){
            font-size: var(--lg);
            font-weight: bold;
            color: var(--black);
        }
        .myOrders--header p span:nth-child(2){
            font-size: var(--md);
            font-weight: 300;
            color: var(--very-light-pink);
        }
        .myOrders--header p:nth-child(2){
            font-weight: bold;
        }
        .myOrders--product{
            width: 320px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: center;
            gap: 4px;
            margin-top: 24px;

        }
        .myOrders--product figure{
            width: 80px;
            height: 80px;
            margin: 0;
            padding: 0;
        }
        .myOrders--product figure img{
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }
        .myOrders--product p{
            justify-items: center;
        }
        .myOrders--product p:nth-child(2){
            font-size: var(--md);
            color: var(--very-light-pink);
        }
        .myOrders--product p:nth-child(3){
            text-align: right;
            font-weight: bold;
            padding-right: 10px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="myOrders--container">

            <h1 class="title">My orders</h2>
         
            <section class="myOrders--header">
                <p>
                    <span>07.03.2022</span>
                    <span>7 articules</span>
                </p>
                <p>$550,00</p>
            </section>
    
            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>

            <section class="myOrders--product">
                <figure>
                    <img src="https://images.pexels.com/photos/9816191/pexels-photo-9816191.jpeg?auto=compress&cs=tinysrgb&w=300" alt="pastel">
                </figure>
                <p>Product</p>
                <p>$70,00</p>
            </section>
        </div>
    </div>

</body>
</html>

Arianna Corona

student•

HTML:

<body>
  <div class="my-order">
    <div class="my-order-container">
      <h1 class="title">My order</h2>

      <div class="my-order-content">
        <div class="order">
          <p>
            <span>03.25.21</span>
            <span>6 articles</span>
          </p>
          <p>$560.00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>
      </div>
    </div>
  </div>
</body>

Francisco Escobar

student•

Tu código me ayudó a darme cuenta que habia metido las etiquetas dentro de <figure> y por eso no me funcionba el grid. Muchas gracias.

Valentina Amaya Ibañez

student•

Concuerdo con Francisco, tu código me ayudo muchísimo gracias

Gabriela Andreina García Uzcategui

student•

Me está costando terminar este curso, hay demasiado desorden.

Jimer Samuel Espinoza

student•

Lo terminaste al final?

Reinaldo Mendoza

student•

Espera a que veas un proyecto real, creo que esta usando los estilos en el mismo archivo para que sea mas facil incluso

Usuario anónimo

user•

Veo muchos comentarios diciendo que así se maqueta en la industria y del mismo modo se estiliza, yo creo que no porque por alguna razón existen los Sistemas de diseños y las Arquitecturas, como BEM y SASS excelente compatibilidad entre ellas (son mis favoritas). No critico a la profesora, pero tampoco es la de mi mayor gusto, y tampoco juzgo a los estudiantes que presentan su inconformidad con el desorden, porque sí hay desorden, en la manera de trabajar en la profe, y eso dificulta el proceso de aprendizaje de los y las estudiantes, y más si es un novato. Al menos contamos con el gran repertorio de cursos que ofrece Platzi, y podemos prepararnos con esos para así continuar en nuestro aprendizaje. Sigamos adelante chicos y chicas, que la profesora no sea de nuestro agrado no significa que debamos desertar, dejemos eso de lado y continuemos con el proceso.

Bryan Figueroa

student•

Yo he entendido todo, sinceramente no se de donde sacan el "desorden", en mi punto de vista ha sido de las mejores profesoras que me he topado hasta ahora

Orangel Brito

student•

Amo a la profe , lo que no nos agrada son comentarios despectivos hacia los profes que hacen un gran trabajo!. !

Rodrigo Ramos Xochiteotzin

student•

Estilos CSS

/*my order styles*/

.my-order {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.my-order-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 300px;
} 

.my-order-content {
    display: flex;
    flex-direction: column;
}

.order {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    background-color: var(--text-input-field);
    margin-bottom: 24px;
    border-radius: 8px;
    padding: 0 24px;
}

.order p:nth-child(1) {
    display: flex;
    flex-direction: column;
}

.order p:nth-child(2) {
    text-align: end;
    font-weight: bold;
}

.order p span:nth-child(1) {
    font-size: 14px;
    font-weight: bold;
}

.order p span:nth-child(2) {
    font-size: 12px;
    color: var(--very-light-pink);
}

.title-order {
    font-size: 16px;
    margin-bottom: 40px;
}

.shopping-cart {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
}

.shopping-cart figure {
    margin: 0;
}

.shopping-cart figure img {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    object-fit: cover;
}

.shopping-cart p:nth-child(2) {
    color: var(--very-light-pink);
}

.shopping-cart p:nth-child(3) {
    font-size: 14px;
    font-weight: bold;
}

Francisco Escobar

student•

Gracias, tu código me ayudo :) LIKE

Cristian Camilo Alvarado Beltrán

student•

Hasta la clase 14 llegue bien. pero desde aquí se ve muy desordenado la forma de maquetar, además de que va volando y me toca estar pausando la clase todo el tiempo. incluso hay líneas que me toca ponerme a buscar para que sirve cada propiedad porque simplemente del afán se me escapa para que sirve y eso que uso doble pantalla y el live server para ver los cambios inmediatamente. me parece que el curso debería extenderse mas ya que algunos necesitamos entender lo que hace cada propiedad y etiqueta en la marcha. sigo avanzando pero con dificultad.

Diego Felipe Salamanca Rojas

student•

Cristian, para saber que hace cada etiqueta esta el curso de HTML y CSS, este no es un curso teórico

Jacob Aguilar Campos

student•

Creo que alguien se saltó un curso 👀

Thomas André Dale Guevara

student•

En el minuto 11:28 otra forma de poner el texto debajo del otro con solo HTML es 04.25.2021 6 articles La magia está en la etiqueta de que produce un salto de línea en el texto y se obtiene el mismo resultado de una manera más sencilla

Janet Guadalupe Torres Ménera

student•

Así es, la etiqueta se usa para saltos de línea dentro de la estructura HTML, aunque considero que es mejor trabajar el 100% del diseño, incluyendo estos espaciados, siempre con CSS.

Pablo Joaquín Cruz

student•

Compañeros, les recomiendo que antes de ver cómo lo hace la profe es bueno que lo intentemos hacer nosotros por nuestra cuenta. Eso vine haciendo desde hace unas clases y realmente se aprende mucho más. No importa si hacen un código desordenado, mientras más de estas prácticas hagan mejor les va a quedar.

Daniel Solano

student•

La peor clase que he visto en este curso. Siento que Estefany va maquetando a como se le viene en mente (lo cual puede pasar en el mundo laboral, mas no en un curso donde lo menos que hay que hacer es enredar al estudiante). Igualmente, me parece una buena profe y hasta el momento he entendido, pero a duras penas.

Omar Aleiser Alvarez Laverde

student•

En buena onda.

Todos estamos aprendiendo inglés.

La expresión --font-weight -- en ingles, se lee más o menos font uueigt

Esto es diferente a lo que se escucha en el video, pues se escucha algo así como font width.

Magalí Acevedo

student•

Recomiendo que para entender mejor hagan primero el curso de grid , hay varios en la escuela web. este curso es mejor para practicar esos conceptos

Max Andy Diaz Neyra

student•

Me encanta el uso constante de Grid. Lo usual es que siempre usen flexbox pues tiene mas tiempo pero el grid es un display realmente potente y el que lo usen tanto ayuda a verlo mpas familiar, perderle el miedo.

Hiram Rodriguez Gomez

student•

Completamente de acuerdo. En otro curso lo vi, pero nunca me quedó claro como utilizarlo con eficiencia.

Este curso me ha permitido aprender mejor el como aprovechar las bondades del grid y me ha sido más sencillo acomodar diversos elementos del maquetado.

Alejandro Pérez Jacobo

student•

Hola, alguien me podría explicar en:

.shopping-cart p:nth-child(2)

¿porqué pone 2 en lugar de 1? el figure tambien cuenta como un hijo a pesar de que haya puesto p? no debería solo contar los p?

Christopher Andrés Guano Valencia

student•

¡Hola! Pone 2 para dar estilos a los 2 hijos p de la clase shopping-cart. La etiqueta figure también es hijo pero solo está especificando la etiqueta p.

¡Nunca pares de aprender! 🙌

Andoni Barba Noe

student•

así es, el figure también cuenta como hijo, puedes interpretarlo como: El segundo hijo de la clase "shopping-cart" que debe ser un p, de la misma forma funciona el:

.shopping-cart p:nth-child(3)

este seria el tercer hijo de la clase "shopping-cart" que debe ser un ```p``

Edgar Alejandro España Amaya

student•

Para los que igual que yo no conocía object-fit a continuación dejo link donde se explica a detalle y con que otros valores se puede utilizar. => https://developer.mozilla.org/es/docs/Web/CSS/object-fit

Aarón Castillo

student•

Me sorprende los comentarios, el proyecto apenas crece un poco y la gente se confunde, existe el poner pausa, la velocidad de 0.75 y hasta inclusive, en la descripción, esta el link para conseguir el proyecto GitHub. (y)

Rigoberto Maldonado

student•

Que tal campeon, buen dia....Como que cada vez mas, la Estefany, en sus explicaciones revuelve mucho y no llega a entender la gran parte de lo que hace en su codigo... Bueno imaginate fronten developer!!!????

mas organizado, si se puede.

dejo mi aporte.