Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafío: Mejorando la estilización de tú CSS

Referente al curso HTML y CSS: ambientes de desarrollo, estructura de archivos y tags, en el capítulo Mejorando la estilización de tú CSS y actividad Desafío: comparta tú proyecto con el mundo

por Anderson Felipe Estrada Sánchez
| 25.3k xp | 68 posts

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main>
        <h1>
            ¡Aprendiendo junto a <strong>Alura Latam!</strong>
        </h1>
        <p>
            ¡Hola! Soy Anderson Estrada, y estoy realizando este <strong>Challenge de Alura Latam</strong> 
            para entrar al bootcamp de ciencia de datos.
        </p>
        <a href="https://github.com/Afes-reop/challenge-amigo-secreto_esp-main.git">GitHub</a>
        <img src="alura.jpeg" alt="Alura Challenge"
    </main>
    <footer></footer>
</body>
</html>

CSS:

body {
    background-color: rgb(114, 174, 172);
    color: white;
}

main{
    background-color: rgb(156, 67, 12);
    color: white;
    text-align: center;
    
}

h1,h3,p{
    font-family: Arial, Helvetica, sans-serif;
    font-style:normal;
}

p{
    font-size: 20px;
    column-gap: 20px; 
    width: 40%;
    text-align:center;
    margin:auto;
}

img {
    width: 500px; 
    height: auto; 
    display: block;
    margin: auto;
    border-style: solid;
}

a{
    display: inline-block;
    font-size: 20px;
    padding: 10px 20px;
    background-color: #000000;
    text-decoration: none; 
    border-radius: 8px;
    font-weight: bold;
    color: #41d08b;
}

h1, p{
    margin-bottom: 40px;
}

img, a, h3 {
    margin-bottom: 20px;
}

strong{
    color: #79ecf5;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', ;
}

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

1 respuesta
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

¡Hola, Anderson, espero que estés bien!

He visto tu código y el resultado en la imagen. Aquí tienes algunas sugerencias para mejorar la estilización de tu CSS:

  1. Corregir el HTML: Asegúrate de cerrar todas las etiquetas correctamente. En tu caso, falta cerrar la etiqueta <img>:

    <img src="alura.jpeg" alt="Alura Challenge" />

  2. Colores de fondo y texto: Si el contraste entre el fondo y el texto no es suficiente, considera ajustar los colores para mejorar la legibilidad. Puedes usar herramientas en línea para verificar el contraste.

  3. Diseño responsivo: Asegúrate de que tu diseño se vea bien en diferentes tamaños de pantalla. Puedes usar @media queries en CSS para ajustar el diseño en dispositivos más pequeños.

    @media (max-width: 600px) {
    body {
        font-size: 16px;
    }
    p {
        width: 80%;
    }
    img {
        width: 100%;
    }
}

  4. Consistencia en el diseño: Asegúrate de que los elementos tengan un diseño coherente. Por ejemplo, puedes unificar el estilo de los botones y enlaces.

  5. Espaciado y márgenes: Revisa los márgenes y el espaciado para asegurar que los elementos estén bien distribuidos y no se vean amontonados.

  6. Tipografía: Puedes explorar diferentes fuentes y tamaños para mejorar la apariencia del texto.

Espero que estas sugerencias te sean útiles y te ayuden a mejorar tu proyecto. ¡Bons estudios!