@MelvinAguilar
Posted
Hola @Saitraru 👋, ¡Buen trabajo por completar este desafío!
Aquí hay algunas sugerencias que podría implementar para mejorar su código:
1.Intente usar etiquetas semánticas en su código. Más información aquí.
Usando etiquetas semánticas:
<body>
<main class="card-container">
. . .
</main>
<footer class="attribution">
. . .
</footer>
<body>
2.El contenedor no está centrado. Puede usar flexbox para centrar elementos:
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Otra opción es utilizar Grid para centrar elementos:
body {
width: 100%;
min-height: 100vh;
display: grid;
place-content: center;
}
Luego, elimine margin: 170px auto 50px; en el selector de clase .card-container, porque si utiliza alguna de las opciones de arriba ya estará centrada la carta.
Mas información (en ingles): A Complete Guide to Flexbox (CSS-Tricks) | How TO - Center Elements Vertically (W3Schools)
3.La etiqueta <div> se usa para definir una sección en un sitio web. Se usa para tener un contenedor para tener estilos con CSS, establecer una alineación especial o el contenido necesita un posicionamiento especial.
No se utiliza para colocar texto adentro de ella, por ejemplo en <div class="units">Likes</div>, se puede utilizar algún otra etiqueta, por ejemplo la etiqueta <p>, el elemento <p> es contenido de párrafo, generalmente texto.
5.Agregue una etiqueta <h1> en su solución. El elemento <h1> es el encabezado principal de una página web. Solo debe haber una etiqueta <h1> por página, y siempre evite saltarse los niveles de encabezado; comience siempre desde <h1>, seguido de <h2> y así sucesivamente hasta <h6> (<h1>,<h2>,...,<h6>) (Referencia)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
Si lo desea, puede crear un <h1> y darle un texto adecuado:
<h1 class="sr-only">Profile Card of Victor Crest</h1>
La clase sr-only es una clase especial que puede agregar para ocultar un elemento visualmente, pero estará disponible para los lectores de pantalla, así, tendría su encabezado principal sin que se muestre en pantalla y afecte el diseño:
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Espero que esos consejos le ayuden.
¡Buen trabajo!
