Un curso para reafirmar todo lo aprendido en el camino, establecer nuevos proyectos y por qué no… aprender algo nuevo 🖐🏼
Introducción
Lo que aprenderás sobre maquetación en CSS
Chrome Devtools
Análisis y creación del proyecto
Diseño del proyecto
Setup del proyecto
Creando la página principal
Arquitectura del header en HTML
Estilos en el header
Agregando íconos
Agregando imágenes al header
Manejo de Grid para posicionar contenedores
Manejo de imágenes de Background
Agregando fuentes
Terminando el Home
Creando página de Blogs
Blog page
Manejo de clases
Estilos en blogs html
Agregando imagen
Estilos del botón
Trabajando la sección de post
Grid Container
Creando página de Blog
Crear la pantalla de blog
Agregando estilos a la página de blog
Creando página de perfil
Sección de contacto
Maquetando perfil HTML
Manejando estilos en la página de perfil
Blog responsivo
Media Queries
Cierre
Cierre del curso
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
How to make our project responsive?
Making a project responsive is essential to ensure that it looks good on any device, whether it is a phone, a tablet or a computer. Through the use of CSS media queries we can achieve a design that adapts to different screen sizes.
What are media queries?
Media queries are a CSS technique that allows us to apply conditional styles based on device-specific characteristics, such as screen width.
In this project, we start by creating an additional CSS styles file to handle our media queries.
/* Styles.css file */@media only screen and (max-width: 900px) { /* Styles for screens with max-width 900px */}
@media only screen and (max-width: 600px) { /* Styles for screens with max-width 600px */}How to configure the media queries?
Once the CSS style file is set up, it must be incorporated into the project with a link in the HTML so that it can be loaded.
<link rel="stylesheet" href="path/to/media-queries.css">Thus, the media queries will be applied only when the conditions specified in each of the code blocks are met.
How to adapt the layout of the elements?
The next step is to change the layout of the elements according to the screen size. Taking the example of the post section:
/* Media query for screens withmax-width 900px */@media only screen and (max-width: 900px) { .blogsMain { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); } }
.imageContainer { grid-row: 2; }
.contentText { grid-row: 3; } }}This switches the layout from horizontal to vertical layout on smaller screens, optimizing the use of the available space.
How to ensure that all elements are readable?
To ensure readability and a clean appearance of the content on different devices, it is crucial to adjust both the size of the texts and the spacing between elements.
Additional settings for readability
You can adjust the maximum dimensions of the containers to ensure that the content looks good without creating too much unused white space:
/* Media query for max 600px screen width */@media only screen and (max-width: 600px) { .postContainer { max-width: 95%; } }}Modifying these values helps create a more fluid design that sits well on different devices.
What considerations to keep in mind when customizing?
Finally, to make the project not only responsive, but also stylistically your own, it is essential to customize the visual elements:
- Add personal information: Enter your projects, photos and personal details.
- Update the visual elements: Configure images and texts to reflect your own style and brand.
- Integrate your social media: Make sure links to your social media profiles are updated and accessible from any device.
By following these steps, you will be able to create a professional, responsive version of your project that looks great on any device. Start taking care of your new blog today!
Contributions 86
Questions 13
Sort by:
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.
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
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.
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:
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!
Want to see more contributions, questions and answers from the community?