Blog preview card made with semantic HTML and CSS

Community feedback

• 

  P

  Levi•230

  @law973Posted 16 days ago

  Hey there! The solution looks really good. There are a couple of things worth considering. I'll preface this by saying that my comments can get long and I usually focus more on what could be improved than on what was done well, but I do that because I like everything else I've seen.

  Without further ado, and in no particular order:

  • The card should use either an article tag or a div (probably the former with the section tags being used), and the main tag should go around the card; the main tag contains that which is considered to be the "main" content, and normally would not be tied to a specific component on the page.
  • I am not sure that h2 is the best choice for the author name when something else (like p or span) could be used instead, since a heading is meant to be part of a "table of contents" of sorts and have content that follows it.
  • On the topic of headings, the usage of h1 might not be the most appropriate either. If this component was part of an actual page, there would probably be other cards/previews, and this preview card would not be using an h1, of which there should only be one per page. I believe h2 would be more appropriate. (Having said this, heading levels should normally not be skipped either.)
  • The alt text for the blog component image could perhaps be more descriptive in regards to what is being visually portrayed, but I'll admit I'm unsure about this. I have been told that for decorative images (such as background decorations) the alt should be left blank (alt=""), and there's not a whole lot of information that the blog image happens to provide outside of visual appeal.
  • When the footer has position: fixed, it's noticeable (albeit at very small viewport widths) that it isn't centered and stays to the left. In situations where elements have this type of positioning, here's a trick to keeping them centered horizontally:

  left: 50%;
  transform: translateX(-50%);
  

  • Using clamp() for font sizes to make them change dynamically along with the card is an option that could be considered. This would also have the bonus of removing much of the media query at the end and trimming up the code quite a bit.
  • The challenge mentions being able to see hover and focus states for interactive elements, so I would consider using :focus on the blog article's title (though many people don't seem to bother with this sort of thing, so it might just be me).
  • At the moment I'm fond of using the font shorthand, where the font-weight, font-size, and line-height can be specified in one line (though the font-family must be declared there as well). (Perhaps it's not the best for readability, or there's a technical drawback I'm unaware of, but I think it's worth mentioning!)
  • If the card is set to start and stop growing in width at the right times, then I believe that the width could be moved outside of the media query and the max-width values could potentially be removed (and combined with using clamp() for font sizes, this would remove the need for that media query altogether).
  • Adding a top margin to the card would give it some space from the very top of the page on certain viewport sizes, which would look nicer.
  • The style guides typically mention making the solutions compatible with screen widths as low as 320px, and here the card goes beyond the screen at that point. Keeping this in mind with the usage of max-width or side margins may be a good idea for future solutions.
  • It is my understanding that for accessibility, it's good to aim for making things visible/useable up to a 200% zoom, and at narrower screen sizes too. If you ever want an extra challenge, try this out sometime.
  • Since the Frontend Mentor link opens in a new tab, consider including a hidden span for accessibility purposes, something like this:

  .sr-only {
      border: 0 !important;
      clip: rect(1px, 1px, 1px, 1px) !important;
      -webkit-clip-path: inset(50%) !important;
      clip-path: inset(50%) !important;
      height: 1px !important;
      margin: -1px !important;
      overflow: hidden !important;
      padding: 0 !important;
      position: absolute !important;
      width: 1px !important;
      white-space: nowrap !important;
  }
  

  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"><span class="sr-only">(Opens in a new tab)</span>Frontend Mentor</a>.
  

  I like that the card link actually goes to a page with information on HTML and CSS. You did a good job on matching the design screenshots. I also like how thorough the README file is (those Figma shortcuts might come in handy). Please don't be discouraged by the amount of things I mentioned; there's always a lot to learn and not too long ago I didn't know any of these things either. I need to update my own solution actually.

  This ended up being longer than even I thought it would. I think I'm done commenting today...

  Marked as helpful

  1

  ---

  

  Outstandinggirl13•70

  @Outstandinggirl13Posted 16 days ago

  @law973 Wow, I cannot thank you enough for taking the time to analyze my work so carefully and provide such detailed and comprehensive feedback. Your suggestions are incredibly valuable to me, and I appreciate the effort you put into helping me. Trust me, if I could hit the 'mark as helpful' button multiple times, I would!! Now, I just need some time to fully digest everything 😳

  1
• 

  M Asim Saeed•250

  @asimsaeed353Posted 20 days ago

  Very accurate and outstanding design!!

  1

  ---

  

  Outstandinggirl13•70

  @Outstandinggirl13Posted 19 days ago

  @asimsaeed353 Thanks so much! Glad you liked the design 😊

  1