No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Estilos en blogs html

15/26
Recursos

Aportes 59

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

Rayos no sabia lo del lorem y lo hab铆a escrito completo xd 馃挃 馃槄

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.

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:

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! 馃槃

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.

Team display grid!!

El men煤 de los maquetadores CSS:
**Grid **en el desayuno!!!
**Flex **en el almuerzo!!!
**Grid **en la cena!!!
ja ja ja ja ja:)馃槂馃槂

Tengo que repasar mucho de grid

Encontr茅 una gran herramienta para generar codigo HTML y CSS para construir tus dise帽os GRID aqu铆 la dejo: Grid Layoutit

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

.blogs-news-img-container {

grid-column:1;
}

Alguien me puede ayudar?

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

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.

Para el toogle word wrap en VS CODE pueden utilizar el atajo de letras 鈥淎LT+Z鈥.
De esa forman hacen que su c贸digo no rompa el viewport de su editor de texto. 馃憤

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

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

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;
}

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

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

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

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

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.
馃挭馃憤馃搱馃馃懆馃徎鈥嶐煉


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

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

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

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;
}

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.

https://www.colorzilla.com/

Gracias a emmet podemos seleccionar la cantidad de palabras que aparece en nuestro 鈥渢exto 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.

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

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

Padding: crea m谩rgenes internas del contenedor.

Partidario del grid.

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

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!!!

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

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

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;
}

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 鈥渓ayout鈥 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:

waos, me gusta grid

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!!

No se olviden de usar el Auto guardado de VSC. 馃槉

  • File
    • Auto save
/* 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;
}

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

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

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

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

Genial, Gran clase

Team display flex

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

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

Incr铆ble, me encanta este proyecto

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

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

una pregunta tengo mi menu del header donde dice 鈥渟obre 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.

Muy bien!

Genial!

Super