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

Responsive stats preview card component using flex-box

@arfarobs

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is the first time that I have intentionally made one of these challenges responsive, so any feedback would be great.

Getting the colour on the images was a little tricky.

I got a little impatient with this towards the end so I may refactor the code in the upcoming days.

It took me much longer than previously expected.

//Updated my accessibility errors. Corrected typos. 04/02

Community feedback

@Nick-Gabe

Posted

Hi Arthur! Your solution is really responsive, good job.

But I would suggest you to use landmarks inside your body, they are super important for accessibility. You can see about it right here: W3schools - Landmarks

And at least for me, the stats tab makes more sense to be an unordered list instead a div.

Nice solution, see ya Arthur👋🙂

Marked as helpful

0

@arfarobs

Posted

@Nick-Gabe

Hey, thanks for the link.

The unordered list seems like a great idea, I didn't think of that.

0
Naveen Gumaste 10,460

@NaveenGumaste

Posted

Hay ! Good Job Arthur Roberts

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

Keep up the good work!

Marked as helpful

0

@arfarobs

Posted

@Crazimonk

Thank you.

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