Transformar el diseño de una página web implica un gran número de detalles, comenzando con la correcta elección de colores y dimensiones hasta los estilos tipográficos. En este contenido, exploraremos los pasos finales para dar un acabado profesional al área Home de nuestro proyecto, enfocándonos en la importancia de los estilos CSS y cómo implementarlos eficazmente.
¿Cómo lograr una presentación visual óptima?
Comencemos por personalizar elementos clave como el título y los botones. Estos pasos asegurarán que tu proyecto capte la atención del usuario desde el primer momento:
Título: Cambiaremos el color del texto del título a blanco usando CSS para darle un mayor contraste y elegancia. Para ello, simplemente aplica color: white; a la clase correspondiente.
Botón: Asegúrate de que el botón no solo sea funcional sino también visualmente atractivo. Definiremos las dimensiones y color del botón con:
Estilo del texto del botón: El texto dentro del botón recibirá atención especial con un espaciado de fuente adecuado y un tamaño que garantice legibilidad:
.home-button a{font-weight:700;font-size:18px;}
Asegúrate de verificar estos valores con los estilos del diseño inicial para mantener la coherencia visual.
¿Cómo garantizar la cohesión tipográfica?
La selección de la tipografía correcta es crucial para transmitir la personalidad y el estilo de tu página. En nuestro proyecto, utilizamos fuentes específicas para garantizar una apariencia uniforme y profesional:
Fuentes del proyecto: Hemos integrado 'Roboto', una fuente versátil que se adapta bien a diferentes contextos y resoluciones. Es una buena práctica declarar estas fuentes al inicio del código CSS para garantizar uniformidad en todas las páginas del proyecto.
body{font-family:'Roboto', sans-serif;}
Este tipo de declaración asegura que cada elemento textual en la página sea renderizado de acuerdo con las intenciones de diseño originales.
¿Cómo proceder al siguiente desafío?
Con estos últimos detalles visuales completados, estamos listos para avanzar al siguiente reto: diseñar el layout de nuestro blog en HTML. Esto incluye entender cómo estructurar efectivamente el contenido para mejorar la usabilidad y la experiencia del usuario en la web.
Esta metódica atención al detalle no solo garantiza que nuestro sitio sea estéticamente agradable, sino que también mejora significativamente la experiencia del usuario. Mantente atento a las siguientes etapas del curso, donde continuaremos abordando más complejidades del diseño y desarrollo web. ¡Anímate a llevar tu proyecto al siguiente nivel y sigue explorando nuevas técnicas de construcción web!
.index-cta a button:hover { background-color: #47cfac;transform:scale(1.1);}
gracias!!
Excelente, gracias.
El que las clases sean tan cortas y concretas, te hacen ir de "A ver, una más"
Y pues... son las 3:00 A.M y aquí estamos 😅
Yo cuando comencé a maquetar en web hacía lo mismo que tú, repetía y repetía los vídeos. Así que harto ánimo, que todos aprendemos de formas distintas.
Me pasa lo mismo. Son las 4:18 am.
Nunca seguiste el diseño que nos mostraste, realizaste uno similar pero no el mostrado.
No me mal interpretes, esta genial ver otras alternativas pero de qué sirvió el reto si no se llego
Ahorita es para aprender, lo acepto, pero por ese tipo de cositas se crean conflictos entre frontends y diseñadores
Lo ideal sería que cada uno haga un proyecto parecido, basandose en lo que dice el profesor para de esa manera aprender más.
Tómalo con buen humor y como un cambio de último minuto del cliente. :-D
comparto mi trabajo
me gusta!! Gracias por compartir
Muy bueno :D
Tambien se le pueden agregar algunas sombras al texto y boton con:
Hey amigos como estan ..me gustaria recibir feedback de mi blog...les dejo el deskopt y el mobile...:)
Deskopt:
Mobile:
Me gusta mucho Daniel que bueno que le diste tu propio estilo!
Buen trabajo :D
Yo solo veo un detalle con el botón "sobre mi" me parece muy brillante y parece mas un buscador que un botón.
Esto es como un vicio..seguir y seguir..hasta terminar!! ja ja ja ja ja
es como leer un buen libro, "un capitulo, un capitulo mas..." y son las 3 am jajaja.
No pudo haber mejor descripción la de un buen libro ja ja ja ja ja ja ja
Home terminado
🙌🏼
Por qué la imagen se ve mas completa en tu proyecto y en el de profesor se ve recortada abajo?
Así quedó el Home Page de mi proyecto : )
Terminé al fin
Les dejo este link que me ha ayudado a realizar botones con algunos estilos que a mi parecer son sencillos pero agradables, así que para comenzar esta bien:
Muchisimas gracias por el:
background-attachment: fixed, para la imagen de fondo.
Me parece genial la idea de hacer cursos practicos, y se pueda llenar nuestros portafolio, puede que el curso se hubiera llamado curso practico de css grid pero ahora tiene mas sentido co el nuevo nombre.
Agregué unos estilos al button del main para que se vea más bonito :)
COOL!
me gustó ese fondo amarillo q tenias antes
Justo me adelante al poner las fuentes en el body como buena práctica 😀
Hola amigos espero alguien me podría ayudar a resolver mi duda.
Tuve problemas para agregar los enlaces a las redes sociales del header de la forma del profesor asi que me anime a hacerlo de otra forma pero me encontré con este error.
1-El texto dentro del <span> esta encima del icono que agregue mediante <background-image> en css y si lo borro desaparece el icono, ¿cuál ha sido mi error usando esa etiqueta?
La forma que halle para solucionar fue intercambiar <span> por una etiqueta <img> (3) pero alguien me ayuda a solventar mi duda?
¡Hola!, esto es porque el background-image siempre va a estar detrás de todo lo que esté dentro de la etiqueta, esto es conocido como "contexto de apilaiento", imagínatelo como capas, la etiqueta span va a estar debajo de todo, imagina que el span es una mesa, y encima empiezas a poner cosas (texto, otras etiquetas, etc.) como el background pertenece al span pues todo lo que pongas encima lo va a tapar, imagínate el background como si fuera la pintura de la mesa, cualquier cosa que pongas encima va a estar por encima de la pintura, eso es lo que sucede, por eso tu texto está encima de la imagen, y por eso es que con la etiqueta img si te funciona, porque está etiqueta está encima del span.
Ahora, ¿por qué desaparece cuando quitas el texto? Porque no tiene ningún ancho ni alto, si tú pones texto o algo la etiqueta va a tomar el ancho y alto de ese texto, pero si no le pones nada adentro entonces la etiqueta no tendrá ni ancho ni alto, por eso no se ve, esto puedes solucionarlo con CSS poniéndole un ancho y alto fijo :D
Hola comunidad!
Tengo una duda. La imagen del main (background), no me queda exactamente igual. No se llega a ver del cuello para abajo.
Copio parte de mi código y también agrego la imagen del trabajo terminado. Agradezco si alguien puede guiarme en como solucionar la posición de la imagen.
Hola bro, quiza puedas probar como consejo. La propiedad:
background-position-y:;
Con ella podrás mover tu fondo en el eje vertical Y, si usas números positivos en px se mueve hacia abajo, si usas números negativos se mueve hacia arriba.
