Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML CSS GRID

Grishmita 105

@Grishmita

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


please leave your suggestion and critics it will be helpfull for me

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @Grishmita 👋🏻, it's me again 😅

Since I left some suggestions on your last post, I wanted to suggest my help with this one as well.

  • <section class="grid-container">...</section> should be<main class="grid-container">...</main> this will fix accessibility issues. Don't forget to generate a new report once issues fixed.
  • To fix HTML issues, just change backslash \ in your img tag <img src="images\icon-sedans.svg"> to forward slash / such us this one <img src="images/icon-sedans.svg">. Generally, img tags must have an alt="" in tag, but in this case since the icon is for decorative purposes only, you can put aria-hidden="hidden" to hide it from screen readers.

I hope this was helpful, I think you got a really good hang of CSS grids, keep going. Cheers 👾

Marked as helpful

1

Grishmita 105

@Grishmita

Posted

@kens-visuals thank you again ken i didnt knew about the screen reader thing I guess get know something new this time thank you for being so generous and guiding so briefly 🙏 🙏

0
P
Ken 4,915

@kens-visuals

Posted

@Grishmita you're welcome 👌🏻

0

@lordexg

Posted

Images must have alternate text.

<img src="source" alt="a describe for the img">

if the image source has been deleted or something happens to it, the alt text will appear next to the image.

I am not an expert but I want to give some help 😄😄

Marked as helpful

0

Grishmita 105

@Grishmita

Posted

Thanks a lot 🙏

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord