Agregando imagen

Cada vez más independiente. :’)

Así va quedando, agregué un overlay para indicar cuántos likes y comentarios tiene cada post.

no me base en el diseño del video

No se si sirva el comentario, pero pueden evitar la parte de definirle el border-bottom al “h3”, haciendo uso de una etiqueta que dibuja una linea de separación, “hr”

Amigos que tienen problema con el scroll, recuerden quitar de la etiqueta body los estilos que se pasaron a la clase .home-body.

Quedaría así:

body {
font-family:‘Robot Mono’, monospace;
margin: 0;
padding: 0;
}

home-body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

En que momentos es correcto usar una imagen como tag “img” o como background?

Wow no sabía que poniendo un % en el width ayudabas a que la imagen se acomode conforme mueves el tamaño del navegador!🤯

Realice el cambio que dijo Diego pero no me resulto, tuve que agregar un display: content para que me aparezca el scroll. Alguno mas le paso?

Gracias, me ha servido de mucho este curso. Así va quedando mi plantilla! 😃

Así quedó en mi estilo:

Tuve ciertos problemas con las clases y la maquetación de la página web, así que los que hice y les recomiendo, es que ustedes traten de maquetar cada parte y usen la clase como una guía, no solo ir copiando lo que vemos en pantalla, porque al final es una mala práctica, además, cada persona piensa distinto, por lo que cada quien puede solucionar de distintas maneras el mismo problema.

Los curso de Diego Degranda son una exquisitez. Me encanta el enfoque pragmático que imprime en sus enseñanzas, va al grano, se aprende haciendo. Está valiendo la pena cada centavo y cada minuto de inversión.

Haciendo el proyecto mio!

Tratando de hacer el ejercicio por mi cuenta, había caído en cuenta del error del scroll en blogs.
Pensé en hacer cambiar los estilos de todos los que requieran scroll, pero cambiar para que solo la que no necesita scroll lo haga es más fácil 😅

responsive design

Recuerden siempre por buenas practicas, tomar la imagen usar paginas para reducir el tamaño de las mismas, ya que en promedio nuestras imagenes deberian pesar 120kb aprox

la forma de generar scroll es de esta forma
.home-body{
top: 0;
bottom: 0;
right: 0;
left:0;
overflow: scroll;
}

Si a un elemento con grid, le aplicas porcentajes en su tamaño, tomará el porcentaje de la celda en la que esté, lo que hace que se adapte al tamaño de la celda.

La termine ,les dejo el una screenshot y el codigo me encantaria recibir su feedback .Saludos

CSS

.blogs-main{
    display:grid;
}
.blogs-news-container{
    background-color: #e6e9ed;
    padding:0 50px 40px;
}
.blogs-main-new{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows:2fr;
}
.blogs-news-img-container{
    grid-column:1;
}
.blogs-news-img-container img {
    width:85%;
}
.blogs-news-info-container{
    grid-column:2;
}
.blogs-news-info-container p {
    margin-bottom:35px;
}
.blogs-posts-container{
    padding: 0 50px 40px;
}
.blogs-posts-container h3{
    border-bottom:1px solid #cdd2da;
    padding-bottom: 20px ;
    text-align:center;
    
}
.blogs-posts-container div {
    display:grid;
    grid-template-columns: repeat(3,2fr);
    grid-auto-rows: auto;
    gap: 20px;
}
.blogs-posts-container .post-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.blogs-posts-container .post-container img {
    width: 100%;
    align-self: center;
    margin-top: 5px;
}
.blogs-posts-container .post-container a {
    font-size: 12px;
    border: 1px solid #48cfad;
    width: 100px;
    padding: 8px 4px;
    margin:10px 0 3px 10px;
    text-align: center;
}
footer{
    margin-top: 40px;
    border-top: 35px solid #48cfad;
    height: 60px;
    display: flex;
    justify-content: center;
    background-color: #22272d;
}
footer p {
    color: white;
    font-weight: bold;
    align-self: center;
}

Muy buena clase 😃

Momento en el que explica porqué la página no genera scroll. Debido a la posición Fixed que se colocó al body en el home con los valores de top, left, rigth y botto, en cero (0).

Genial cada día más seguro del pensamiento de maquetador CSS!!! 😃 😃

Porque lo maquete diferente, me toca poner el border-bottom en un lugar diferente xd

La imagen es una animación que saque de https://www.pixeltrue.com/ y esta en json

Siento que es mejor y menos enredo generar para el blogs otro css y no trabajar lo en el principal.

Tambien funciona asi
.home-body{
overflow-y: scroll;
scroll-behavior: smooth;
}

Asi va quedando banda

Así va quedando con maquetación MovileFirst
Si hay algo que pueda mejorar les agradezco sus comentarios.

Amigos, tengo un problema, me queda así. ayudenme porfavor.

Excelente profesor

De esta manera evitamos hacer scroll

position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

Me encantaa! Estoy haciendolo con mis fotillos y colores

Sigamos 😄

Muy clara la clase, que buena!

Todo quedando genial!

Igual que los compañeros tenía problemas al principio en la vista blogs, pero siguiendo los pasos indicados en el video al crear la clase en la etiqueta body de index.html y separar las propiedades originales del body hacia esta clase se soluciona el problema.

Excelente.

Genial, gran clase

sigamos aprendiendo 😄

VA QUEDANDO GENIAL

Puliendo detalles.

cerca del final de este gran proyecto 😝

Me gusto esa forma de darle una clase al body, para que solo afecte a nuestra pantalla principal el position: fixed.

joder!!! claro body también es una etiqueta, yo haciendo malabares con mi código.

muy bien, estoy aprendiendo muchos trucos sobre maquetacion!

Perfecto! 😄

Va quedando super… Excelente clase!

Yo tuve con confusión con la clase .home-body pero la solucioné así

.home-body {
    margin: 0;
    padding: 0;
    position: initial;
    font-family: 'Roboto mono', monospace;
}```

Espero que les haya servido

Lo del scroll no me quedo muy claro, debo ejecutarlo en código para ver tal me va.

Me agrada, me grada mucho lo que veo. Voy a practicar lo de las imágenes porque las he colocado es en css y no desde el html. ✅💪👨🏻‍💻🤓📈👍

Interesante. 🤔 En general me provoca algunos dolores de cabeza el alineamiento de las imágenes.