Hola (◠‿◠) comparto mi trabajo, lo voy a daptando a otro tema que elegí
Introducción
Lo que aprenderás sobre maquetación en CSS
Chrome Devtools
Análisis y creación del proyecto
Diseño del proyecto
Setup del proyecto
Creando la página principal
Arquitectura del header en HTML
Estilos en el header
Agregando íconos
Agregando imágenes al header
Manejo de Grid para posicionar contenedores
Manejo de imágenes de Background
Agregando fuentes
Terminando el Home
Creando página de Blogs
Blog page
Manejo de clases
Estilos en blogs html
Agregando imagen
Estilos del botón
Trabajando la sección de post
Grid Container
Creando página de Blog
Crear la pantalla de blog
Agregando estilos a la página de blog
Creando página de perfil
Sección de contacto
Maquetando perfil HTML
Manejando estilos en la página de perfil
Blog responsivo
Media Queries
Cierre
Cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Cuando se trata de diseñar de manera efectiva una página web, uno de los aspectos cruciales es cómo se estructura y posiciona el contenido en la pantalla de un usuario. Este control de visualización es especialmente importante, independientemente de la resolución o el tamaño de pantalla que se esté utilizando. Aquí aprenderás a centrar el contenido de tu proyecto web de manera efectiva utilizando técnicas modernas de CSS.
Centrar el contenido de una página web es clave para ofrecer una experiencia de usuario coherente y agradable. Un diseño bien centrado en nuestra pantalla evita que los elementos se dispersen, proporcionando:
En muchos frameworks CSS como Bootstrap, Foundation o incluso cuando editamos nuestro propio CSS, debemos definir un contenedor central que limite el espacio máximo de ancho. Esto asegura que el contenido se centre correctamente en pantallas de cualquier tamaño. La técnica principal que se utiliza para esta tarea involucra:
margin: auto
para centrarlo dinámicamente.Para poner en práctica lo aprendido, debemos añadir una clase a nuestro contenedor padre en nuestro archivo HTML y luego definir estilos globales en CSS para asegurar que el contenedor se mantenga centrado. Aquí te mostramos cómo hacerlo:
<main class="main-container">
<div class="content-wrapper">
<!-- Aquí irán tus posts o elementos -->
</div>
</main>
.main-container {
max-width: 980px; /* Limita el ancho del contenedor a 980 pixels */
margin: 0 auto; /* Centra el contenedor horizontalmente */
}
.content-wrapper {
/* Otros estilos específicos para el contenido */
}
Con esta configuración, el contenedor siempre tendrá un ancho máximo de 980 píxeles, y se centrará automáticamente en la pantalla. Esto supone que, independientemente de si la resolución de pantalla es muy alta, el contenido se verá centrado y no se dispersará.
El uso de max-width
combinado con margin: auto
trae múltiples beneficios, entre los que destacan:
Con estas técnicas puedes estar seguro de que tu contenido se verá bien organizado y centrado, proporcionando una experiencia agradable al usuario que invite a permanecer y explorar tu sitio web. ¡Continúa aprendiendo y aplicando principios como estos para llevar tus proyectos al siguiente nivel!
Aportes 67
Preguntas 8
Hola (◠‿◠) comparto mi trabajo, lo voy a daptando a otro tema que elegí
Me hace un poco de ruido que los pos no estén alineados con la línea del título:
Pero se puede solucionar:
Solo debemos aplicar el “text-align” en dos clases:
.blogs-posts-container {
padding: 0 50px 40px;
text-align: center;
}
.blogs-posts-container .post-container {
display: inline-block;
padding-left: 10px;
max-width: 30%;
margin-bottom: 50px;
text-align: left;
}```
Y queda mejor!
Me encanta este curso, el profesor cuida todos los detalles, y el blog esta quedando perfecto!!
Casi me salto esta clase ya que creía que había terminado esta parte, pero no contaba con que max-width es muy importante para mantener la estética del sitio.
No sabes lo que no sabes.
Hice una pequeña modificación en el ccs para la clase grid-container, le agregué text-align: center para que me centrara las tarjetas de los posts. Luego también le agregué text-align: initial a la clase .blogs-posts-container .post-container p para que me alineé los textos a la izquierda.
El resultado funciona, pero me gustaría saber si hay alguna otra forma mejor de hacerlo. Que opinan?
.grid-container {
max-width: 980px;
margin: auto;
text-align: center;
}
.blogs-posts-container .post-container p {
margin-bottom: 35px;
text-align: initial;
}```
;
margin: 5px;
/* border: 1px solid black; */
}
Y el efecto hover
del botón es:
.blogs-button {
display: inline-block;
margin: 10px 0;
border: 2px solid var(--color-light-green);
padding: 10px 15px;
font-size: 1.2rem;
transition: all 0.5s ease-out;
}
.blogs-button:hover {
border: 2px solid white;
color: var(--color-white);
background-color: var(--color-primary);
}
Un poco de mi proyecto.
Blogs terminado
Parecido a lo que hace boostrap con la clase container, aunque claro, Boostrap ya se encarga de todo
Hasta ahora vengo a entender para qué se usa el max-width! 🤯
Que importante es delimitar nuestro max-width
Me gusta el tiempo que le da a cada, cosa. Se entiende mejor y no me siento presionado aprendiendo.
Se agradece.
Los containers para max width nos permiten mantener un estandar sin importar el ancho en pixeles de la pantalla, al irse reduciendo la pantalla el contenido del container siempre quedara centrado, solo tomar en cuenta un pequeno padding al container en responsive cuando sea necesario, hay secciones que en algunos disenos siempre ocupan el 100, por eso es buena idea que aunque el container sea general se haga como lo pone Diego y se coloque individualmente en cada container, nos da mas control en responsive
Excelente explicación instructor Diego, con estos ajustes el proyecto se ve mucho mejor
me alegra de haber resuelto esto por mi cuenta xd, digo, cuando hice mi página, había 4 columnas y estuve buen rato tratando de resolverlo leyendo documentación e intentando diferentes soluciones xd.
Super!!!
¿Cómo puedo hacer para que las imágenes no se cambien de posición cuando los párrafos de descripción son de menos o más lineas a cuatro?
Alguien ayúdeme por favor. Me sale esto y no entiendo porque. Dejaré el código en los comentarios.
lo que mas me gusto de esta clase fue la explicacion del orden que se lleva por buena practica en el css primero para lo que tocan la mayor cantidad de contenido y luego las secciones
Genial!
A darle 😄
Creo que en bootstrap se llama wrap
genial
Buenísimo! No sabia ese truco en el container para delimitar los lados del container y siempre tenerlo centrado!!!
Excelente este container ❤️
Lo importante de una correcta estructuración y un buen manejo de las clases 🧐
Detalles que afinan la maquetación, buena clase
Y el rato que reduzco el tamaño de mi pantalla ahi es cuando se va todo al c4r4jo ajaja ya que hize a mi manera que eso entiendo ya posicionar maquetar, el problema me surge para que se haga responsive cuando reduce la pantalla 😦
Comparto mi proyecto
Versión desktop
Versión mobile
Buen curso, la única pega que vi en esta clase es nombrar “grid-container” a un contenedor en el cual ni siquiera está utilizando grid, pero bueno, de resto todo perfecto
muy sencillo, gracias Diego
Este bien el curso, pero si has tomado los anteriores cursos de Diego como el curso definitivo de HTML y CSS este tiene varias cositas malas
que tal buen dia… campeon, coparto mi avance…
Genial
estupendo 😄
Grid-container!!! ❤️
Excelente!
terminada la seccion de los blogposts
muy buena forma de resolver el problema, y muy rápida y entendible
Qué buena herramienta 😃 A seguir
Listo papa solucionado los bugs de la vista en horizontal en celular, básicamente esta dándole un tamaño definido a los blogs pero esto hacia que en un celular se saldría del espacio establecido, lo que hice fue darle porcentajes. XD
las variables son infitintas podemso cambiar colores formar contenido titulos letras tamaños etc etc el mundo es nuestro
sin el max-width
con el max-width y margin auto
QUe locura
Excelente consejo profesor Diego De Granda!
Así quedó mi página de blogs.
Excelente!
El buen uso de las herramientas y la atención a los detalles.
Excelente clase!!
si algo me quedo claro de todo, es que bonito se ve todo cuando un diseñador mete mano en un proyecto 😃
Buenas practicas, poner el contenedor que va ha introducir max-width en la parte superior o donde colocamos los cambios generales a nuestro proyecto.
No había pensado en este detalle.
Muchas Gracias Diego!
Así se veía antes con una escala de 50%
Así se ve ahora con una escala de 50%
super
Una cosa que yo hice fue utilizar flexbox para darle una mejor estetica a los articles de, y no se explica en este curso pero no es malo, en el curso de responsive design el profesor Diego lo explica de maravilla. Se puede usar grid como flexbox pero es más recomendado utilizar grid para diseños a mayor escala.
¿Entonces por qué usar Grid para el main si no le dimos un uso? Ese Display Grid se puede quitar que no tendría ningún efecto. Se pudo hacer usado para darle forma a la lista de posts.
Este no es uno de los mejores cursos del Profesor De Granda, hay mucho código innecesario a mi parecer.
Hola! les comparto como lo hice yo, sin ver los videos 😃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/font/flaticon.css" />
<link rel="stylesheet" href="./css/blogs.css" />
<title>Document</title>
</head>
<body>
<header>
<section class="header-icons-container">
<div class="icons">
<a href=""><span class="flaticon-001-facebook"></span></a>
<a href=""><span class="flaticon-002-twitter"></span></a>
<a href=""><span class="flaticon-011-instagram"></span></a>
<a href=""><span class="flaticon-010-linkedin"></span></a>
<a href=""><span class="flaticon-008-youtube"></span></a>
</div>
</section>
<nav>
<section class="nav-logo-container">
<a href="/"
><img src="./assets/img/Logo-negro.png" alt="Logo d emi blog"
/></a>
</section>
<section class="profile-link">
<a href="/perfil.html">Sobre mí</a>
</section>
</nav>
</header>
<section class="latest-blog-container">
<div class="latest-blog--img">
<h3>Noticias</h3>
<img src="./assets/img/main-news-img.png" alt="" />
</div>
<div class="latest-blog--info">
<h3>Titulo del blogpost</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam
excepturi fugit aut ipsa temporibus, numquam nesciunt recusandae
dolorem culpa doloribus mollitia magni modi molestias. Nobis ut hic
sed voluptatum qui!
</p>
<button class="read-more-button">Leer Mas</button>
</div>
</section>
<section class="lasts-blogs-container">
<h3 class="lasts-blogs-container--title">Últimos Blogposts</h3>
<div class="last-blogs--grid">
<article class="last-blogs--blog">
<img src="./assets/img/post-1.png" alt="blog-img" />
<h3>Titulo del blogpost</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
Laudantium?
</p>
<a href="./blog.html">
<button class="read-more-button">Leer Mas</button>
</a>
</article>
<article class="last-blogs--blog">
<img src="./assets/img/post-2.png" alt="blog-img" />
<h3>Titulo del blogpost</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
Laudantium?
</p>
<a href="./blog.html">
<button class="read-more-button">Leer Mas</button>
</a>
</article>
<article class="last-blogs--blog">
<img src="./assets/img/post-3.png" alt="blog-img" />
<h3>Titulo del blogpost</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
Laudantium?
</p>
<a href="./blog.html">
<button class="read-more-button">Leer Mas</button>
</a>
</article>
<article class="last-blogs--blog">
<img src="./assets/img/post-1.png" alt="blog-img" />
<h3>Titulo del blogpost</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
Laudantium?
</p>
<a href="./blog.html">
<button class="read-more-button">Leer Mas</button>
</a>
</article>
<article class="last-blogs--blog">
<img src="./assets/img/post-2.png" alt="blog-img" />
<h3>Titulo del blogpost</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
Laudantium?
</p>
<a href="./blog.html">
<button class="read-more-button">Leer Mas</button>
</a>
</article>
<article class="last-blogs--blog">
<img src="./assets/img/post-3.png" alt="blog-img" />
<h3>Titulo del blogpost</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
Laudantium?
</p>
<a href="./blog.html">
<button class="read-more-button">Leer Mas</button>
</a>
</article>
</div>
</section>
<footer>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
display: inline;
color: black;
}
header {
width: 100%;
height: 140px;
display: grid;
grid-template-rows: 1fr 1fr;
}
.header-icons-container {
width: 100%;
height: 50px;
display: grid;
background-color: #47cfac;
}
.header-icons-container .icons {
width: 300px;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
justify-self: end;
margin-right: 50px;
}
header .icons span {
color: white;
}
nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 90px;
}
nav .nav-logo-container {
margin-left: 50px;
align-self: center;
}
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;
font-size: 2rem;
font-family: 'Roboto Mono', monospace;
}
nav .profile-link a {
color: black;
border-bottom: 1px solid black;
}
.latest-blog-container {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: #e0e3ea;
padding: 50px 10%;
font-family: 'Roboto Mono', monospace;
}
.latest-blog--img h3 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.latest-blog--img img {
max-width: 100%;
}
.latest-blog--info {
max-width: 350px;
margin-top: 50px;
justify-self: center;
}
.latest-blog--info h3 {
font-size: 3rem;
font-weight: bolder;
}
.latest-blog--info p {
margin: 20px 0;
font-size: 1.5rem;
font-weight: 500;
max-height: 200px;
text-overflow: ellipsis;
overflow: hidden;
}
.read-more-button {
height: 40px;
width: 100px;
border: solid 1px #47cfac;
background: none;
font-family: 'Roboto Mono', monospace;
font-weight: bold;
font-size: 1.4rem;
}
.last-blogs--grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.lasts-blogs-container {
padding: 10px 15%;
font-family: 'Roboto Mono', monospace;
}
.lasts-blogs-container--title {
text-align: center;
height: 30px;
margin: 10px 0;
border-bottom: solid 1px #e0e3ea;
font-size: 2rem;
}
.last-blogs--blog {
margin: 20px 0;
margin-right: 20px;
}
.last-blogs--blog h3 {
font-size: 1.5rem;
}
.last-blogs--blog p {
font-size: 1.5rem;
margin: 20px 0;
}
.last-blogs--blog img {
max-width: 100%;
}
footer {
background-color: #1f2229;
border-top: solid 40px #47cfac;
}
footer p {
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Roboto Mono', monospace;
font-size: 1.5rem;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?