Media Queries

Un curso para reafirmar todo lo aprendido en el camino, establecer nuevos proyectos y por qué no… aprender algo nuevo 🖐🏼

Ufff que bueno el curso, me rompí la cabeza un par de veces para entender como funciona todo pero quedo contento, esto es la sección que mas me gustó 😄

Para la parte de el grid de los blogpost se puede cambiar en el archivo normal el grid container a esto:

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

Así los blogposts van a irse a la columna de abajo sin necesidad de hacer varios media queries

Un muy buen curso, la explicación y el paso a paso son verdaderamente muy constructivos.

Quedo satisfecha.

De los mejores profesores en Platzi!

Buen curso, si quieren aprender más sobre CSS Grid, hay un curso con Leonidas Esteban. Este es mi resultado aplicando MQ a todas las pantallas.

Súper! Yo le agregaría un mq más al igual que en la pagina de blogs a los 600px, para la parte de los proyectos:

@media (max-width: 600px) {
    ...
    .projects-main-container {
        grid-template-columns: 1fr;
    }
}

Comparto mi versión final. Estoy muy satsifecho con el resultado!

Desktop:

Mobile:

Intenté hacer el proyecto con mis conocimiento únicamente y tuve muchos errores, también creo que mi código estuvo bastante sucio. Espero que con la práctica pueda mejorar mi código. 😄

Aquí está mi repositorio y aquí el demo.

Saludos!

Desktop

iPad

Mobile

Que tal, buen dia campeon… muy satisfecho con mi resultado, creo que la gran parte del codigo en css apliique [ display: grid; ], claro que tambien display: flex; asi que dejo mi resultado. por cierto el logo es de prueba para la practica de este blog, la original esta en proceso… saludos champions.

tremendo curso

Dejo mi aporte de esta extension que a servido un monton para visualizar mis media queries
https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

En el caso de la pagina de blogs y de perfil donde tenemos una foto y al lado la descripción tenemos una buena opción y es usar la funcion minmax. De tal forma que la propiedad grid-template: 1fr auto / repeat (auto-fill, minmax(320px, 1fr)) .
Al hacer esto y no asignar ningún espacio al contenido del bloque, ordenándolo bien en el HTML vemos como los valores son autoasignados para cada celda quedando una función responsive!

También tenemos la opción de usar flexbox. estableciendo un min-width: x y un flex-wrap: wrap!

En mi caso como yo hice el proyecto por mi cuenta y solo replique cosas puntuales del curso para aprender esos otros metodos existentes pues al final tuve problemas para hacer los media queries con las propiedad de max-width de 45%, esto lo menciono por si esto le pasara a alguien mas, puede usar este consejo:
No te frustres tambien puedes hacerlo al modificar la cantidad de columnas con las propiedades de grid en caso de que hicieras esa seccion con grid y no es necesario poner lo del 45%. Ademas quiero dejar claro
que la propiedad de grid-row, en mi caso no hacia ninguna diferencia ya que el contenido tomó los rows necesarios automaticamente.

Siguiendo el patrón de mobile first yo ya tenía la mayoría del responsive listo. Diego esta usando Gratefull degradation. Partiendo desde el desktop y arreglando las fallas mientras se va a mobile

super feliz con este curso…repaso de
display:flex
display:grid
display:inline-block y media-queries

siento que utilizando grid area puedes crear breakpoints con una gran facilidad.

Breakpoints

@media screen and (max-width: 768px) {
    
    
    .contact-main-container{
        
        grid-template-areas:    "contact-left"
                                "contact-right";
        
        
    }
    .profile-container{
      
        grid-template-areas:    "profile-img"
                                "profile-description" ;
       
}
    .grid-container{
        grid-template-areas:    "project-1"
                                "project-2"
                                "project-3"; 
}
}

Desktop

Smartphone
Tablet

Smartphone

Me encantan los media queries, son como magia 💫

Muy buen curso, esto definitivamente es de mucha práctica.
A veces me frustra no poder hacer conclusiones proactivamente y depender del video o de averiguaciones en la web pero bueno, es un proceso de aprendizaje y se debe disfrutar y vivir.

Simplemente gracias, muchas dudas resueltas. Mucho por aprender aún. Gracias.

Durisimo bro

Con GRID es posible evitarnos todas las MediaQ, pero claro, esto sigue siendo mas fácil.

¿Como podemos saber que propiedades css por defecto trae cada elemento html?

A mi no me funciona lo que hizo desde el min 6:30. Hay un problema de responsive grave en mi sitio. Ya lo resolveré cuando tome el curso de Responsive Design.

Lo idea hubiera sido empezar el diseño con first mobile y luego escalar.

n

Degranda eres el mejor

profe diego gracias, tremendo curso!

genial…todo muy claro por el profe!!!

Fue un buen curso para practicar todo.
Yo este curso me lo tome de una forma diferente.
Hice todo el proyecto yo solo y solo veía las clases para ver cómo lo hacia diego y para aprender algo nuevo.
Pero aveces no era fácil seguirlo puesto que sus clases no sabia a qué elementos apuntaban en todo momento y solo seguía el video.
Al final creo que lo importante fue darme cuenta que sí he aprendido en estos meses que llevo estudiando.

Les dejo mi repositorio por si gustan regalarme una estrellita 🌟
Gracias Diego por este curso 😄

Increíble curso. Les comparto mi proyecto final, incluye diseño responsivo: MiBlog

¡Qué buen curso!!!

El profe de grande es de los mejores profesores para aprender, se aprende mucho con él.

Muchas gracias profesor Diego! Se agradece las aclaraciones y también los aportes de los compañeros! Gran Comunidad!!

Un curso fenomenal, he tomado más de 80 y este para mi está en el top 10%

La “desventaja” de hacer uno mismo la maquetacion y los estilos, es que se rompen peor de lo que estaba y ya tienes que arreglarlo por tu cuenta, mas no como lo hace diego

Excelente profesor y un curso bastante completo.
A seguir aprendiendo!

Excelente curso

bien, que buen curso

Muy buen curso 😃

Excelente curso! Gracias Diego,eres un crack 👨‍💻

quedó muy bonito nuestro proyecto 😄 Gracias Diego.

Muchas gracias por compartir el conocimiento de una manera tan sencilla. Podria decir que es uno de los mejores de platzi, gracias profe De Granda

Gracias a todos que acolitaron a resolver las dudas!!!

El primer media-querie se puede resolver mejor asi.

@media (max-width: 780px) {

    .blogs-news-container{
        display: block;
    }

    .blogs-news-img-container img{
        width: 100%;
    }

    .post-container {
        max-width: 45%;
    }
}```

yo me quede con lo de la clase anterior asi que trato todo como movil primero asi cuando toque ampliar son poco los cambios que hay que hacer

Proyecto_Final

_

_

• Enlace repositorio de GitHub

• Demo: Pincha aquí

a hacerlo ;_;

Resultado final del curso

• Este es un curso extraordinario donde se ponen en practica los conocimientos de los cursos anteriores y se siguen aprendiendo mas buenas practicas por parte de Diego Degranda.

Comparto el resultado final y el repositorio del proyecto

Repositorio
https://github.com/CarlosRMx/WebSite__BLog

Más que contento de haber atravesado este curso!
Gran aporte informativo y forma de pulir lo aprendido en la ruta.

Te amo Diego De granda, eres el mejor profesor de frontend en platzi y del universo.✨✨✨✨

Un muy buen curso, en el cual se aprenden algunos “trucos” nuevos, pero sobre todo el cual ayuda a reforzar practicando lo aprendido a lo largo de la ruta de desarrollo web.

Excelente curso creciendo cada día mas

media query grid

Apuntes / Notas / Resumen 😊

✨ Hechos en Obsidian con Markdown y subidos a GitHub.

• Notas del curso
• Repositorio del proyecto
• Proyecto en GitHub Page

Porfa,ayudenme a mejorar. Agradezco cualquier comentario. ✌

La buena práctica era comenzar el proyecto desde mobile, pero bueno, podría ser peor. 😅

Mi version del proyecto del curso terminado,
pagina web en github-pages
codigo

Es responsivo sin usar media queries, use algunas cuantas tecnicas con grid y flex para lograrlo hacer responsivo

Les compartido mi resultado:

Blog Personal

Muy bueno!

Gracias Diego, con este curso afianze muchos conocimientos !

Excelente clase! Lo hace ver tan fácil! Debo practicar mas mejorar mi código

Genial

Estupenda explicación instructor Diego, queda claro el funcionamiento del responsive por medio de este proyecto.

Excelente explicación y fluidés al momento de codear

Apenas vengo a entender los media queries! 🤯
Éste curso estuvo genial!

Excelente clase!!

Como siempre con este profe, quede satisfecho con el aprendizaje y el proyecto final!

Con este código es suficiente para hacer responsiva la parte del main news

@media (max-width: 900px){
    .blogs-main-new {
        grid-template-columns: 1fr;
    }

    .blogs-news-info-container {
        grid-column: 1;
    }
}

estupendo 😄 genial el curso 😄

Excelente curso, se aprende bastante!!

Excelente

que bien explicas!!

buen curso 😃

Excelente curso!

Excelente curso!!

Muy buen curso, se aprender nuevas técnicas enfocada en las personas que venimos de 0 conocimientos!

Había visto los Media Queries, pero no estaba seguro de su funcionamiento, ya me quedo muy claro.

Gracias, todo salió perfecto! 😄

Un muy buen curso y guía

Super, terminamos!