Stat card

Community feedback

• 

  P

  Lo-Deck•3,530

  @Lo-DeckPosted 4 months ago

  Hi well done for this challenge,

  You can use picture tag to display different image depending on the size. Here a link : MDN.

  <picture>
    <source media="(max-width: 799px)" srcset="your path" >
    <source media="(min-width: 800px)" srcset="your path" >
    <img src="your path" alt="your description" >
  </picture>
  

  And if want to blend different element there is this property which can help you, MDN.

  Hope to be helpful.

  Marked as helpful

  1

  ---

  

  chukwuma jennifer•160

  @jhenniiferPosted 4 months ago

  @Lo-Deck Thank you so much

  0
• 

  P

  Rahexx•920

  @RahexxPosted 4 months ago

  Great job with this challenge! Here is some feedback from me:

  Website

  1. Your website looks great and is close to the design, but for the screen width range of 600px - 800px, it doesn't look ideal. If you could target 768px, it might work better.

  HTML

  1. There is an empty alt tag in your img tag. This will cause issues for users with screen readers, as they won't know what is in the image. This is an accessibility concern.
  2. Great use of the BEM methodology! The class names are on point, clean, and readable, so props for that.

  CSS

  1. Great naming of your CSS variables! I immediately understand their purpose.
  2. If you wanted to make the image closer to the design, you can add a ::before pseudo-element to the section, hover over the entire section, and apply the background accent color with some opacity change. This will give you a similar effect to the design. You could also use the filter property: CSS filter.
  3. The 600px breakpoint seems to have been set a bit too early. You could consider a more gradual transition for the range between 600px and 800px. In these challenges, you get both desktop and mobile designs, so feel free to experiment with a design that works well between those ranges.
  4. Using CSS Grid was okay, but I would suggest using Flexbox when positioning elements on a single axis. Of course, you can use whichever method suits you better, but this advice is especially useful for more complicated projects.
  5. Your styles are clean and readable.

  Good work! You've made quite a lot of progress. Good luck with the next challenge!

  Marked as helpful

  0

  ---

  

  chukwuma jennifer•160

  @jhenniiferPosted 4 months ago

  @Rahexx corrections made, thank you.

  1