BlogPreviewCard

Community feedback

• 

  iyedoo•120

  @iyedooPosted 2 months ago

  Close to perfect! You just missed some simple things!

  • The yellow text color is actually on hover. The color in normal state is black. And it has a cursor: pointer;
  • You forgot to add the card's shadow. I used box-shadow for that setting the blur to 0
  • Some smaaaaall spacing and font-size details that don't really matter
  • Using classes for all elements wasn't a very good idea I guess because it made me go back to the HTML file to understand what the hell the ".background" in the css file was.😅 I prefer making it as obvious as possible for anyone reading my code.
  • Using hex colors instead of hsl() (I don't know if that's that important)

  Something I liked is using semantic HTML which we all learnt after our first submissions in Frontend Mentor. Good job implementing that here!

  0
• 

  HOVA63•20

  @HOVA63Posted 2 months ago

  The "HTML & CSS foundations" should be black and should turn yellow when you hover on it

  0
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey, Great job with this solution you should be proud, A few things I noticed,

  • Missing a <meta> description tag for SEO purposes,
  • Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,
  • Background and foreground colours do not have a sufficient contrast ratio(h1.MainText), Low-contrast text is difficult or impossible for many users to read. Check out this Discover and fix low-contrast text with Chrome DevTools,
  • Having better alt="" descriptions for accessibility is a must check this out Write helpful Alt Text to describe images,
  • You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
  • Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.
  • ‍Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
  • You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
  • Another great resource for px to rem converter.
  • Without overloading you with too much information, Here is a snippet of unnecessary code, Height and width that are redundant here

  .mainBody {
      background-color: white;
      max-width: 384px;
      /* width: 100%; */
      /* height: auto; */
      border: 1px solid black;
      border-radius: 20px;
      padding: 24px;
  }
  

  I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻

  0