Agregando estilos a la página de blog

Tip: Con emmet se puede colocar lorem5 enter y te da el texto simulado con 5 palabras. y asi es mas facil colocar un parrafo con lorem20 por ejemplo.

Me parece que a la hora de llamar el h1 va un article en lugar del section

.blogpost-main-container article h1

Listo! 😛 (Lo hize sin ver los videos xD)

No se me había aplicado el cambio del tamaño de la fuente del H1 y fue por esto:

.blogpost-main-container article h1 {
    font-size: 35px;
}```
Es **article** en lugar de **section**

Saludos, agregué esta línea en el CSS para justificar el texto.

.blogpost-main-container article p{
  text-align: justify;
}```

Yo generando dummy text con lipsum.com y veo que vscode con emmet te deja generarlo escribiendo lorem + tab. Me siento tonto.

en la parte de blogpost-main-container no es section, es article y luego si va el h1…

Así va quedando el proyecto.
Lo hice antes de ver la clase y ahora toca aprender a hacerlo de formas diferentes.
El curso me va gustando mucho por el proyecto que estamos creando! 💚

Saludos!

Este es mi resultado de la pagina del blogpost. Pueden encontrar mi repositorio acá

Así me quedó, sin ver la clase:

No es mucho, pero es trabajo honesto.

Esto les ayudara a trabajar mas rapidpo para la creacion de etiquetas https://docs.emmet.io/cheat-sheet/

perfecto, cada ves toma mas sentido esto y estoy aprendiendo mucho, en verdad el profe diego es bueno!!

Como se supone es un curso de Grid, trato de usarlo en casi todo para ponerlo en práctica y aprender pequeñas y grandes cosas que se puedan hacer con esta ‘herramienta’.

De momento les comparto el demo para que puedan checar y me retroalimentan sus comentarios.

También les dejo el link al repo! 🤪

Les comparto mi página:

Les comparto un pluggin para chrome donde puedes copiar y pegar los colores de cualquier pagina con la ventaja de que guarda un historial de los colores que copies similar a lo que hace diego con el Devtools pero mejor y mas rapido.
Colorzilla

Correccion

.blogpost-main-container article h1 {
  font-size: 35px;```

Muchas gracias por la explicación instructor Diego, ahora siempre tendré en cuenta las dimensiones del elemento padre al momento de utilizar width en % para darle un mejor tamaño al elemento acorde a la página.

Par la sección del blogpost del tamaño de letra la ruta de la clase es .blogpost-main-container div article h1.

Blog terminado

Creo que lo que más se me complica es a la hora de declarar las clases, hay tantas y muchas veces no se cual es el orden en el que debo declararlas, tienen algún consejo?

Corazoncito si te diste cuenta del error del profe Diego en el minuto 8:13 😛

buenisimo la idea gracias

Me gusta tanto el curso!

pudiste haberlo hecho como el profesor o haber dejado:

.blogpost-img-container,.blogpost-main-container{
    padding: 0rem 50px 40px;
}

Como aporte, el profe Diego al final de la clase cambia el tamaño de las letras con .blogpost-main-container section h1, sin embago se lo puede hacer con .blogpost-main-container article h1, o también con .blogpost-main-container div h1!

El Emet para hacer un parrafo con “X” numero de reglones es

lorem*5

donde 5 es el número de reglones.

Muy bueno!

La mejor parte de maquetar es ver cómo lentamente lo que imaginamos va tomando forma 😄

LAs dev tools de los navegadores ayudan resto para depurar el codigo aunque tambien otra interesante practica es ponerle bordes a laos contenedores para ver que sucede " border: 1px solid red;"

Pinta bien ✔✔

Genial , todo va muy bien 😄

Excelente!!!

Sigamos!

Bien

Genial

Genial!

Continuemos!

🤩

Se van notando los avances

Esta es una de esas partes en las mas me gusta, por que va tomando vida, todo lo que imaginas.

Vamos bien! 😄

ESTÁ QUEDANDO GENIAL!!

No tiene un nivel de dificultad grande la section de la página de blog, adicionalmente Diego lo explica muy 👍.

Grande Diego.

Les recomiendo un color picker llamado Instant Eyedropper, es mas rapido y sencillo con ese sofrtware.

Sugerencia de reutilización:
En las páginas de Blogs, Blog & Perfil hay un título con un margin-bottom gris.
Se podría crear una clase especialmente para ese estilo y reutilizarla en cada elemento que la necesite.
Yo la llamaría “title-underline”. ¿Ustedes?

como se hace para que al dar click en un botón se abra en una venta nueva, y no en la misma ventana ?

c

muy bueno, pero le falta un poco de fluidez