Creación de una Página Web Responsive con CSS y HTML

Hola compañeros, Le comparto como va quedando Mi Blog, agregando unos recursos extras.

![](

Otra forma de hacer esta sección es haciendo uso del display grid, ya que de esto iría el curso.
En resumen, para lograr el mismo resultado debemos modificar un poco el html y hacer el uso de:

display: grid;
grid-template-columns: repeat(auto-fill, 300px);
grid-gap: 10px;

Adjunto los archivos para que entiendan de una forma mas clara: Enlace

Comparto como va quedando el mio

Comparto como va quedando mi blog.

Para que los blogs quedaran centrados, quité el padding que tenía cada article e hice una clase contenedora de artículos con las siguientes propiedades:

.blogs-posts-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

Resultado:

.
Repositorio en Github

Así va quedando 😃

Aqui esta mi tarea completada!!

Reto cumplido.
Debo decir que lo estoy haciendo igual que el diseño del curso.
Pero hare un proyecto propio para seguir practicando cuando acabé este 😄

Les comparto mi version 😁
.

.

.

En el reto la parte de los posts (articulos) lo hice con grid y preferí utilizar gap para ese espacio de los articulos.

asi es como me quedó:

Así quedó el mío:

Listo, cambio de imagenes exitoso

Que tal campeon… buen dia.

solo display:grid… muy satisfecho con la maquetacion…

claro que le hace falta pulir unos detalles de box-shadow en los cards pero de ahi mas increible…

latest.

Me gusto esta clase 👌

Otra forma de hacer la sección de blogs-posts-container, es utilizando display grid;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;

Así va quedando mi blog.💻

M e quedó así:

esta mejor hacer los blog con grid

/* blog posts seccion */
.blogs-posts-container {
    padding: 0 50px 40px;  
    margin-top: 80px;
}
.blogs-grid-conatiner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 32px;
}
.blog1 {
    grid-column: 1;
}
.blog2 {
    grid-column: 2;
}
.blog3 {
    grid-column: 3;
}
.blogs-posts-container h3 {
    border-bottom: 1px solid #cdd2da;
    padding-bottom: 20px;
    text-align: center;
}
.post-container {
    
    padding-left: 12px;
    
    margin-bottom: 48px;
}
.post-container p {
    margin-bottom: 35px;
}
.post-container img {
    width: 100%;
    height: 320px;
    object-position: center;
    object-fit: cover;
} 

Aquí mi aporte colegas!

• Seguí los consejos de @cosmosoftroot e hice los sihuientes cambios y quedó bien centrado:

/*Agregue esta clase CSS*/
.grid-container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
/*modifique esta clase CSS*/
.blogs-posts-container .post-container {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 50px;
}

Así voy yo por el momento 🫡

Asi quedo mi pagina de blogs

Asi va el proyecto

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
} */
html {
    font-family: 'Roboto mono', monospace;
    font-size: 62.5%;
}
a {
    text-decoration: none;
    display: inline;
    color: black;
}
header {
    width: 100vw;
    height: 140px;
    display: grid;
    grid-template-rows: 1fr 1fr;
}
header .header-icons-container {
    width: 100%;
    height: 50px;
    display: grid;
    background-color: #47cfac;
}
header .header-icons-container .icons {
    width: 300px;
    height: auto;
    display: flex;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}
header .icons span {
    color: white;
}
nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 90px;
}
nav .nav-logo-container {
    margin-left: 50px;
}
nav .nav-logo-container img {
    width: 220px;
    margin-top: 10px;
}
nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px;
}
nav .profile-link a {
    font-size: 1.4rem;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid black;
}
.blogs-main {
    height: 450px;
    width: 100vw;
    display: grid;
    grid-template-columns: 55vw 45vw;
    padding: 0 50px;
    /* justify-content: center; */
    gap: 20px;
    background-color: #e6e9ed;
}
.blogs-main-news {
    margin: 0 70px;
    padding-left: 50px;
    justify-items: center;
    align-items: center;
}
.blogs-main-news h2 {
    margin-top: 15px;
    font-size: 1.9rem;
    font-weight: bold;
}
.blogs-main-news img {
    margin-top: 20px;
    width: 100%;
}
.blogs-main-blog {
    grid-column: 2 / 3;
    padding-right: 70px;
    margin-right: 110px;
}
.blogs-main-blog h2 {
    margin-top: 90px;
    font-size: 1.9rem;
    font-weight: bolder;
}
.blogs-main-blog p {
    margin-top: 30px;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: .1;
    font-weight: 500;
}
.blogs-button {
    font-family: 'Roboto mono', monospace;
    font-size: 1.2rem;
    font-weight: 500;
    height: 40px;
    width: 100px;
    margin: 40px auto;
    border: 1px solid #47cfac;
}
.last-blogposts {
    width: 80vw;
    padding-left: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
}
.last-blogposts h3 {
    display: flex;
    justify-content: center;
    width: 100%;
    grid-column: 1 / 4;
    margin: 5px 0 10px;
    padding: 10px;
    border-bottom: 1px solid black;
}
.last-blogposts article img {
    width: 90%;
}
.post-container {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: baseline;
}
.post-container p {
    margin: 20px 30px;
    font-size: 1.4rem;
}
.post-container .blogs-button {
    margin: 20px 0 40px;
}
footer {
    width: 100%;
    height: 80px;
    background-color: #22272d;
    border-top: 35px solid #47cfac;
    text-align: center;
}
footer p {
    color: white;
    margin-top: 30px;
}

poco a poco se va formando, pequeño avance 😃

si que estoy emocionado raaaaaaaaaaaaaa

Hasta que el profe deja un reto que si puedo hacer xD
(agregar las imágenes correspondientes)

Mi avance hasta el momento

Este es mi trabajo. vamos poco a poco 😃

Creeria que es mucho mejor hacerlo con grid, de hecho si vemos toda la sección de blogs se comporta como una grilla de 3x2, inclusive para usar las propiedades de grid y que sea mas versatil

Como observación crearía un contenedor para la lista de post con display grid y lo dividria en columnas 1fr 1fr 1fr quitándole esa propiedad a los post-container ya que si vemos el contenido no esta alineado con el h3, hay mas espacio del lado derecho que el izquierdo.

😃

Para dar separación entre las columnas y filas a un elemento con display grid, se puede usar la propiedad grid-gap en los estilos al elemento contenedor.
Les dejo un link donde pueden entender mejor lo que estoy diciendo XD. Saludos
https://www.w3schools.com/cssref/pr_grid-gap.asp

las imagenes restantes

.

Mi resultado(con distintas imágenes)

no se si sea la mejor manera, pero fue la unica que logre

si ven en la parte de los 6 post, esta desalineado derecha e izquierda, como lo arregle

estaba asi
.blogs-posts-container .post-container {
display: inline-block;
padding-left: 1rem ;
max-width: 30%;
margin-bottom: 5rem;
}

lo deje asi
.blogs-posts-container .post-container {
display: inline-block;
padding-left: 1rem ;
max-width: 32.5%;
margin-bottom: 5rem;
}

que hice aumente el % hasta que se alineo.

Así vamos

Visita

Repositorio

Es responsive

Esta parte tuvo más tranquila (?)

fue buena idea lo del agregar un borde verde , yo había creado dos cajas contenedoras y cada una con un color diferente, pero así gastas menos lineas de código

Utilizando grid esta es una forma más fácil de hacer la sección de la lista de blogs:.
.
CSS
.
.

.blog-main .blog-list {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
    gap: 2rem;
    padding-left: 8rem;
    padding-right: 8rem;
}

asi vaa mi proyecto gracias a el profe diego, que bien explica!

Ya que el curso solia llamarse CSS Grid, este hubiera sido una clase perfecta para utilizarlo…

Así fue quedandoel mío.

Tamaño iphone 5 : 320 x 568

Tamaño ipad air: 820 x 1180

Tamaño desktop:

Hace muy bien el responsive, lo fui resolviendo como surgían los problemas pero no sé el código pudo haber quedado más simple. Pero ahí va.

main.css

.blogs-main {
    display: grid;
    grid-template-columns: 1fr 12fr 1fr;
    grid-template-rows: auto auto   ;
    position: relative;
}

.blogs-main .blogs-news-container {
    width: 100%;
    height: 400px;
    display: grid;
    grid-column: 1 / 4;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 10fr);
    margin-top: 40px;
    background-color: white;
}
.blogs-main .blogs-news-container .blogs-news-banner{
    width: 100%;
    grid-column: 1 / 11;
    grid-row: 1 / 4 ;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-image: url(../img/blogs-news-banner.jpg);
    background-size: cover;
}
.blogs-news-banner h2 {
    font-family: var(--title);
    font-size: 4rem;
    color: white;
    grid-area: 3 / 7 / 4 / 9;
    margin: 0;
}

.blogs-main .blogs-news-img-container {
    grid-area: 2 / 2 / 10 / 6;
}

.blogs-main .blogs-news-container  img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.blogs-news-info-container {
    grid-area: 4 / 6 / 10 / 11;
    display: flex;
    flex-direction: column;
    padding-left: 5vw;
}
.blogs-post-container h3 {
    margin-bottom: 0;
    font-size: 2rem;
    margin-bottom: 0;
}
.blogs-news-info-container p {
    margin-top: 5px;
    margin-right: 20px;
    font-weight: 300;
    font-size: 1.2rem;
}
.blogs-button {
    width: 100px;
    padding: 6px 10px;
    background-color: var(--light-prim-color);
    font-family: var(--body);
    font-weight: bold;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
}
.blogs-button a {
    color: white;
    font-weight: 600;
}

.blogs-post-container {
    grid-column: 2 / 3; 
    margin-top: 30px;
}
.blogs-post-container h3 {
    font-size: 3rem;
    margin-left: 40px;
}
.blogs-post-container p {
    font-size: 1.2rem;
}

.blogs-post-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.blogs-post-container .post-container{
    width: 220px;    
    padding: 40px 10px;
}
.blogs-post-container .post-container .post-container--title {
    font-weight: 700;
    font-size: 1.5rem;
}
.blogs-post-container .post-container img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.post-button {
    align-self: baseline;

}

Y estos son mis media queries

420 px

.blogs-post-container .post-container{
    width: calc(50% - 5vw);    
    padding: 40px 10px;
}
.blogs-post-container .post-container img {
    height: 30vw;
    max-height: 200px;
}	

900 px

.blogs-post-container .post-container{
    width: 30%;    
    padding: 40px 10px;
}

Se podría haber utlizado un grid con 3 columnas en lugar del viejo inline-block.

Buena clase

Como van en el momento, construido Mobile-First

Les dejo un secreto, para no tener que estar copiando pegando seleccionando etc etc etc, vayan a la parte de arriba de vscode donde dice SELECCION , se les despliega un menu con un monton de funciones como poder sacar varias barras y poder escribir en varias lineas de forma simultanea!

Para ahorrarse tener que pixelear para ver el color que es, en el curso de ResponsingDesing ensenyan, puedes crear variables en el :root de los colores en css así

:root {
    --verde-cool: #5fc6a6;
    --grey-saturated: #e6e9ed;
    --petter: #cdd2da;
}

y luego las vas llamando, ejemplo

.blogs-news-container {
    background-color: var(--grey-saturated);
    padding: 0 50px 50px;
}

… o por ejemplo

.blogs-button {
    border: 1px solid var(--verde-cool);
    padding: 10px 15px;
    font-size: 12px;
}

Comparte en los comentarios cómo te va quedando

Necesito tomar cursos de diseño x2 jasjasjas

😃 Este curso me esta ayudando mucho 😄 excelente profesor

Hi five mental 🖐🖐

les comparto mi solicion por si tienes dudas

.blogs__button {
    border: 1px solid var(--secundary-color);
    padding: 10px 15px;
    font-size: 12px;
}

.blogs__button:hover {
    color: var(--primary-color);
    background-color: var(--header-text);
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 30px;
    justify-content: center;
}

.post__container {
    height: 100%;
}

.grid__container .post__container {
    padding: 5px;
}

.grid__container .post__container p {
    margin-bottom: 35px;
}

.grid__container .post__container img {
    width: 100%;
}

footer {
    width: 100%;
    height: 80px;
    background-color: #22272d;
    border-top: 35px solid var(--primary-color);
}

footer p {
    color: blanchedalmond;
    margin: 10px 10px;
    text-align: center;
} 

comparto como quedo el mio

.blogs-posts-container .post-container {
    display: inline-block;
    padding-left: 10px;
    max-width: 32.5%;
    margin-bottom: 50px;
}

.blogs-posts-container .post-container p {
    margin-bottom: 35px;
}

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

.blogs-posts-container .post-container img + p {
    font-weight: bold;
    padding-top: 15px;
    height: 36px;
}

.blogs-posts-container .post-container p + p {
    height: 130px;
}

footer {
    width: 100%;
    height: 80px;
    background-color: #22272D;
    border-top: 30px solid #47cfac;
}

footer p {
    color: white;
    text-align: center;
    padding-top: 15px;
}

dato curioto xD

inline-block, un curso de CSS Grid básico… clase 18, casi no hay presencia de grid solo para algunas cosas y diría que casi a la fuerza.

Asi me va quedando…

Sin duda grid facilita la vida

Muy práctico el curso.

Que agradable al momento de hacer un solo cuadro y replicarlo después en las veces que necesites, ese momento se llama felicidad…
✅📈🤣🤓👨🏻‍💻💪

Mi código lo hice distinto a la clase pero el resultado fue el mismo a mi parecer

Vamos por más 😄 ya casi está!

Grandisima clase

Sigamos 😄

excelente aunque si veo gracias a mis compañeros el detalle de la alineacion de los post

Excelente hasta el momento. Muy práctico el curso.

estupendo sigamos 😄

Solo con el display: inline-block; y el max width: 30% logró colocar todos los <article> alineados sin necesidad de crear contenedores para los 3 elementos en fila, wow. Me tomaba mucho tiempo con display flex y hacer justify content: space-between de los containers.

Ya tomó la forma. A detallar nada más.

Yo lo hice con flex y flex wrap, creo que es más rápido.

Reto cumplido

![](

Muy buena clase!

Excelente 😄

me salio asi, aunque en cada articulo si varia el tamanio del contenido de la etiqueta “p”, varian las posiciones. Como lo corrijo?

Falta poco 😊

![](

Listo!!! 😃

ya casi queda 🤠🤠🤠🤠********

Yayyyyyyyyy…😃