Blog preview card built using simple HTML and CSS

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months 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 */
  }
  

  Marked as helpful

  2

  ---

  

  Uzochukwu Cecilia Oloh•50

  @NseboPosted 10 months ago

  @Blackpachamame Thanks so much for your honest feedback. Your code made more sense when I added it to mine :) I had problem understanding the difference between max-width and width, I need to learn more on max-width and width. Thanks once again for taking your time to correct my work.

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months 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!

  Marked as helpful

  1

  ---

  

  Uzochukwu Cecilia Oloh•50

  @NseboPosted 10 months ago

  @MelvinAguilar Thanks for your honest feedback and your suggestions, your suggestion made me noticed that I was done with coding. I will have to add the pseudo class property :active and color changes when clicked on the title.

  Thanks for the resource added, will read more the on the em and rem. Thank you!

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months 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!

  Marked as helpful

  1

  ---

  

  Uzochukwu Cecilia Oloh•50

  @NseboPosted 10 months ago

  Thank you for taking your time to look through my work, I appreciate your honest feedback and i will do the needful to my code. Thank you! @danielmrz-dev

  1
• 

  Abdul•8,540

  @SamadeenPosted 10 months 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.

  1

  ---

  

  Uzochukwu Cecilia Oloh•50

  @NseboPosted 10 months ago

  Thanks for your honest feedback, I will make the correct right away. Thank you!@Samadeen

  0