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

3-column preview card component using HTML and SCSS

@hudarashid

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


Hello, any feedback is welcome :D

Community feedback

Cristina 360

@cr1deg0

Posted

Hi Huda, looks very good! A few things you may want to revisit to make it even better:

  • the Learn More button for the Luxury cars is a bit off compared with the other two.
  • have a look into the accessibility issues in the report.
  • you could round the corners of the card with border-radius: 12px;
  • the background colour is more greyish in the design.

Cheers, Cristina

Marked as helpful

0

@hudarashid

Posted

@cr1deg0 Hi Cristina, thanks for pointing out at my mistake! I struggling at finding out the issue. However, i still unsure what to do with some accessibility issue in the report which is :

  • how to put the main 'landmark'
  • tried to put landmarks on page content but getting more accessibility error
  • unsure how to adjust my page heading.

Thanks in advance for helping ! -huda-

0
Cristina 360

@cr1deg0

Posted

@kopisatu Hi Huda,

You can try using h1 or h2 for the car types (Sedans, SUV, Luxury). This may fix both your accessibility issues. I used h2 for my solution.

I'm not sure about the 'main' landmark one as I've never experience this before, but you may want to look here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role

Sorry I cannot be of more help, still learning myself!! Regards, Cristina

0

@hudarashid

Posted

@cr1deg0 Thanks Cristina! I will look into it. All the best and keep going in learning! Regards, Huda :)

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