Blog Preview Card using HTML & Custom CSS Properties

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

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

  • When you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the name of the "HTML & CSS foundations" text in an <a href="#"> tag. This way, users can click on it, expecting some action, like navigating to a page with more information about the fundamentals

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

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

  • Use an empty alt attribute (alt="") for decorative images to signal that they are only used as decoration for assistive technology and ignore it, reducing unnecessary noise when navigating the page.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Rafael•50

  @rafaelgonzales612Posted 10 months ago

  Hi Melvin,

  Makes sense! I've updated my code to better enhance user experience and make it a little less cluttered for assistive tech.

  Thank you for the suggestions! 😊

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello Rafael!

  Your project looks really good!

  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 (vertically and horizontally):

  • Apply this to the body (in order to work properly, you can'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

  ---

  

  Rafael•50

  @rafaelgonzales612Posted 10 months ago

  @danielmrz-dev

  Just applied it and it works great, thanks for the tip! :)

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  @rafaelgonzales612

  I'm glad I could help 😁

  0
• 

  nirmalaaccount•90

  @nirmalaaccountPosted 10 months ago

  Hi Rafael! i'm good to to see your's blog page.it's a amazing alignment and designing. for the card centering you can use (margin: 50px auto).still i'm also learning responsive mobile-first design so practicing lot! we will gain better experience.

  0