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

Order summary component with Flexbox, media queries and box shadows

#accessibility

@JulioCinquina

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, everyone! 👋🏻

I had fun sharpening my Flexbox skills in this challenge. However, I was a bit unsure about the best practices for styling links with CSS.

I styled the :hover and :focus states as required by the challenge, but did not add rules for the :link, :visited and :active pseudo-classes. I did not notice any interference from the browser's default styles, but maybe I should have added rules for those pseudo-classes too, just in case. What do you think?

I added the accessibility tag because I ensured color contrast ratios in text follow WCAG 2.0 level AA, and VoiceOver and TalkBack seemed to read out the page smoothly. I would be grateful for any accessibility-related feedback that you might have.

Any other feedback is much appreciated. Thank you!

Community feedback

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