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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 79
Preguntas 13
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…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
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%;
}
}```
- 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
✨ 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
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
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!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.