No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

1D
12H
48M
25S

Media Queries

25/26
Recursos

Aportes 79

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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!

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;
    }
}

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.

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!

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

Desktop:

Mobile:

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.

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!

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

tremendo curso

驴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.

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

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

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

n

Degranda eres el mejor

profe diego gracias, tremendo curso!

genial鈥odo 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 鈥渄esventaja鈥 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

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

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%;
    }
}```

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 鈥渢rucos鈥 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.

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

Maravillado con este curso y lo aprendido en todo el contenido y transcurso del mismo. Comparto mi proyecto https://ingrafaelmartinez.github.io/blog/

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

Hola compa帽eros. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

Super, terminamos!