Tailwind built blog preview card

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @btjl!

  Your solution looks excellent!

  I have a few suggestions for improvement:

  • Use main to wrap the main content instead of article. The tag article would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

  • Also for semantic reasons, use <h1> for the main title instead of p. Unlike what most people think, it's not just about the size and weight of the text.

  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.

  All these tag changes may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  3

  ---

  

  Ritmol•20

  @btjlPosted 10 months ago

  Thanks @danielmrz-dev for the suggestion.

  I agree with the <h1> tag suggestion as the page currently doesn't have one!

  Also, would you still suggest the main change even though my App.tsx contains the main tag as the layout for the page? Would changing it to a simple div be ok?

  1

  

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  @btjl

  I'd use only main. In projects like this it's possible to use only one tag as a wrapper. Unless you use more than one for a specific reason, it's not necessary 😊

  1
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  Regarding the semantics of your HTML, I can tell you a couple of things:

  • You could use a heading instead of a paragraph for the HTML & CSS foundations text. For example, h1 or h2 as you see fit.
  • For your <p class="mt-3 text-sm">Published 21 Dec 2023</p> you can use the time tag: <p class="mt-3 text-sm">Published <time datetime="2023-12-21">21 Dec 2023</time></p>. More info
  • I think that the img of the banner does not occupy the corresponding width because you applied a height: 200px, at least on desktop screens, this causes the borders to not be seen correctly. To solve it, you could leave the height: auto

  Marked as helpful

  1

  ---

  

  Ritmol•20

  @btjlPosted 10 months ago

  Hi @Blackpachamame,

  Thank you the suggestions! Learnt something new regarding the time tag!

  W.r.t the image, I set it explicitly to 200px as it appears that the mobile version retains the same height as the desktop version but with a different width. Without defining the height explicitly, the height shrinks proportionally with the width to accommodate the smaller space. Would you know of another way this could be achieved? Perhaps through a CSS property?

  1
• 

  sankalp kumar•180

  @sankalp475Posted 10 months ago

  Hi, Excellent project👏.

  I have some simple suggestion you might find interesting. I noticed that you have <p>Published 21 Dec 2023</p> in your code When a screen reader is reading the above it will pronounce 21 Dec 2023 as it is. This should be wrapped in <time datetime="2023-12-21">21 Dec 2023</time> This is machine readable therefore it is more accessible for user's with visual impairment and it is also accessible by calender such a google calender. To find out more about the time tag check out this article

  Other than that your project is EXCELLENT 🤩

  Happy coding 🙃

  Marked as helpful

  0
• 

  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.

  • 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.

  • For a photo of a person, use their name as the alt text .Always include the alt attribute for images. Even if an image is purely decorative and doesn't convey specific information, using an empty alt attribute (alt="") is the recommended practice.

  • Use min-h-screen instead of h-screen

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Ritmol•20

  @btjlPosted 10 months ago

  Thanks for the suggestions! @MelvinAguilar

  May I know the rationale for using min-h-screen rather than h-screen there are conflicting opinions online.

  0