Skip to content
Submitted about 2 years ago

Reto # 4 Profile Card Component

Saitraru•150
@Saitraru
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hola, este es el código propuesto para este reto. Si alguien gusta de revisarlo y entregar un feeback, que me permita seguir aprendiendo, se lo agradecería muchísimo.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    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;
}

    Mas información

    Espero que esos consejos le ayuden.

    ¡Buen trabajo!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord