Blog Preview Card

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 7 months ago

  HTML:

  • Use classes instead of IDs.

  • Profile image needs a short, descriptive alt text: "Headshot of Gary Hooper".

  • Footer text must be wrapped in <p>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Remove the html selector.

  • font: weight 500; should be font-weight: 500.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as the body is 100% wide by default.

  • Do not use % for margin, padding or gap.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • Remove the width on .container.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  FIXING INCOMPLETE TRANSITION

  • Currently the Hover effect which has been applied for the component (.container) has an issue in transition property, It's simply because you've been using it wrongly.

  ---

  .container:hover {
    box-shadow: 10px 10px #000;
    transform: scale(1.02);
    transition: transform 500ms ease;
  }
  

  ---

  • Due to that whenever the user hovers the component it will smoothly animate but as soon as the user get out of hovering area the component itself will suddenly goes to it's initial state without smoothness as like it's starting state.

  ---

  • To fix this we need to declare the transition property on normal class, i mean the class where we not linked to any pseudostates like hover, active etc.

  ---

  • These are the fixed css rules,

  .container {
    transition: transform 500ms ease;
  }
  .container:hover {
    box-shadow: 10px 10px #000;
    transform: scale(1.02);
  }
  

  • Now you will get a smooth-in-out transition effect without sudden drop during hover.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0