Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Cómo hacer nuestro proyecto responsivo?

12/13
Recursos

Aportes 35

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les presento mi proyecto final, con solo ligeros cambios porque me gusto el curso y el diseño base.

proyecto: https://cristhyanpm.github.io/platzi-css-grid-basic-project/

repositorio: https://github.com/CristhyanPM/platzi-css-grid-basic-project

Debería verse así:

Éxitos a todos!!

Agregué unos cuantos estilos al proyecto para terminar la parte visual

Me doy cuenta de la importancia del Mobile First. Es más complicado hacerlo responsive desde un desktop screen

Este curso fue excelente aprendi mucho sobre Grid pues tenia muchos vacios, pero me ayudo a comprender mejor todos lo conceptos 😃

Voila!!! Aqui el proyecto ya por completo terminado, lo deje lo mejor que pude!


HTML

<!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>Proyecto de la clase</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <main>
    <section class="hero">
      <div class="info">
        <h1 class="info-title">Check the <br> best food</h1>
        <p class="info-subtitle">Lorem ipsum, dolor sit amet </p>
        <button class="info-button">Book a table</button>
      </div>
      <img class="hero-image" src="./imagenes/hero.png" alt="Plato de pasta con vegetales">
    </section>

    <section class="dishes">
      <h2 class="dishes-title">Our Services</h2>
      <div class="dishes-grid">
        <img class="dishes-item dishes-item__big" src="./imagenes/video.png" alt="video sobre la comida">
        <img class="dishes-item" src="./imagenes/dish1.png" alt="">
        <img class="dishes-item" src="./imagenes/dish2.png" alt="">
        <img class="dishes-item" src="./imagenes/dish3.png" alt="">
        <img class="dishes-item" src="./imagenes/dish4.png" alt="">
      </div>
    </section>

    <section class="menu">
      <h2 class="menu-title">Home menu</h2>
      <div class="menu-grid">
        <div class="menu-grid-item">
          <img src="./imagenes/plate1.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate2.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate3.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate4.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate5.png" alt="">
        </div>
      </div>
    </section>
  </main>
</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
main { 
  max-width: 1200px;
  margin: 0 auto;
}
.hero { 
  display: grid;
  grid-template-columns: minmax(300px, 2fr) 3fr;
  grid-auto-rows: 550px;/* ALTURA del contenedor */
  border-bottom: 1px solid #ddd;
}
.hero .hero-image { 
  width: 100%;
  height: 100%; /* ALTURA del contenedor */
  object-fit: contain; /* La imagen se ajuste al espacio donde esta */
}
.info { 
  align-self: center; /* Alineamos el contenido del div.info */
}
.info-title { 
  color: #333;
  font-size: 3rem;
  font-weight: bolder;
  margin-bottom: 24px;
}
.info-subtitle {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 24px;
} 
.info-button { 
  border: none;
  border-radius: 20px;
  color: #333;
  background-color: #fb8c00;
  font-weight: bolder;
  padding: 12px 24px;
}
.dishes { 
  margin: 100px 0;
}
.dishes-title { 
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  font-size: 2rem;
}
.dishes-grid { 
  display: grid;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(75px, 200px)); /* REDUCIMOS el tamaño del grid */
  grid-auto-rows: 1fr;
  gap: 24px;
}
.dishes-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dishes-item__big { 
  grid-area: 1 / 1 / 3 / 3;/* INICIA EN fila 1 y columna 1 / TERMINA EN fila 3 columna 3  */
}
.menu { 
  margin-bottom: 200px;
}
.menu-title { 
  font-size: 2rem;
  color: #333;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 50px;
}
.menu-grid { 
  display: grid;
  gap: 24px;
  justify-content: center;
  grid-template-columns: repeat(5, minmax(100px, 250px));
}
.menu-grid-item { 
  background-color: lightpink;
  padding: 12px;
  border-top-left-radius: 40px;
}
.menu-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 750px) { 
  main { 
    display: grid;
  }
  .hero { 
    grid-template-columns: minmax(300px, 500px);
    justify-content: center;
    grid-auto-rows: 300px;
  }
  .hero-image {
    display: none;
  }
  .hero .info { 
    margin-left: 40px;
  }
  .dishes { 
    margin: 52px;
  }
  .dishes-grid { 
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(50px, 100px));
  }
  .menu-grid { 
    margin: 0 16px;
    margin-bottom: 60px;
    grid-template-columns: repeat(2, minmax(100px, 200px));
    grid-auto-rows: auto;
  }
}

Mi repo del proyecto final

Así quedo:

Les comparto mi proyecto, aunque visualmente se ve igual le he agregado ciertas cosas que mejoran la performance y la experiencia de usuario.

  1. A las imágenes en general las he optimizado para que pesen menos paso de 9.04 MG a 232 KB.
  2. Le he dado una pequeña funcionalidad al botón.
  3. A la imagen más grade le agregué un video que solo se muestra y comienza a cargar si le das clic a la imagen además de que sale una pequeña animación al cargar.
  4. Aplique lazy loading (carga lenta) a las imágenes del Menu Home para que solo carguen momentos antes de que el usuario la vea.
  5. Use persistencia de datos para los like para que independiente de si recargas la página te salga los like que has dado con anterioridad.
    Si deseas probar entra aquí y si quieres ver como lo hice entra al repositorio.

El curso esta bueno, pero lo ideal hubiera sido desarrollar la carta en first mobile y seguir la ruta del curso de desarrollo web y luego escalarla.
Bueno yo lo hice de esa manera siguiendo la ruta.

mi reto, enfocado sobretodo en grid
https://codepen.io/xsrpm/full/wvqPJjG

Es poco, pero es trabajo honesto :'v

Aqui el proyecto final, le puse unas transiciones pequeñas y unos degradados, así como unos bordes y unos íconos para las redes sociales
Página: https://ayrtonfidel9.github.io/food-page/
Repositorio:https://github.com/AyrtonFidel9/food-page

Este es el proyecto con algunos cambios.




Les comparto los cambios que realicé:

Les muestro mi proyecto a escala, hecho de manera responsive:
Les estaré agradecido me regalen una estrella en mi repositorio.
Gracias.
https://github.com/ArielMejia/food-menu-grid

https://cssg-rid-basico.vercel.app/
Acá esta el ejercicio, me mató mucho hacerlo responsive sin mucho código.

Tenía todavía muchas “dudas” sobre éste tema. Gracias por el curso. Mi duda es: el usar minmax, no se rompe cuando el sitio se está adaptando para diferentes dispositivos o medidas?

Lo que yo creo que hay que cambiar es que al reducir el tamaño de la pantalla deberíamos alinear el H1 y el botón al centro (así como el subtittle) y que los márgenes superiores e inferiores son demasiado grandes, por lo cual está bien reducirlos.

Si quieres ver mi proyecto terminado lo puedes hacer aquí

👏👏

Dejo el repo de mi proyecto 😄
https://github.com/papitapapita/grid_exercises

El único cambio que le hice, fue que en viewports pequeños sí se muestre la imagen del hero, pero antes de la sección info.

El resultado de mi proyecto
Le agregué un par de animaciones.

Mobile:

Este es mi resultado, hice algunos cambios como centrar los textos del hero, deje la grilla del hero con cada sección de 1fr y le deje un max-width de 900px entre otros cambios.
Excelente curso.


Si bien este curso se centra en CSS Grid, para la sección del menú podría lograrse un mejor resultado con display Flex.

Por ejemplo, se podría centrar los elementos cuando saltan de línea.

Recomiendo fuertemente a los que siguieron este curso que sigan aprendiendo CSS Grid y que también agreguen flexbox a su caja de herramientas para tomar lo mejor de cada mundo en los momentos oportunos.

Pase lo que pase… nunca dejes de aprender 💚🚀

Les dejo mi proyecto final, basado en Jurassic Park 😃


Proyecto Final
Repositorio


Mobile

Tablet

Laptop

Pc

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;700&display=swap');

body{
    margin: 0;
    padding: 0;
}

*{
    font-family: 'Roboto', sans-serif;
}

main{
    max-width: 1200px;
    margin: 0 auto;
}

.hero{
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 3fr;
    grid-template-rows: 450px;
    border-radius: 50px;
    box-shadow: 5px 5px 5px #aaaaaa;
}

.info{
    align-self: center;
    padding-left:50px ;
    padding-bottom: 25px;
}

.hero-img img{
    width: 100%;
    height: 400px;
    object-fit: contain;

}

.info-title{
    color: #333;
    font-size: 3rem;
    font-weight: bolder;
    margin-bottom: 24px;
}

.info-suntitle{
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.info-button{
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    color: #333;
    background-color: #fb8c00;
    font-weight: bolder;
    padding: 12px 24px;
}

.dishes{
    margin:100px 0;
}

.dishes-title{
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}

.dishes-grid{

    display: grid;
    grid-template-columns:  repeat(4,minmax(75px, 200px));
    grid-auto-rows: 1fr;
    gap: 25px;
    justify-content: center;
}

.dishes-grid img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dishes-item__big{
    grid-area: 1/1/3/3;
    
}

.menu{
    margin-bottom: 50px;
}

.menu-title{
    font-size: 2rem;
    color: #333;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 50px;
}

.menu-grid{
    display: grid;
    gap: 25px;
    justify-content: center;
    grid-template-columns: repeat(5, minmax(150px, 250px));
}

.menu-grid-item{
    background-color: papayawhip;
    padding: 15px;
    border-top-left-radius: 40px;
}

.menu-grid-item img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media  screen and (max-width:1990px) {

    .info-title{
        font-size: 2.5rem;

    }
    
    .info-suntitle{
        font-size: 1.2rem;
     
    }
    
    .info-button{
        font-size: 1rem;
    }
    


}




@media  (max-width:768px) {

    main{
        width: 100%;
    }
    .hero{
        border-radius: unset;
        box-shadow: none;
    }

    .info{
        padding: 0;
        display: flex;
        flex-direction: column;
        
        
    }

    .info-title{
        font-size: 3rem;
        text-align: center;
    }

    .info-suntitle{
        text-align: center;
    }

    .info-button{
        width: 50%;
        align-self: center;
    }
  


    .hero{
        grid-template-columns: minmax(300px, 500px);
        justify-content: center;
    }
    
    .hero-img{
        display: none;
    }

    .dishes-grid{
        grid-template-columns:  repeat(auto-fit,minmax(75px, 150px));
    }

    .menu-grid{

        grid-template-columns: repeat(auto-fit, 140px);
    }


}

@media  (max-width:320px) {

    .hero{
        padding-left: 10px;
        padding-right: 10px;
    }

    .dishes{
        padding-left: 10px;
        padding-right: 10px;
    }

}

Aquí esta mi código y el vinculo al proyecto, lo hice Mobile first y agregue mediaqueries para Tablet y desktop

Código: https://github.com/Yenda09/restaurant_page
Proyecto: https://yenda09.github.io/restaurant_page/

Mis cambios fueron:

  • Eliminé la altura fija del header porque cuando se achica la pantalla queda mucho espacio.

  • Los títulos los puse como primera fila en el grid.

  • Eliminé el auto-fit de dishes y menú y en el media query pasé la grid de 4 columnas a 2 columnas.

  • En el menú a las imágenes les puse un borde inferior derecho redondeado y una pequeña sombra como para dar sensación de botón.

  • Hice que el ancho de dishes coincida con el de menú.

Este fue mi responsive, es poco pero es trabajo honesto XD

Tenemos proyecto terminado 😎 🚀
Repositorio GitHub: https://github.com/iJCode1/CSS_Grid_Basico-Platzi
.
🌐 GitHub Pages: https://ijcode1.github.io/CSS_Grid_Basico-Platzi/proyecto/
.
Vista Desktop:

.
Vista Tablet:

.
Vista Móvil: