Estilos en blogs html

Les dejo un juego para refrescar los conocimientos de CSS grid
CSS Grid Garden

Sergio Maximiliano Salvatierra

Rayos no sabia lo del lorem y lo había escrito completo xd 💔 😅

Jesus Manuel Hernandez Diaz

Siento que se complica la vida usando CSS-GRID para todo, cuando usando CSS GRID y Flexbox junto es muchas mas practico, desde mi punto de vista.

Henry Caicedo Velasco

Me confundi un poco. Resulta que en el min 5:55 usa:

Grid-template-column: 2fr 1fr;
Y efectivamente expone en el navegador sus dos columnas. Pero en:
Grid-template-rows: 2fr;
¿Porque la rejilla queda con 4 celdas? No debería poner dos filas en el comando Grid-template-rows:

Sergio Estrella

Profe Platzi

Si quieres practicar algo del CSS Grid que vimos en la clase de hoy, te dejo un juego en el que aprenderás lo que necesitas de CSS Grid de una manera muy interactiva! 😄

Maria Guadalupe Caraveo Mosqueda

Les comparto este link Aqui esta muy bien explicado y trae muy buen contenido con respecto al CSS grid. Espero les ayude y les resuelva sus dudas con este tema.

monica0115

Team display grid!!

paulmanobanda

El menú de los maquetadores CSS:
**Grid **en el desayuno!!!
**Flex **en el almuerzo!!!
**Grid **en la cena!!!
ja ja ja ja ja:)😃😃

Efraín Hernández García

Tengo que repasar mucho de grid

Alejandro Perabá

Encontré una gran herramienta para generar codigo HTML y CSS para construir tus diseños GRID aquí la dejo: Grid Layoutit

Jhonanderson Tellez Parra

Es la primer ocasión en que logro completar un reto al 100%, se que puedo tener muchos errores pero visualmente esta muy parecido a lo que nos pedían.

adjunto imágenes y mi código, agradezco cualquier critica constructiva.

código html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My BLog</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/font/flaticon.css">
</head>
<body>
    <header>
        <section class="header-icons-container">
            <div class="icons">
                <a href=""><span class="flaticon-001-facebook"></span></a>
                <a href=""><span class="flaticon-002-twitter"></span></a>
                <a href=""><span class="flaticon-011-instagram"></span></a>
                <a href=""><span class="flaticon-010-linkedin"></span></a>
                <a href=""><span class="flaticon-008-youtube"></span></a>
            </div>
        </section>
        <nav>
            <section class="nav-logo-container">
                <a href="index.html"><img src="assetts/img/Logo-negro.png" alt="Logo de mi blog"></a>
            </section>
            <section class="profile-link">
                <a href="perfil.html">Sobre mí</a>
            </section>
        </nav>
    </header>
    <main class="main-blogs">
        <section class=" grid-container blogs-news-container">
            <h3>Soy un título</h3>
            <div class="img-blogs-news">
                <img src="./assetts/img/main-news-img.png" alt="imagen principal del blog">
            </div>           
            <div class="blogs-news-info-container">
                <h2>Título del Blogpost</h2>
                <p> It is a long established fact that a reader will be distracted by the
                    readable content of a page when looking at its layout. 
                    The point of using Lorem Ipsum is that it has a more-or-less 
                    normal distribution of letters, as opposed to using 'Content here,
                </p>
                <a href="/" class="button-blogs-news">Leer más</a>
            </div>
        </section>
    </main>
    <br>
    <hr>
    <br>
    <Section class="blogs-post-container">
            <article class="post-container">
                <img src="./assetts/img/post-1.png" alt="imagen del post">
                <p>Título del blog post</p>
                <p>descripsion el post
                   Lorem ipsum dolor sit
                   amet consectetur adipisicing 
                   elit. Suscipit ut a fugiat 
                </p>
                <a href="" class="blogs-button">Leer más</a>
            </article>
            <article class="post-container">
                <img src="./assetts/img/post-1.png" alt="imagen del post">
                <p>Título del blog post</p>
                <p>descripsion el post
                   Lorem ipsum dolor sit
                   amet consectetur adipisicing 
                   elit. Suscipit ut a fugiat 
                </p>
                <a href="" class="blogs-button">Leer más</a>
            </article>
            <article class="post-container">
                <img src="./assetts/img/post-1.png" alt="imagen del post">
                <p>Título del blog post</p>
                <p>descripsion el post
                   Lorem ipsum dolor sit
                   amet consectetur adipisicing 
                   elit. Suscipit ut a fugiat 
                </p>
                <a href="" class="blogs-button">Leer más</a>
            </article>
            <article class="post-container">
                <img src="./assetts/img/post-1.png" alt="imagen del post">
                <p>Título del blog post</p>
                <p>descripsion el post
                   Lorem ipsum dolor sit
                   amet consectetur adipisicing 
                   elit. Suscipit ut a fugiat 
                </p>
                <a href="" class="blogs-button">Leer más</a>
            </article>
            <article class="post-container">
                <img src="./assetts/img/post-1.png" alt="imagen del post">
                <p>Título del blog post</p>
                <p>descripsion el post
                   Lorem ipsum dolor sit
                   amet consectetur adipisicing 
                   elit. Suscipit ut a fugiat 
                </p>
                <a href="" class="blogs-button">Leer más</a>
            </article>
            <article class="post-container">
                <img src="./assetts/img/post-1.png" alt="imagen del post">
                <p>Título del blog post</p>
                <p>descripsion el post
                   Lorem ipsum dolor sit
                   amet consectetur adipisicing 
                   elit. Suscipit ut a fugiat 
                </p>
                <a href="" class="blogs-button">Leer más</a>
            </article>
    
    </Section>
    <footer>
        <section class="footer-bg-green">

        </section>
        <section class="footer-creditos">
            <p>Éste es el primer reto que logro al 100%</p>
        </section>
    </footer>
</body>
</html>

código css


/*  -----------------------blogs------------------- */

.main-blogs {
    background-color: #e6e9ed;
}

.grid-container {
    max-width: 980px;
    margin: auto;
}

.main-blogs .blogs-news-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 2fr;
    padding: 0 50px 40px;
}

.main-blogs .blogs-news-container h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
}

.blogs-news-container .img-blogs-news {
    grid-column: 1;
}

.img-blogs-news img {
    width: 85%;
}

.blogs-news-info-container {
    grid-column: 2;
}

.blogs-news-info-container h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.blogs-news-info-container p {
    margin-bottom: 35px; 
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
    

.blogs-news-info-container .button-blogs-news{
    border: 1px solid #47cfac;
    padding: 10px 15px;
    font-size: 12px;
}

/* --------------------------blogs-post---------------- */

.blogs-post-container {
    width: 80%;
    padding: 0 50px 40px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

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

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

.blogs-button {
    border: 1px solid #47cfac;
    padding: 10px 15px;
    font-size: 12px;
}

/* --------------------------footer--------------------------- */

footer{
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 2fr;
}

footer .footer-bg-green {
    background-color: #47cfac;
  
}

footer .footer-creditos {
    display: flex;
    justify-content: center;
    background-color: black;
    color: white;
}

Wilkins Bernardo Brito Serrano

andreirubio

No entiendo porque grid hace 2 filas cuando escribe el siguiente código

.blogs-news-img-container {

grid-column:1;
}

Alguien me puede ayudar?

Jhon Alexander Romero Gonzaga

y yo aqui haciendo con grid-template-areas, me he olvidado que se puede posicionar de otras maneras en grid :v

Carlos Machado

Hola, vengo de terminar los cursos de CSS GRID y de Grid con flexbox, los recomiendo antes de tomar este. De hecho con el definitivo de html y css junto con el mobile first son una gran guia para poder hacer este proyecto mobile first.

Jose Morales Varon

Para el toogle word wrap en VS CODE pueden utilizar el atajo de letras “ALT+Z”.
De esa forman hacen que su código no rompa el viewport de su editor de texto. 👍

Giselly Romero Nuñez

Los que no han visto el curso de Grid Layout, le recomiendo que vayan a verlo y regresen

MATTHEUV OSORIO CARDONA

 //Pueden utilizar esta forma, es lo mismo que decir 1fr 1fr
grid-template-columns: repeat(2 1fr);

wilantury

El código: grid-template-rows: 1fr; me da los mismo resultados que: grid-template-rows: 2fr;

Miller Camilo Vega Diaz

Interesante uso de Grid, nunca lo habia usado y la verdad es muy util

Victor R Vele

organice mis proyectos lamento no poder compartir pero estoy feliz Muchas gracias

Andrés David Loaiza Zamudio

El inspector ayuda mucho para la detección de esos errores

Gutierrez Diego

Que bien se siente entender de lleno el código, realmente la practica te hace mejorar, el curso de Css Grid vale la pena, grade Leonidas, grande Diego.
💪👍📈🤓👨🏻‍💻

Alejandro Bueno

Alguien me puede ayudar como le puedo dar un espacio medor al titulo
O ajustar el tamano del grid row del titulo

Victor Hugo Ramirez Mancipe

https://gridcritters.com/
aqui puedes practicar grid de una manera muy interesante y a profundida. Igualmente encontraras para practicar muchas otras cosas de css.

Alexander Vinent Peña

para la generación de textos
https://loremipsum.io/

Carlos Rodríguez

Pueden jugar con el inspector el navegador para entender mejor los grid, lo que pasa es que el profe lo coloca algunos valores e ignora otros porque automáticamente se posicionan como está el diseño, pero aquí va el código un poco más específico:

.blogs-main {
    display: grid;
}

.blogs-news-container {
    background-color: #E6E9ED;
    padding: 0 50px 40px;
}

.blogs-main-new {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* No es necesario ya que al colocar grid este detecta la cantidad de items dentro y lo coloca las grillas de acuerdo a la cantidad de columnas */
    /* grid-template-rows: 1fr 5fr; */
}

blogs-main-new h3 {
    grid-column: 1; /* Para indicarle en que grid se va a posicionar */
    grid-row: 1;
}


.blogs-news-img-container {
    grid-column: 1;
    grid-row: 2;
}

.blogs-news-img-container img {
    height: 100px;
}

.blogs-news-info-container {
    grid-column: 2;
    grid-row: 2;
}

.blogs-news-info-container p {
    margin-bottom: 35px;
}

Emmanuel F. González Núñez

https://www.colorzilla.com/

Les comparto esta extensión de Chrome para tomar el color que quieran de cualquier sitio web (como el ColorPicker que usa el profesor). También viene una herramienta para generar gradientes.

Mauricio Ulises Martinez Velez

Gracias a emmet podemos seleccionar la cantidad de palabras que aparece en nuestro “texto dummy”.
Digamos que quieres que sean 7 palabras entonces simplemente pones:

lorem7
y despliega: 
Lorem ipsum dolor, sit amet consectetur adipisicing.

puedes variar la cantidad de palabras a tu gusto.

hmogollan

Excelente repaso para el curso de CSS Grid Layout, aqui se ve en un entorno mas real.

Michelle Verano Osorio

Lo mejor que pudieron haber codificado para CSS es GRID, es simplemente magnifico.

wilantury

Padding: crea márgenes internas del contenedor.

Juan Camilo Castillo Camacho

Partidario del grid.

María Fernanda Duarte Correa

Siempre que se quiera crear un sitio web con muchas columnas o rows, será mejor usar display grid?

Diana Carolina Torres Castaño

Osea qué: grid-template-columns: 2fr 1fr; / declara la proporcion de espacio ocupado por cada columna y el numero de columnas y grid-column: 1; la columna que ocupará determinado contenido. Interesante!!!

Gerardo Lara

hace 4 meses

En la seccion de blogs-news-container, creo que hay un error, esto en realidad si deberia de quedar asi. `<section class="blogs-news-container">

Noticias

Titulo del Blogpost

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, officiis exercitationem! Quia ipsam neque et accusantium debitis! Debitis, commodi iusto vero ex odio voluptates cum soluta hic aliquam nesciunt repellat.

Titulo del Blogpost

Leer mas

` ` </section>` La unica diferencia en el CSS es que el display:grid se debe de poner en el contenedor padre, es el unico cambio `.blogs-news-container{ ``background-color``: #e6e9ed; ``padding``: 0 50px 40px; ``display``: grid; ``grid-template-columns``: 2fr 1fr; /* grid-template-rows: 2fr; */}` `.blogs-main-new{ }`

Gerardo Lara

hace 4 meses

En la seccion de blogs-news-container, creo que hay un error, esto en realidad si deberia de quedar asi. \<section class="blogs-news-container"> \

Noticias\

\ \

Titulo del Blogpost\

\ \

Titulo del Blogpost\

\Leer mas\ \

\</section> La unica diferencia en el CSS es que el display:grid se debe de poner en el contenedor padre, es el unico cambio .blogs-news-container{ *background-color*: #e6e9ed; *padding*: 0 50px 40px; *display*: grid; *grid-template-columns*: 2fr 1fr; /\* grid-template-rows: 2fr; \*/} .blogs-main-new{ }

Yasmil Gonzalez

hace un año

Para el acento de las vocales en el curso de git y github Anita sugiere usar entidades de html : T&iacutetulo

Diego Perales

Para ahorrar tiempo al obtener el color de una página web, les recomiendo Colorzilla una extensión de Chrome que simplifica el trabajo.

jonatan eduardo constantino prado

Captura de Pantalla 2022-01-25 a la(s) 1.46.08 p.m..png

Es más facil mover el grid al seccion anterior

.blogs-news-container {
    background-color: #e6e9ed;
    padding: 0 48px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 2fr;
}
.blogs-main-new {
    grid-column: 1;
}

Alonso Chaves

Les quiero compartir la manera en la que organizo los css para tenerlos separados y que no se haga tanto codigo.

Lo que hice fue hacer un ccs llamado “layout” en el que meto los estilos del navbar, para poder traerme solo eso.
Y después llamo a otro archivo css en el que agrego los estilos específicos de la vista que estamos construyendo (el main)

Cabe destacar que en el html recomiendo llamar primero al layout y después al blogs.css. esto por si queremos realizarle algún cambio especifico por vista podamos caerle encima a los estilos del layyout.

Así se verían los archivos con menos líneas:

Raymondi Alejandro Ramos Vásquez

waos, me gusta grid

Javier Luján Blanco

si necesitan crear un lorem con un numero determinado de parrafos, por ejemplo 5. Simplemente escriban lorem*5 y tabulador. y voila!!
Espero les sea de ayuda!!

Henry Alexander Velásquez Rosas

No se olviden de usar el Auto guardado de VSC. 😊

File
- Auto save

JoaoGarduno

/* BLOGS */
.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{

}
.blogs-news-info-container{
    grid-column: 2;
}
.blogs-news-info-container p{
    margin-bottom: 35px;
}

Luis Montoya Gomez

Yo pensaba hacerle un display:flex a blogs-news-container en lugar del display grid. Tambien se podria hacer asi ¿no?

David Alejandro García Graterón

Excelente clase. Con Grid y flex son buena combinaciones que puede facilitar mucho para poder maquetar un sitio web de forma profesional.

Wandy Rafael Santana Evangelista

Cada clase se aprende un poco mas, como maquetar y usar los estilos mas eficientemente gracias a BEM.

Platzinauta

Recursos interactivos para practicar Flexbox, selectores, grid layout, animaciones y más

Francisco Javier Suarez Verdugo

Excelente cada vez vamos acercándonos al diseño original de la página blogs.

Christian Andres Moreno Ceballos

Genial, Gran clase

julianrobayo

Team display flex

Zahira Rosales

Yo la primer sección la hice utilizando FLEX y la segunda con GRID.

Camilo Ernesto Hurtado Cataño

Les recomiendo este articulo compañeros, https://css-tricks.com/snippets/css/complete-guide-grid/

Wilkins Bernardo Brito Serrano

Incríble, me encanta este proyecto

Germán Moreno

Muy buena aplicación del Grid para ir aprendiendo un uso más real del mismo.

Juanes Sánchez

Recomiendo muchísimo el curso de CSS Grid Layout para entender a profundidad el tema.

VICTOR JAMES BECERRA FLORES

una pregunta tengo mi menu del header donde dice “sobre mi”,
al momento de reducir la pantalla este se divide en do s es decir sobre en la parte de arriba y mi en la parte de abajo pero no quiero qe pase eso solo quiero qe este en una linea como lo hago.

Addi Alberto Salazar Espinosa

Muy bien!

Maricruz Pizaña Solano

Genial!

Fernando Galdós