Introducción

1

Personalización de Blogs con CSS y HTML5

2

Uso de DevTools en Chrome para Desarrollo Web

Análisis y creación del proyecto

3

Creación de un Blog Personal: Análisis de Diseño y Estructura

4

Estructura y Archivos Básicos para Proyecto Web con HTML y CSS

Creando la página principal

5

Maquetación HTML y CSS para un Blog Personal

6

Estilos CSS para Estructurar y Diseñar un Sitio Web

7

Integración de Iconos de Redes Sociales en HTML y CSS

8

CSS: Estilos y Posicionamiento de Elementos HTML

9

Maquetación y Estilos de Sección en HTML y CSS

10

Posicionamiento y Estilo de Imágenes con CSS

11

Integración de Fuentes Web en Proyectos HTML

12

Estilización de Botones y Texto en HTML y CSS

Creando página de Blogs

13

Maquetación de Páginas Web con HTML y CSS

14

Arquitectura de Clases CSS para Blogs en HTML

15

"Estilos CSS para Estructurar un Blog en HTML"

16

Estilos CSS para Imágenes y Textos en Diseño Web

17

Creación de Botón Genérico en HTML y CSS

18

Diseño y Estilo de Blogs con HTML y CSS

19

Centrado de Contenido con CSS: Uso de Contenedores Responsivos

Creando página de Blog

20

Diseño de Pantalla para Blog con HTML y CSS

21

Estilos CSS para Maquetación de Blogs en HTML

Creando página de perfil

22

Maquetación y Estilo de Páginas Web con HTML y CSS

23

Maquetación de Página de Perfil Web con HTML y CSS

24

Diseño de Página de Perfil con HTML y CSS Responsive

Blog responsivo

25

"Creación de Blogs Responsivos con Media Queries"

Cierre

26

Personalización de Blogs con HTML y CSS

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estilos CSS para Maquetación de Blogs en HTML

21/26
Recursos

¿Cómo aplicar estilos CSS a tu página web?

Darle estilo a una página web no solo es cuestión de estética, sino también de funcionalidad y usabilidad. En esta guía, exploraremos cómo se aplican las clases CSS para estilizar una página HTML existente, especialmente en un entorno de blog. Como programador web en crecimiento, comprender estos conceptos te brindará una base sólida para personalizar y mejorar tus proyectos.

¿Qué es un padding y cómo configurarlo?

El padding en CSS es el espacio interior de un elemento, es decir, la distancia entre el contenido del elemento y su borde. Configurarlo adecuadamente ayuda a mejorar la legibilidad y apariencia de tu sitio.

Ejemplo de padding en CSS:

.blog-container {
    padding: 0px 50px 40px 50px;
}
  • 0px arriba: no hay espacio extra
  • 50px a la derecha: media pantalla
  • 40px abajo: un poco menos que la derecha
  • 50px a la izquierda: igual que la derecha

¿Cómo dimensionar imágenes dentro de un contenedor?

Cuando trabajas con imágenes, es crucial asegurarte de que se ajusten al contenedor de una manera que mantenga la estética de la página. Aquí se muestra cómo establecer un ancho del 100% para que la imagen se ajuste completamente a su contenedor padre.

Ejemplo CSS para imágenes:

.blog-img-container img {
    width: 100%;
}

Esto asegura que tu imagen ocupe siempre todo el ancho disponible en su contenedor.

¿Cómo darle estilo a los títulos en CSS?

Los títulos son uno de los componentes más visuales en una página web, y su estilo suele incluir elementos como bordes y tamaño de fuente. Aquí te explicamos cómo hacerlo.

Ejemplo de estilo en títulos:

.blog-main-title h3 {
    border-bottom: 1px solid #CCC;
    font-size: 20px;
}
  • Borde inferior para separación visual
  • Color #CCC, usando herramientas como el color picker de Chrome para obtener tonos específicos

¿Cómo organizar el texto y contener elementos en un blog?

Es esencial estructurar bien tu contenido para que sea atractivo y fácil de leer. A continuación, se muestra cómo puedes organizar los textos en HTML y CSS.

Ejemplo de párrafos y texto:

<article class="blog-main-content">
    <h1>Título del Blog</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>

CSS para mejorar el texto:

.blog-main-content h1 {
    font-size: 35px;
    margin-bottom: 20px;
}

Esto te ayudará a darle un poco más de dinámica a tu texto, haciendo que el contenido sea más atractivo.

¿Cómo integrar las secciones restantes?

Finalmente, nos aseguramos de que todas las secciones están configuradas correctamente, preparando nuestra página para contener más elementos como una sección de contacto.

  • Revisar el diseño general: Comprobar que todas las partes del blog estén al estilo deseado.
  • Agregar nuevas secciones: La práctica te permitirá cambiar y añadir con mayor facilidad.

Esta es tu oportunidad para experimentar, modificar y personalizar los estilos según las necesidades de tu proyecto. Sigue practicando, y no dudes en expandir y adaptar este conocimiento para todos los trabajos que realices en Platzi. ¡El aprendizaje continuo es la clave!

Aportes 55

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

Si tengo un titulo h prefiero llamarlo directo y no ponerle una clase
¡Así quedamos! Ya casi casi el final de todo este proyecto :) ![](https://static.platzi.com/media/user_upload/image-c7db37ee-85d5-4f51-aa4c-35d27553090a.jpg) Acá el enlace al código por si tienen ganas de echarle un ojito: <https://github.com/iamanyyeei/Blog-Maquetacion-CSS-PLATZI/settings>

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