My solution to the blog-preview-card challenge using basic HTML/CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @Med-ko!

  Your solution looks great!

  I have a suggestion for improvement:

  • I noticed that you used HTML headings for the texts on the card. Here's a quick guide on how to use them:

  The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Med-ko•30

  @Med-koPosted 11 months ago

  @danielmrz-dev Thank you so much for the feedback, I appreciate it. I'm going to take your advice and try to come up with a better way to use HTML headings in the code.

  1
• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @Med-ko 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design. Replace the width: 25% in the main for a max-width: 384px
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.
  • The body should not have its height limited. Instead of using height: 100vh, use min-height: 100vh.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper" or you could leave it empty alt="".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Med-ko•30

  @Med-koPosted 11 months ago

  Hi @AGutierrezR , Thank you very much for the advice, I appreciate it.

  I already corected the General structure using span and time;

  CSS and styling: I will try to improve the code more using your advice. it's very enlightening so I really appreciate the detailed feedback, thank you again.

  Your feedback was very helpful

  0
• 

  Darijo Šalković•70

  @D-SalkovicPosted 11 months ago

  Hey @Med-ko,

  My suggestion is adding main:hover { } selector and adding box-shadow: 20px 20px; inside so when you hover your cursor over the card it has an animation.

  You did a good job btw :)

  1