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
Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aportes 54
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! 😃
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.
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.
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!!! 😃 😃
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?
o inicia sesión.