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

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

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

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

No es mucho, pero es trabajo honesto.

Saludos!

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

Así me quedó, sin ver la clase:

Les comparto mi página:

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

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

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

para hacer el cambio de tamaño del h1 lo correcto es
.blogpost-main-container article h1…me pregunto porque en el video funciona cuando le ponen section? no entendi

• Reto, sin ver la clase antes.

ah tuvo faciilito 😄

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?

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