Debido a que usamos grid para crear todas las grillas de nuestro proyecto, resulta muy sencillo hacerlo responsivo.
Lo primero es revisar sección por sección para evaluar los cambios que podemos hacer en cada una. Es decir, redimensionar el ancho de la página para ver en qué puntos se rompe el contenido.
Encabezado
Notamos que el texto se rompe al reducir el ancho de la página. Para ello vamos a modificar su grid-template-columns.
Vamos a la clase que contiene sus estilos .hero.
Cambiamos el valor de su grid-template-columns, de 2fr a ***minmax(300px, 2fr)***.
Como vemos, la caja no se adapta. Al redimensionarla se genera un scroll que es bastante molesto para el usuario. Para solucionar este problema, podemos usar auto-fit y que así las cajas se vayan acomodando automáticamente.
Hemos terminado nuestro proyecto usando CSS Grid para resolver todos las grillas.
¿Verdad que es muy fácil? Recuerda que puedes cambiar todas las características como tu quieras y hacerlo un proyecto completamente nuevo y diferente. De hecho, te invito a hacerlo. Ya que la mejor forma de aprender es experimentando por ti mismo. ¡Éxitos!
Contribución creada por: José Miguel Ventimilla (Platzi Contributor).
Aportes 79
Preguntas 8
Ordenar por:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
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.
Les comparto mi proyecto, aunque visualmente se ve igual le he agregado ciertas cosas que mejoran la performance y la experiencia de usuario.
A las imágenes en general las he optimizado para que pesen menos paso de 9.04 MG a 232 KB.
Le he dado una pequeña funcionalidad al botón.
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.
Aplique lazy loading (carga lenta) a las imágenes del Menu Home para que solo carguen momentos antes de que el usuario la vea.
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.
Voila!!! Aqui el proyecto ya por completo terminado, lo deje lo mejor que pude!
HTML
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Proyecto de la clase</title><linkrel="stylesheet"href="./style.css"></head><body><main><sectionclass="hero"><divclass="info"><h1class="info-title">Check the <br> best food</h1><pclass="info-subtitle">Lorem ipsum, dolor sit amet </p><buttonclass="info-button">Book a table</button></div><imgclass="hero-image"src="./imagenes/hero.png"alt="Plato de pasta con vegetales"></section><sectionclass="dishes"><h2class="dishes-title">Our Services</h2><divclass="dishes-grid"><imgclass="dishes-item dishes-item__big"src="./imagenes/video.png"alt="video sobre la comida"><imgclass="dishes-item"src="./imagenes/dish1.png"alt=""><imgclass="dishes-item"src="./imagenes/dish2.png"alt=""><imgclass="dishes-item"src="./imagenes/dish3.png"alt=""><imgclass="dishes-item"src="./imagenes/dish4.png"alt=""></div></section><sectionclass="menu"><h2class="menu-title">Home menu</h2><divclass="menu-grid"><divclass="menu-grid-item"><imgsrc="./imagenes/plate1.png"alt=""></div><divclass="menu-grid-item"><imgsrc="./imagenes/plate2.png"alt=""></div><divclass="menu-grid-item"><imgsrc="./imagenes/plate3.png"alt=""></div><divclass="menu-grid-item"><imgsrc="./imagenes/plate4.png"alt=""></div><divclass="menu-grid-item"><imgsrc="./imagenes/plate5.png"alt=""></div></div></section></main></body></html>
¿No les molesta que el código compartido no sea el mismo que el código que se generó durante las clases de la profe? Porque a mí sí me causó confusión.
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
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Restaurant</title><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"rel="stylesheet"><linkrel="stylesheet"href="./projectClass.css"></head><body><main><sectionclass="hero"><divclass="info"><h1class="info-title">Check the<br/>best food</h1><pclass="info-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor neque sed turpis bibendum dapibus.</p><buttonclass="info-button">Book a table</button></div><figureclass="hero-image"><imgsrc='https://i.ibb.co/R0xYKtR/hero.png'alt="Dish of pasta with neapolitan sauce and vegetables"></figure></section><sectionclass="services"><h2class="services-title">Our services</h2><divclass="dishes"><imgclass="dishes-image dishes-image__big"src="https://i.postimg.cc/k5qHRc5H/video.png"alt="video of pasta dishes being served"><imgclass="dishes-image"src="https://i.postimg.cc/qR0pRyfB/dish1.png"alt="bowl of vegetables with rice and avocado"><imgclass="dishes-image"src="https://i.postimg.cc/Wp5sNd5j/dish2.png"alt="Avocado and egg toast"><imgclass="dishes-image"src="https://i.postimg.cc/hPwgmHF5/dish3.png"alt="asparagus with tomato and butter"><imgclass="dishes-image"src="https://i.postimg.cc/MG08hHnC/dish4.png"alt="eggs and guacamole toast "></div></section><sectionclass="menu"><h2class="menu-title">Home menu</h2><divclass="plates"><divclass="plates-grid-item"><imgsrc="https://i.postimg.cc/15g1yJgc/plate1.png"alt="pasta with neapolitan sauce and vegetables"></div><divclass="plates-grid-item"><imgsrc="https://i.postimg.cc/cH1P2my3/plate2.png"alt="pasta with broccoli and carrot"></div><divclass="plates-grid-item"><imgsrc="https://i.postimg.cc/rs3bd2dG/plate3.png"alt="pesto pasta"></div><divclass="plates-grid-item"><imgsrc="https://i.postimg.cc/Fsk8MzqT/plate4.png"alt="pasta with avocado and corn"></div><divclass="plates-grid-item"><imgsrc="https://i.postimg.cc/rw63Mc2M/plate5.png"alt="bowl of chicken, tomato and carrots"></div></div></section></main></body></html>
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í
Primero debemos trabajar en mobile, luego para tablet y desktop. De lo contrario nos complicamos la vida.
Además debemos usar archivos independientes, uno para mobile, tablet y desktop.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Food</title><linkrel="stylesheet"href="style.css"><linkrel="preconnect"href="https://fonts.googleapis.com" /><!-- Font Open Sans --><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;800&display=swap"rel="stylesheet"><!-- Font Awesome 4 Icons --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><main><sectionclass="principal"><divclass="description"><divclass="info"><h1>Check The
<br>Best Food
</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi corrupti libero aperiam nihil magni perspiciatis ab quis debitis! </p><button>
Book a table
<iclass="fa fa-long-arrow-right"></i></button></div><imgclass="info-img"src="https://i.postimg.cc/zD21m9fG/hero.png"alt="Plato de pasta con salsa y verduras"></div></section><sectionclass="our-services"><h2>OUR SERVICES</h2><divclass="dishes"><imgclass="video-img"src="https://i.postimg.cc/k5qHRc5H/video.png"alt="Video of pasta dishes being served"><divclass="dish dish1"><p>26$</p><imgclass="dish-img"src="https://i.postimg.cc/qR0pRyfB/dish1.png"alt="Bowl of vegetables with rice and avocado"></div><divclass="dish dish2"><p>26$</p><imgclass="dish-img"src="https://i.postimg.cc/Wp5sNd5j/dish2.png"alt="Avocado and egg toast"></div><divclass="dish dish3"><p>26$</p><imgclass="dish-img"src="https://i.postimg.cc/hPwgmHF5/dish3.png"alt="Asparagus with tomato and butter"></div><divclass="dish dish4"><p>26$</p><imgclass="dish-img"src="https://i.postimg.cc/MG08hHnC/dish4.png"alt="Eggs and guacamole toast"></div></div></section><sectionclass="home-menu"><h2>Home Menu</h2><divclass="menus"><divclass="menu menu1"><iclass="fa fa-heart fa-lg"onclick="toggleLike(this)"></i><imgclass="menu-img"src="https://i.postimg.cc/15g1yJgc/plate1.png"alt="Pasta with Neapolitan sauce and vegetables"></div><divclass="menu menu2"><iclass="fa fa-heart fa-lg"onclick="toggleLike(this)"></i><imgclass="menu-img"src="https://i.postimg.cc/cH1P2my3/plate2.png"alt="Pasta with broccoli and carrot"></div><divclass="menu menu3"><iclass="fa fa-heart fa-lg"onclick="toggleLike(this)"></i><imgclass="menu-img"src="https://i.postimg.cc/rs3bd2dG/plate3.png"alt="Pesto pasta"></div><divclass="menu menu4"><iclass="fa fa-heart fa-lg"onclick="toggleLike(this)"></i><imgclass="menu-img"src="https://i.postimg.cc/Fsk8MzqT/plate4.png"alt="Pasta with avocado and corn""></div><divclass="menu menu5"><iclass="fa fa-heart fa-lg"onclick="toggleLike(this)"></i><imgclass="menu-img"src="https://i.postimg.cc/rw63Mc2M/plate5.png"alt="Bowl of chicken, tomato and carrots"></div></div></section></main><script>functiontoggleLike(button) {
button.classList.toggle("orange");
}
</script></body></html>
Les dejo mi proyecto con cambios en el hero y el menú para la versión responsive, sobretodo el menú lo adapte a flexbox, acá es donde se ve lo valioso de combinar flex y grid.
Saludos y espero que alguno pueda aprender algo interesante de mi proyecto.
El curso esta chevere, pero después de intentarlo como sugiere Estefany aquí, me quedo con lo aprendido en el curso de maquetación MobileFirst de Diego Granda, si a alguien que este realizando este curso le sirve la sugerencia 😃
Hola a todos, desde que comenzamos el proyecto lo hice con el principio de mobile first ya que es una buena práctica. También agregué un scroll horizonal en la parte del menu. Aquí estan los links del repo; como también del pequeño video que grabé para que vean la parte del scroll horizontal.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"rel="stylesheet"><linkrel="stylesheet"href="style.css"><title>Reto Clase 8</title></head><body><main><sectionclass="hero"><divclass="info"><h1class="inf-title">Check the <br>best food</h1><pclass="info-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, alias!</p><buttonclass="info-button">Book a table</button></div><imgclass="hero-image"src="./assets/hero.png"alt="Plato de pasta con vegetables"></section><sectionclass="dishes"><h2class="dishes-title">Our services</h2><divclass="dishes-grid"><imgclass="dishes-item dishes-item__big"src="./assets/video.png"alt="Una mesa con platos de pasta"><imgclass="dishes-item"src="./assets/dish1.png"alt=""><imgclass="dishes-item"src="./assets/dish2.png"alt=""><imgclass="dishes-item"src="./assets/dish3.png"alt=""><imgclass="dishes-item"src="./assets/dish4.png"alt=""></div></section><sectionclass="menu"><h2class="menu-title">Home menu</h2><divclass="menu-grid"><divclass="menu-grid-item"><imgsrc="./assets/plate1.png"alt="Plato de pasto con salsa y vegetables"></div><divclass="menu-grid-item"><imgsrc="./assets/plate2.png"alt="Plato de pasto con salsa y vegetables"></div><divclass="menu-grid-item"><imgsrc="./assets/plate3.png"alt="Plato de pasto con salsa y vegetables"></div><divclass="menu-grid-item"><imgsrc="./assets/plate4.png"alt="Plato de pasto con salsa y vegetables"></div><divclass="menu-grid-item"><imgsrc="./assets/plate5.png"alt="Plato de pasto con salsa y vegetables"></div></div></section></main></body></html>
Les comparto el link del repositorio, el cual también pueden ver en live Repositorio
También de un curso realizado anteriormente comparto este aporte de otro compañero de esta extensión que nos permite visualizar varias pantallas de dispositivos móviles al tiempo Responsive Viewer
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.