Hola compañeros, Le comparto como va quedando Mi Blog, agregando unos recursos extras.
Introducción
CSS: Personalización de un Blog desde Cero
Depuración de Errores con Herramientas de Desarrollo en Chrome
Análisis y creación del proyecto
Creación de un Blog Personal con HTML y CSS
Creación de un Blog con HTML y CSS Desde Cero
Creando la página principal
CSS aplicado: Maquetado y estilos para blogs personales
Diseño Avanzado de HTML y CSS para Interfaces Modernas
Diseño de Iconos CSS: Guía Completa para Principiantes
Posicionamiento y Estilos de Contenedores con CSS
Estilos CSS: Flexbox y Grid en Diseño Web
Fundamentos de CSS: Uso de Imágenes de Fondo
Estilos CSS para Diseño Web Moderno
Guía CSS: Estiliza tu Página Web paso a paso
Creando página de Blogs
Diseño de Páginas Web con HTML y CSS Básico
Manejo Avanzado de Clases CSS en Proyectos Web
Estadísticas y Gráficas con Python
Estilo y Diseño de Artículos en CSS: Colocación en Columnas
Diseño de Botones CSS con Bordes y Padding
Creación de una Página Web Responsive con CSS y HTML
Creación de contenedores CSS para centrar contenido en páginas web
Creando página de Blog
Creación de Pantallas Web con HTML y CSS
Estilos CSS Avanzados: Organización y Diseño Profesional
Creando página de perfil
Creación de Componentes Flexibles en CSS
Diagramas de Flujo en Gestión de Proyectos
CSS: Diseña páginas web responsivas
Blog responsivo
Diseño Web Responsivo con Media Queries en CSS
Cierre
Técnicas de Personalización en HTML y CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Completar la página de un blog puede parecer una tarea ardua, pero con algunos pasos metódicos, podrás lograrlo rápidamente. En este contenido, te guiaré sobre cómo abordar las etapas finales de la creación de un blog, añadiendo texto, imágenes y estilos, clonando elementos y ajustando el diseño para obtener un resultado funcional y atractivo.
Para comenzar, lo esencial es darle contenido a cada artículo. Primero, debes añadir textos de prueba conocidos como Lorem Ipsum para obtener una idea de cómo se verá y ocupará el espacio visualmente el contenido.
<!-- Ejemplo de estructura básica de un artículo -->
<article>
<h3>Título del Blog</h3>
<p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
Es importante finalizar un artículo completamente antes de clonarlo para los otros, asegurando que tanto texto como imágenes y estilos sean correctos.
Es esencial definir la estructura de tu HTML para que los elementos se comporten de manera coherente y se acomoden correctamente. Usando CSS, puedes transformar tus contenedores para que se dispongan en líneas horizontales, lo que facilitará la interacción entre ellos.
.blog-container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.blog-item {
flex: 1 1 30%;
margin-bottom: 50px;
}
p {
margin-bottom: 35px;
}
La correcta inclusión y tamaño de las imágenes es primordial para que el diseño no se desmorone visualmente. Una imagen debe ajustarse al 100% del contenedor que ya tiene dimensiones definidas.
.post-image {
width: 100%;
}
Agrega la imagen correspondiente desde tu carpeta de recursos, asegurándote de respetar la ruta definida.
<img src="img/post1.jpg" alt="Post Image">
El footer es una parte crucial ya que da cierre al diseño visual de la página. Defínelo para ocupar el 100% del ancho de la página y aplícale un color de fondo y un borde superior estilizado para hacerlo destacar.
footer {
width: 100%;
height: 80px;
background-color: #333;
border-top: 5px solid #4CAF50;
text-align: center;
}
footer p {
color: #fff;
margin: 30px 0;
}
Añade el texto del footer, estilo que debería alinearse perfectamente.
Una vez completado un artículo con su título, imagen y texto, clona el artículo necesario. Adicionalmente, cambia las imágenes para cada sección diferente del blog y ajusta cualquier aspecto visual restante.
Tu misión ahora será personalizar las imágenes de cada sección del blog. Para la próxima sesión, prepararemos la página de cada blog. Cuando el usuario haga click en "leer más", queremos asegurarnos de dirigirlos al artículo completo expandido. Aprenderás los pasos para crear estas funcionalidades.
¡Continúa aprendiendo y poniendo en práctica estas habilidades para crear una experiencia de usuario fluida y atractiva! Te espero en la próxima clase.
Aportes 119
Preguntas 13
Hola compañeros, Le comparto como va quedando Mi Blog, agregando unos recursos extras.
;
grid-gap: 10px;
Adjunto los archivos para que entiendan de una forma mas clara: Enlace
Comparto como va quedando el mio
Comparto como va quedando mi blog.
Para que los blogs quedaran centrados, quité el padding que tenía cada article e hice una clase contenedora de artículos con las siguientes propiedades:
.blogs-posts-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
Resultado:
Así va quedando 😃
Aqui esta mi tarea completada!!
Reto cumplido.
Debo decir que lo estoy haciendo igual que el diseño del curso.
Pero hare un proyecto propio para seguir practicando cuando acabé este 😄
Les comparto mi version 😁
.
.
.
En el reto la parte de los posts (articulos) lo hice con grid y preferí utilizar gap para ese espacio de los articulos.
asi es como me quedó:
Así quedó el mío:
Listo, cambio de imagenes exitoso
Que tal campeon… buen dia.
solo display:grid… muy satisfecho con la maquetacion…
claro que le hace falta pulir unos detalles de box-shadow en los cards pero de ahi mas increible…
latest.
Me gusto esta clase 👌
Otra forma de hacer la sección de blogs-posts-container, es utilizando display grid;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
Así va quedando mi blog.💻
M e quedó así:
esta mejor hacer los blog con grid
/* blog posts seccion */
.blogs-posts-container {
padding: 0 50px 40px;
margin-top: 80px;
}
.blogs-grid-conatiner {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 32px;
}
.blog1 {
grid-column: 1;
}
.blog2 {
grid-column: 2;
}
.blog3 {
grid-column: 3;
}
.blogs-posts-container h3 {
border-bottom: 1px solid #cdd2da;
padding-bottom: 20px;
text-align: center;
}
.post-container {
padding-left: 12px;
margin-bottom: 48px;
}
.post-container p {
margin-bottom: 35px;
}
.post-container img {
width: 100%;
height: 320px;
object-position: center;
object-fit: cover;
}
Aquí mi aporte colegas!
/*Agregue esta clase CSS*/
.grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/*modifique esta clase CSS*/
.blogs-posts-container .post-container {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 50px;
}
Así voy yo por el momento 🫡
Asi quedo mi pagina de blogs
Asi va el proyecto
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
} */
html {
font-family: 'Roboto mono', monospace;
font-size: 62.5%;
}
a {
text-decoration: none;
display: inline;
color: black;
}
header {
width: 100vw;
height: 140px;
display: grid;
grid-template-rows: 1fr 1fr;
}
header .header-icons-container {
width: 100%;
height: 50px;
display: grid;
background-color: #47cfac;
}
header .header-icons-container .icons {
width: 300px;
height: auto;
display: flex;
justify-items: flex-end;
align-items: center;
justify-content: space-between;
justify-self: end;
margin-right: 50px;
}
header .icons span {
color: white;
}
nav {
display: grid;
grid-template-columns: 1fr 1fr;
height: 90px;
}
nav .nav-logo-container {
margin-left: 50px;
}
nav .nav-logo-container img {
width: 220px;
margin-top: 10px;
}
nav .profile-link {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 50px;
}
nav .profile-link a {
font-size: 1.4rem;
font-weight: bold;
color: black;
border-bottom: 1px solid black;
}
.blogs-main {
height: 450px;
width: 100vw;
display: grid;
grid-template-columns: 55vw 45vw;
padding: 0 50px;
/* justify-content: center; */
gap: 20px;
background-color: #e6e9ed;
}
.blogs-main-news {
margin: 0 70px;
padding-left: 50px;
justify-items: center;
align-items: center;
}
.blogs-main-news h2 {
margin-top: 15px;
font-size: 1.9rem;
font-weight: bold;
}
.blogs-main-news img {
margin-top: 20px;
width: 100%;
}
.blogs-main-blog {
grid-column: 2 / 3;
padding-right: 70px;
margin-right: 110px;
}
.blogs-main-blog h2 {
margin-top: 90px;
font-size: 1.9rem;
font-weight: bolder;
}
.blogs-main-blog p {
margin-top: 30px;
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: .1;
font-weight: 500;
}
.blogs-button {
font-family: 'Roboto mono', monospace;
font-size: 1.2rem;
font-weight: 500;
height: 40px;
width: 100px;
margin: 40px auto;
border: 1px solid #47cfac;
}
.last-blogposts {
width: 80vw;
padding-left: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0 auto;
}
.last-blogposts h3 {
display: flex;
justify-content: center;
width: 100%;
grid-column: 1 / 4;
margin: 5px 0 10px;
padding: 10px;
border-bottom: 1px solid black;
}
.last-blogposts article img {
width: 90%;
}
.post-container {
display: flex;
flex-direction: column;
justify-items: center;
align-items: baseline;
}
.post-container p {
margin: 20px 30px;
font-size: 1.4rem;
}
.post-container .blogs-button {
margin: 20px 0 40px;
}
footer {
width: 100%;
height: 80px;
background-color: #22272d;
border-top: 35px solid #47cfac;
text-align: center;
}
footer p {
color: white;
margin-top: 30px;
}
poco a poco se va formando, pequeño avance 😃
si que estoy emocionado raaaaaaaaaaaaaa
Hasta que el profe deja un reto que si puedo hacer xD
(agregar las imágenes correspondientes)
Mi avance hasta el momento
Este es mi trabajo. vamos poco a poco 😃
Creeria que es mucho mejor hacerlo con grid, de hecho si vemos toda la sección de blogs se comporta como una grilla de 3x2, inclusive para usar las propiedades de grid y que sea mas versatil
Como observación crearía un contenedor para la lista de post con display grid y lo dividria en columnas 1fr 1fr 1fr quitándole esa propiedad a los post-container ya que si vemos el contenido no esta alineado con el h3, hay mas espacio del lado derecho que el izquierdo.
😃
Para dar separación entre las columnas y filas a un elemento con display grid, se puede usar la propiedad grid-gap en los estilos al elemento contenedor.
Les dejo un link donde pueden entender mejor lo que estoy diciendo XD. Saludos
https://www.w3schools.com/cssref/pr_grid-gap.asp
las imagenes restantes
.
Mi resultado(con distintas imágenes)
no se si sea la mejor manera, pero fue la unica que logre
si ven en la parte de los 6 post, esta desalineado derecha e izquierda, como lo arregle
estaba asi
.blogs-posts-container .post-container {
display: inline-block;
padding-left: 1rem ;
max-width: 30%;
margin-bottom: 5rem;
}
lo deje asi
.blogs-posts-container .post-container {
display: inline-block;
padding-left: 1rem ;
max-width: 32.5%;
margin-bottom: 5rem;
}
que hice aumente el % hasta que se alineo.
Esta parte tuvo más tranquila (?)
fue buena idea lo del agregar un borde verde , yo había creado dos cajas contenedoras y cada una con un color diferente, pero así gastas menos lineas de código
Utilizando grid esta es una forma más fácil de hacer la sección de la lista de blogs:.
.
CSS
.
.
.blog-main .blog-list {
grid-column: 2;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: auto;
gap: 2rem;
padding-left: 8rem;
padding-right: 8rem;
}
asi vaa mi proyecto gracias a el profe diego, que bien explica!
Ya que el curso solia llamarse CSS Grid, este hubiera sido una clase perfecta para utilizarlo…
Así fue quedandoel mío.
Tamaño iphone 5 : 320 x 568
Tamaño ipad air: 820 x 1180
Tamaño desktop:
Hace muy bien el responsive, lo fui resolviendo como surgían los problemas pero no sé el código pudo haber quedado más simple. Pero ahí va.
main.css
.blogs-main {
display: grid;
grid-template-columns: 1fr 12fr 1fr;
grid-template-rows: auto auto ;
position: relative;
}
.blogs-main .blogs-news-container {
width: 100%;
height: 400px;
display: grid;
grid-column: 1 / 4;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 10fr);
margin-top: 40px;
background-color: white;
}
.blogs-main .blogs-news-container .blogs-news-banner{
width: 100%;
grid-column: 1 / 11;
grid-row: 1 / 4 ;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 1fr);
background-image: url(../img/blogs-news-banner.jpg);
background-size: cover;
}
.blogs-news-banner h2 {
font-family: var(--title);
font-size: 4rem;
color: white;
grid-area: 3 / 7 / 4 / 9;
margin: 0;
}
.blogs-main .blogs-news-img-container {
grid-area: 2 / 2 / 10 / 6;
}
.blogs-main .blogs-news-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blogs-news-info-container {
grid-area: 4 / 6 / 10 / 11;
display: flex;
flex-direction: column;
padding-left: 5vw;
}
.blogs-post-container h3 {
margin-bottom: 0;
font-size: 2rem;
margin-bottom: 0;
}
.blogs-news-info-container p {
margin-top: 5px;
margin-right: 20px;
font-weight: 300;
font-size: 1.2rem;
}
.blogs-button {
width: 100px;
padding: 6px 10px;
background-color: var(--light-prim-color);
font-family: var(--body);
font-weight: bold;
border: none;
border-radius: 4px;
font-size: 1.2rem;
}
.blogs-button a {
color: white;
font-weight: 600;
}
.blogs-post-container {
grid-column: 2 / 3;
margin-top: 30px;
}
.blogs-post-container h3 {
font-size: 3rem;
margin-left: 40px;
}
.blogs-post-container p {
font-size: 1.2rem;
}
.blogs-post-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.blogs-post-container .post-container{
width: 220px;
padding: 40px 10px;
}
.blogs-post-container .post-container .post-container--title {
font-weight: 700;
font-size: 1.5rem;
}
.blogs-post-container .post-container img {
width: 100%;
height: 120px;
object-fit: cover;
}
.post-button {
align-self: baseline;
}
Y estos son mis media queries
420 px
.blogs-post-container .post-container{
width: calc(50% - 5vw);
padding: 40px 10px;
}
.blogs-post-container .post-container img {
height: 30vw;
max-height: 200px;
}
900 px
.blogs-post-container .post-container{
width: 30%;
padding: 40px 10px;
}
Se podría haber utlizado un grid con 3 columnas en lugar del viejo inline-block.
Buena clase
Como van en el momento, construido Mobile-First
Les dejo un secreto, para no tener que estar copiando pegando seleccionando etc etc etc, vayan a la parte de arriba de vscode donde dice SELECCION , se les despliega un menu con un monton de funciones como poder sacar varias barras y poder escribir en varias lineas de forma simultanea!
Para ahorrarse tener que pixelear para ver el color que es, en el curso de ResponsingDesing ensenyan, puedes crear variables en el :root de los colores en css así
:root {
--verde-cool: #5fc6a6;
--grey-saturated: #e6e9ed;
--petter: #cdd2da;
}
y luego las vas llamando, ejemplo
.blogs-news-container {
background-color: var(--grey-saturated);
padding: 0 50px 50px;
}
… o por ejemplo
.blogs-button {
border: 1px solid var(--verde-cool);
padding: 10px 15px;
font-size: 12px;
}
Comparte en los comentarios cómo te va quedando
Necesito tomar cursos de diseño x2 jasjasjas
😃 Este curso me esta ayudando mucho 😄 excelente profesor
Hi five mental 🖐🖐
les comparto mi solicion por si tienes dudas
.blogs__button {
border: 1px solid var(--secundary-color);
padding: 10px 15px;
font-size: 12px;
}
.blogs__button:hover {
color: var(--primary-color);
background-color: var(--header-text);
}
.grid__container {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
gap: 30px;
justify-content: center;
}
.post__container {
height: 100%;
}
.grid__container .post__container {
padding: 5px;
}
.grid__container .post__container p {
margin-bottom: 35px;
}
.grid__container .post__container img {
width: 100%;
}
footer {
width: 100%;
height: 80px;
background-color: #22272d;
border-top: 35px solid var(--primary-color);
}
footer p {
color: blanchedalmond;
margin: 10px 10px;
text-align: center;
}
comparto como quedo el mio
.blogs-posts-container .post-container {
display: inline-block;
padding-left: 10px;
max-width: 32.5%;
margin-bottom: 50px;
}
.blogs-posts-container .post-container p {
margin-bottom: 35px;
}
.blogs-posts-container .post-container img {
width: 100%;
}
.blogs-posts-container .post-container img + p {
font-weight: bold;
padding-top: 15px;
height: 36px;
}
.blogs-posts-container .post-container p + p {
height: 130px;
}
footer {
width: 100%;
height: 80px;
background-color: #22272D;
border-top: 30px solid #47cfac;
}
footer p {
color: white;
text-align: center;
padding-top: 15px;
}
dato curioto xD
inline-block, un curso de CSS Grid básico… clase 18, casi no hay presencia de grid solo para algunas cosas y diría que casi a la fuerza.
Asi me va quedando…
Sin duda grid facilita la vida
Muy práctico el curso.
Que agradable al momento de hacer un solo cuadro y replicarlo después en las veces que necesites, ese momento se llama felicidad…
✅📈🤣🤓👨🏻💻💪
Mi código lo hice distinto a la clase pero el resultado fue el mismo a mi parecer
Vamos por más 😄 ya casi está!
Grandisima clase
Sigamos 😄
excelente aunque si veo gracias a mis compañeros el detalle de la alineacion de los post
Excelente hasta el momento. Muy práctico el curso.
estupendo sigamos 😄
Solo con el display: inline-block; y el max width: 30% logró colocar todos los <article> alineados sin necesidad de crear contenedores para los 3 elementos en fila, wow. Me tomaba mucho tiempo con display flex y hacer justify content: space-between de los containers.
Ya tomó la forma. A detallar nada más.
Yo lo hice con flex y flex wrap, creo que es más rápido.
Reto cumplido
![](
Muy buena clase!
Excelente 😄
me salio asi, aunque en cada articulo si varia el tamanio del contenido de la etiqueta “p”, varian las posiciones. Como lo corrijo?
Falta poco 😊
![](
Listo!!! 😃
ya casi queda 🤠🤠🤠🤠********
Yayyyyyyyyy…😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?