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.
Introducción
Personalización de Blogs con CSS y HTML5
Uso de DevTools en Chrome para Desarrollo Web
Análisis y creación del proyecto
Creación de un Blog Personal: Análisis de Diseño y Estructura
Estructura y Archivos Básicos para Proyecto Web con HTML y CSS
Creando la página principal
Maquetación HTML y CSS para un Blog Personal
Estilos CSS para Estructurar y Diseñar un Sitio Web
Integración de Iconos de Redes Sociales en HTML y CSS
CSS: Estilos y Posicionamiento de Elementos HTML
Maquetación y Estilos de Sección en HTML y CSS
Posicionamiento y Estilo de Imágenes con CSS
Integración de Fuentes Web en Proyectos HTML
Estilización de Botones y Texto en HTML y CSS
Creando página de Blogs
Maquetación de Páginas Web con HTML y CSS
Arquitectura de Clases CSS para Blogs en HTML
"Estilos CSS para Estructurar un Blog en HTML"
Estilos CSS para Imágenes y Textos en Diseño Web
Creación de Botón Genérico en HTML y CSS
Diseño y Estilo de Blogs con HTML y CSS
Centrado de Contenido con CSS: Uso de Contenedores Responsivos
Creando página de Blog
Diseño de Pantalla para Blog con HTML y CSS
Estilos CSS para Maquetación de Blogs en HTML
Creando página de perfil
Maquetación y Estilo de Páginas Web con HTML y CSS
Maquetación de Página de Perfil Web con HTML y CSS
Diseño de Página de Perfil con HTML y CSS Responsive
Blog responsivo
"Creación de Blogs Responsivos con Media Queries"
Cierre
Personalización de Blogs con HTML y CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Estilos CSS para Maquetación de Blogs en HTML
21/26Recursos
¿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:
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 😛
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 :)
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 ?
muy bueno, pero le falta un poco de fluidez
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?