Blog preview card

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted about 2 months ago

  Hi, I notice a few things that need changes in your code. I hope these pointers help you.

  Learning to translate a design and its content into appropriate html is a really important skill that is essential to master. Looking at this challenge it has some specific requirements like

  • treating that main image as decorative. It's not bringing any meaning to the content. And your current alt description of "image" is very bad as it will lead screen readers to announce "image, image". For decorative images, leave the alt attribute value completely empty.
  • learning is not a heading. It's just a paragraph, a topic or category for the blog.
  • this card has a hover style in the design which indicates it is interactive. And looking at the content it is clearly meant to serve a functional purpose in a site — to signpost people to this blog. That means it MUST have a link in it. This needs to wrap the blog title text, but be inside the heading element.
  • Still thinking about the purpose of this component and where it would be used on a site, it would never be used to serve up the main heading/title of a page. That means it shouldn't have a heading level 1. Use a lower importance heading level like h2 instead that's more suited to this component.
  • that author name should really be in a paragraph. It's not a big problem, but as a general rule try to always place text into meaningful elements not just spans or divs.
  • on the subject of divs you have way too many in this card. The divs wrapping the image, learning/date and main card text can all be removed. You only need one for the bottom of the card to acheive the layout of that part, all the others are not needed. Keep the html as simple as possible.

  In CSS

  • Its better for me to link fonts in the html head instead of css imports.
  • get into the habit of including a full modern css reset at the start of the styles in every project. It will really help you! Andy Bell or Josh Comeau both have good ones you can look up and use.
  • the body needs a min-height 100svh.
  • don't use position absolute to try and center components on a screen. This is breaking your solution in some views.
  • don't set the card width in %. That's unnecessary and really bad to do because you lose all control of it that way. How do you know what 30% equates to? You can't know. Instead let it be 100% wide but give it a max width in rem so it has a limit set. That way it can be narrower when it needs to be like on small screens but won't grow wider than the limit you've set.
  • there is no benefit to using flexbox column in this card unless youre planning to use the gap property (instead of margin) for vertical spacing.
  • Overall I think your css can become lots simpler once you've simplified the html so that should help you see all the many lines that can be removed in css. Simplify as much as you possibly can. Make sure every property you keep is there for a specific reason.
  • place classes directly on what you want to style. Try not to use element selectors. In a real project they are only used at the very start of a project stylesheet (after the reset) to set up some default styles. After that (and in component specific styles like this!) it should be single class selectors in css as much as possible.
  • there is no need for a media query in this challenge. You can remove it. But in future challenges when you do need them, try to work mobile first and use min-width media queries only, preferably defined in rem or em instead of pixels.

  Good luck.

  Marked as helpful

  2
• 

  P

  Steven Stroud•11,870

  @StroudyPosted about 2 months ago

  Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • These <span> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.<span>Greg Hooper</span>

  • Using position: absolute is not always best practice because it removes elements from the normal document flow, making layouts harder to manage and potentially causing overlap or misalignment on different screen sizes. Instead, use flexible layout techniques like CSS Grid or Flexbox for more responsive and maintainable designs.

  • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

  • For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

  • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  1

  ---

  

  T

  Grace•31,090

  @grace-snowPosted about 2 months ago

  @Stroudy what do you mean by this? There’s nothing at all wrong with using width 100%, in fact it’s often a good thing.

  Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes.
  

  I’m not sure what you mean by this or why min-width 100% would be recommended.

  1

  

  P

  Steven Stroud•11,870

  @StroudyPosted about 2 months ago

  Hey @grace-snow, Thank you for your insightful feedback. Upon reflection, I realize I’ve been using width: 100% quite frequently and may have misunderstood your earlier points. Now, I see that your advice applies mainly to containers in responsive layouts. I appreciate you bringing this to my attention, as I don’t want to confuse others with inaccurate feedback and now will remove it from my feedback.

  Your guidance has been invaluable, and I’m always open to learning and improving based on others’ expertise. Thank you again for sharing your wisdom!

  0