Blog preview card built using simple HTML and CSS

Community feedback

• 

  Marcos Travaglini•6,210

  @Blackpachamame

  Posted over 1 year ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">

  📌 Some suggestions

  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • Apply max-width: 100% to your img so that it occupies the correct width within the container. Remove width: 300px
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
        font-family: 'Figtree', sans-serif;
        background-color: var(--background-color);
        padding: 30px 40px;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px; /* Separate the main from the footer */
  }
  

  21

  Marked as helpful
• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • The cursor: pointer property should only be used on interactive elements that perform an action. If you apply it to a <main> tag, you might confuse the user, making them think that clicking will trigger something.

  • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information.

  • For a photo of a person, use their name as the alt text

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  I hope you find it useful! 😄

  Happy coding!

  11

  Marked as helpful
• 

  P

  Daniel 🛸•44,790

  @danielmrz-dev

  Posted over 1 year ago

  Hello @Nsebo!

  Your project looks great!

  I noticed that you used margin to place the card in the middle of the page. Here's a very efficient way to center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  11

  Marked as helpful
• 

  Abdul•8,560

  @Samadeen

  Posted over 1 year ago

  Hello Nsebo

  Great work on completing this challenge. Cheers!! 🎊🎊

  Some adjustments are needed to place your container in the middle properly.

      display: grid;
       place-content: center;
       min-height: 100vh; 
  
  

  I hope to see more solutions from you.

  11