HTML and CSS practise

Community feedback

• 

  Darshan•210

  @its-subhashPosted 9 months ago

  Hey @paupalazzesi , your solution looks pretty good but I just came across two major problems i would like to address, and I have some advice to how to correct those with least amount of efforts.

  1.Fixed Footer : Footer or say attribution is fixed at one place so while scrolling of even normally it comes above card, this problem can be fixed by completely removing .attribution{} class and adding flex-direction:column and gap:2rem inside body selector.

  2.Scroll Bar: It's not that of a big deal and can be ignored but in my opinion there should not be need of a scroll bar for just a card. And the best solution for it is quite headache to do when you came this far, so the easiest way I can do it is you can put margin-top:16vh insted of margin:20vh in .card class, this will add margin to the top only and it'll be centered.

  Additionally I saw lots of margins and paddings on elements which isn't that good thing, so you can explore it's better alternative, like explore flex and grid little more.

  Rest of the code was really good, I hope you'll find this helpful.

  Marked as helpful

  0

  ---

  

  Maria Paula Palazzesi•190

  @paupalazzesiPosted 9 months ago

  @its-subhash Thanks! I find your comments really helpful. I hope I could correct this bugs soon.

  0
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 9 months ago

  ¡Saludos Maria Paula! has hecho un buen trabajo 😃

  📌 Te dejo algunas sugerencias

  • Para mejorar la semántica de tu HTML, podes cambiar tu <div class="card"> por <main class="card"> y <div class="attribution"> por <footer class="attribution">
  • Podes usar display: block en tu img para quitar el espacio en blanco por debajo de la imagen. Aunque en este caso es visualmente irrelevante, pero puede ayudarte a calcular mejor los espacios entre un elemento y otro
  • El texto Learning no es un button si no mas bien podría ser un enlace a, ya que, al darle click te llevaría a otra página. Los botones se usan para funcionalidades como enviar un formulario o cambiar el tema del sitio
  • Los encabezados h1, h2, etc, deben ir en orden del mayor al menor. En este caso tu h2 podría ser tranquilamente un p
  • Como dijo el compañero en el otro comentario, no recomendaría usar position: fixed para este footer, si lo notas, en algunas pantallas llega a superponerse con la card y es algo molesto. En su lugar, podes seguir la recomendación que te dejaron de usar flex-direction: column en el body, para que se vea correctamente tenes que quitar el position: fixed del footer y los margin en el card y dejar tu body de la siguiente manera:

  body {
      background: var(--yellow);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 2rem; /* Esto genera un espacio entre el main y el footer */
      min-height: 100vh;
      margin: 0; /* Esto quita los márgenes que vienen por defecto en los navegadores en el body, podrías aplicarlo directamente como parte del reset en tu selector universal (*) */
  }
  

  Espero que estas sugerencias te ayuden a mejorar 🤓

  0

  ---

  

  Maria Paula Palazzesi•190

  @paupalazzesiPosted 9 months ago

  @Blackpachamame Gracias por tus aportes y la buena onda! Realmente me sirven muchísimo para seguir aprendiendo. 🫡 Saludos!

  0