Cada vez más independiente. :’)
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
En este proceso, añadir una imagen a tu proyecto web puede parecer una tarea sencilla, pero si no se hace correctamente, la imagen puede romper con la estética de tu diseño. Para lograr una implementación correcta y lograr que tu imagen mantenga su cohesión visual con el resto del contenido, es necesario seguir estos pasos y cuidar ciertos detalles.
Para implementar una imagen en tu código HTML, sigue los siguientes pasos:
Ubicar la imagen en el proyecto: Asegúrate de que la imagen esté en el directorio correcto de tu proyecto. En este caso, se encuentra en la carpeta correspondiente dentro del proyecto del blog.
Agregar la etiqueta HTML: Añade el siguiente código en el lugar donde deseas que aparezca la imagen:
<img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen">
Configuración en CSS: Luego, accede al archivo CSS para ajustar el tamaño según tus necesidades. Por ejemplo:
.tu-clase-imagen {
width: 85%;
}
Es común enfrentar problemas relacionados con el tamaño de las imágenes y cómo se adaptan al layout del sitio web. Estos son algunos consejos para solucionarlos:
Utilizar porcentajes: Como el contenedor (body, div) puede cambiar de tamaño, utiliza dimensiones en porcentaje para que la imagen se ajuste dinámicamente:
img {
width: 85%;
}
Añadir clases específicas: Si hay conflictos con otras configuraciones del sitio, genera una clase específica para la imagen e intégralo cuidadosamente en CSS para asegurar que no interfiera con otros elementos.
Los detalles como márgenes y paddings son cruciales para mantener un diseño estético y funcional. Asegúrate de que estos ajustes mejoren la experiencia visual en tu web.
Añadir márgenes y paddings: Implementa márgenes y paddings para mejorar la alineación y el espaciado:
.contenido {
margin: 20px;
padding: 0 40px;
}
Uso de bordes: Agregar bordes puede proporcionar un efecto definido en ciertos elementos:
.titulo {
border-bottom: 1px solid #ccc;
text-align: center;
}
Cuando trabajas con múltiples artículos en una página, es esencial tener una estructura organizativa clara. Esto se puede lograr usando columnas.
Si necesitas replicar el mismo estilo en varios artículos, la técnica de clonación es útil:
Establece un estilo base: Diseña uno de los artículos con el estilo deseado.
Incluye los estilos: Usa un sistema para integrar los estilos clonados en otros artículos, asegurando que conserven la coherencia visual.
Organiza en columnas: Implementa un diseño de columna para distribuir los artículos en la página de manera equilibrada:
.articulos {
display: flex;
flex-wrap: wrap;
}
.articulo {
flex: 1 0 30%; /* Ajuste a tres columnas */
margin: 10px;
}
Al seguir estos pasos, determinarás cómo tus imágenes y artículos no solo se integran, sino que también mejoran la experiencia de usuario. Ahora estás un paso más cerca de crear un sitio web más atractivo y funcional. ¡Continúa explorando y aprendiendo nuevos trucos para mejorar tus habilidades de desarrollo web!
Aportes 57
Preguntas 6
Cada vez más independiente. :’)
Así va quedando, agregué un overlay para indicar cuántos likes y comentarios tiene cada post.
no me base en el diseño del video
No se si sirva el comentario, pero pueden evitar la parte de definirle el border-bottom al “h3”, haciendo uso de una etiqueta que dibuja una linea de separación, “hr”
Amigos que tienen problema con el scroll, recuerden quitar de la etiqueta body los estilos que se pasaron a la clase .home-body.
Quedaría así:
body {
font-family:‘Robot Mono’, monospace;
margin: 0;
padding: 0;
}
home-body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
En que momentos es correcto usar una imagen como tag “img” o como background?
Wow no sabía que poniendo un % en el width ayudabas a que la imagen se acomode conforme mueves el tamaño del navegador!🤯
Realice el cambio que dijo Diego pero no me resulto, tuve que agregar un display: content para que me aparezca el scroll. Alguno mas le paso?
Gracias, me ha servido de mucho este curso. Así va quedando mi plantilla! 😃
Los curso de Diego Degranda son una exquisitez. Me encanta el enfoque pragmático que imprime en sus enseñanzas, va al grano, se aprende haciendo. Está valiendo la pena cada centavo y cada minuto de inversión.
Así quedó en mi estilo:
Tuve ciertos problemas con las clases y la maquetación de la página web, así que los que hice y les recomiendo, es que ustedes traten de maquetar cada parte y usen la clase como una guía, no solo ir copiando lo que vemos en pantalla, porque al final es una mala práctica, además, cada persona piensa distinto, por lo que cada quien puede solucionar de distintas maneras el mismo problema.
Haciendo el proyecto mio!
Tratando de hacer el ejercicio por mi cuenta, había caído en cuenta del error del scroll en blogs.
Pensé en hacer cambiar los estilos de todos los que requieran scroll, pero cambiar para que solo la que no necesita scroll lo haga es más fácil 😅
responsive design
Recuerden siempre por buenas practicas, tomar la imagen usar paginas para reducir el tamaño de las mismas, ya que en promedio nuestras imagenes deberian pesar 120kb aprox
la forma de generar scroll es de esta forma
.home-body{
top: 0;
bottom: 0;
right: 0;
left:0;
overflow: scroll;
}
Si a un elemento con grid, le aplicas porcentajes en su tamaño, tomará el porcentaje de la celda en la que esté, lo que hace que se adapte al tamaño de la celda.
La termine ,les dejo el una screenshot y el codigo me encantaria recibir su feedback .Saludos
CSS
.blogs-main{
display:grid;
}
.blogs-news-container{
background-color: #e6e9ed;
padding:0 50px 40px;
}
.blogs-main-new{
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-rows:2fr;
}
.blogs-news-img-container{
grid-column:1;
}
.blogs-news-img-container img {
width:85%;
}
.blogs-news-info-container{
grid-column:2;
}
.blogs-news-info-container p {
margin-bottom:35px;
}
.blogs-posts-container{
padding: 0 50px 40px;
}
.blogs-posts-container h3{
border-bottom:1px solid #cdd2da;
padding-bottom: 20px ;
text-align:center;
}
.blogs-posts-container div {
display:grid;
grid-template-columns: repeat(3,2fr);
grid-auto-rows: auto;
gap: 20px;
}
.blogs-posts-container .post-container{
display: flex;
justify-content: center;
flex-direction: column;
}
.blogs-posts-container .post-container img {
width: 100%;
align-self: center;
margin-top: 5px;
}
.blogs-posts-container .post-container a {
font-size: 12px;
border: 1px solid #48cfad;
width: 100px;
padding: 8px 4px;
margin:10px 0 3px 10px;
text-align: center;
}
footer{
margin-top: 40px;
border-top: 35px solid #48cfad;
height: 60px;
display: flex;
justify-content: center;
background-color: #22272d;
}
footer p {
color: white;
font-weight: bold;
align-self: center;
}
Muy buena clase 😃
Momento en el que explica porqué la página no genera scroll. Debido a la posición Fixed que se colocó al body en el home con los valores de top, left, rigth y botto, en cero (0).
Genial cada día más seguro del pensamiento de maquetador CSS!!! 😃 😃
Las medidas relativas como porcentaje y fr facilitan que los elementos imagenes, texto, etc puedan escalar mas facilmente
Porque lo maquete diferente, me toca poner el border-bottom en un lugar diferente xd
La imagen es una animación que saque de https://www.pixeltrue.com/ y esta en json
Siento que es mejor y menos enredo generar para el blogs otro css y no trabajar lo en el principal.
Tambien funciona asi
.home-body{
overflow-y: scroll;
scroll-behavior: smooth;
}
Asi va quedando banda
Así va quedando con maquetación MovileFirst
Si hay algo que pueda mejorar les agradezco sus comentarios.
Amigos, tengo un problema, me queda así. ayudenme porfavor.
Excelente profesor
De esta manera evitamos hacer scroll
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
Me encantaa! Estoy haciendolo con mis fotillos y colores
Sigamos 😄
Muy clara la clase, que buena!
Todo quedando genial!
Igual que los compañeros tenía problemas al principio en la vista blogs, pero siguiendo los pasos indicados en el video al crear la clase en la etiqueta body de index.html y separar las propiedades originales del body hacia esta clase se soluciona el problema.
Excelente.
Genial, gran clase
sigamos aprendiendo 😄
VA QUEDANDO GENIAL
Puliendo detalles.
cerca del final de este gran proyecto 😝
Me gusto esa forma de darle una clase al body, para que solo afecte a nuestra pantalla principal el position: fixed.
joder!!! claro body también es una etiqueta, yo haciendo malabares con mi código.
muy bien, estoy aprendiendo muchos trucos sobre maquetacion!
Perfecto! 😄
Va quedando super… Excelente clase!
Yo tuve con confusión con la clase .home-body pero la solucioné así
.home-body {
margin: 0;
padding: 0;
position: initial;
font-family: 'Roboto mono', monospace;
}```
Espero que les haya servido
Lo del scroll no me quedo muy claro, debo ejecutarlo en código para ver tal me va.
Me agrada, me grada mucho lo que veo. Voy a practicar lo de las imágenes porque las he colocado es en css y no desde el html. ✅💪👨🏻💻🤓📈👍
Interesante. 🤔 En general me provoca algunos dolores de cabeza el alineamiento de las imágenes.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?