Responsive Preview Card Component | Flexbox, Media Queries, CSS Filter

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, your solution looks good on all screen sizes, I'd only have a few suggestions:

  1. % isn't the best choice when setting a width, or if you want to keep this you could set a max-width (in rem or px) on the component as well that would keep it from stretching as the screen gets really wide.

  2. Alt texts should be descriptive to help people using screen readers (and others who can't see the images for some reason) have an idea what the image is about. "hero" of course won't help much ^^

  3. Headings h1-h6 have semantic meanings and shouldn't be chosen based on how their default state looks like. In this case, since there's only one title, h1 is the best choice.

  4. Your card div can be swapped for main to get rid of the other accessibility issue you have.

  Other than these, I think you did a good job, well done! :)

  3
• 

  Muh Suryadi Triputra Rahman•400

  @msuryaditriputraRPosted about 3 years ago

  Hy.. thanks a lot for your suggestions, it makes me better..

  I will apply it to my code.. thanks

  0