Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

DESAFÍO 9 - Haga lo que hicimos

Quiero enseñarles la resolución del desafío que hice. ¿Qué mejoras podría darle al diseño en Css? Ya que, veo que no se me muy estético, además que tuve algunas complicaciones a la hora de diseñarlo.

*CSS *{ padding: 0; margin:0; box-sizing: border-box; }

body {
    background-color: #000000;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    margin:0;
}
header {
    margin: 10px;
    padding: 10px 20px;
    color: #FFFFFF;
    background-color: #333333;
    border-radius: 5px;
}
header a {
    color: #00FF00;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}
header nav a {
    color: #FF0000;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}
.título-blog {
    color: #FF4500;
}
.urgente {
    color: #19b5d7;
}
footer {
    background-color: #355C7D;
    width: 100%;
    padding: 20px;
    text-align: center;
}
footer p {
    color: #00FF00;
}
.Listadecanciones {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.Listadecanciones li {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Listadecanciones a {
    color: #00FF00;
    text-decoration: none;
    font-weight: bold;
    margin-right: 10px;
    font-size: 20px;
}
.Listadecanciones img {
    width: 50px;
    height: 50px; 
    margin-left: 10px;
    border-radius: 5px;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad |

solución!

¡Hola Victor!

Viendo tu código, puedo darte algunas sugerencias para mejorar el diseño en CSS:

  • Trabajar en la estructura de tu página para hacerla más atractiva visualmente, agregando márgenes y espaciados para separar los elementos y darles más fluidez.
  • También podrías considerar cambiar los colores de fondo y de texto para lograr una mejor combinación y legibilidad.
  • Utilizar fuentes diferentes, tamaños de texto variados y estilos de fuente (negrita, cursiva, etc.) para darle más dinamismo a tu diseño.

Sobre el código algunas recomendaciones:

  • Agrupa selectores relacionados para reducir la cantidad de código o repeticiones y hacerlo más legible. Por ejemplo, puedes agrupar las selecciones para header y header a.
  • Utiliza unidades relativas para los tamaños de fuente, en lugar de utilizar tamaños como (20px), puedes utilizar unidades relativas (como 1.5rem) para que el tamaño de fuente se ajuste automáticamente según la fuente base del documento.

Algunos de los puntos que te mencione los verás en los siguientes cursos de HTML y CSS, entonces puedes ir adaptando tu desafío a medida que vas avanzando y con eso practicar.

Espero haber ayudado. ¡Buenos estudios!