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 Semantic markup, mobile first styling.

Camille 130

@fyrfli

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


Fixed the grid spacing for the price plan line for the desktop version.

Community feedback

P

@shashreesamuel

Posted

Hey fyrfli good job completing this challenge. Keep up the good work.

Your design looks great however in my opinion you might want to consider increasing the value for the margin top to get the card in the exact center of the page.

In terms of your accessibility issues

  • heading tags must only increase by one level
  • anchor tags <a> cannot be nested in button tags <button> since both tags are interactive.

Once you correct your accessibility issues your validation errors should disappear.

I hope this helps

Cheers Happy coding. 👍

Marked as helpful

1

Camille 130

@fyrfli

Posted

@TheCoderGuru I tried moving the margins for the top a bit and ended up not liking it personally. Now that you mention it, though, this isn't about what I like, is it? :D I'll update that in a moment.

Funny you should mention the report ... I just got done updating my solution to fix those issues. :D Thanks!

1
Camille 130

@fyrfli

Posted

@TheCoderGuru Goodness ... just visited your profile and I see you're from Trinidad! Hi fellow Caribbeanite. I'm from Jamaica.

0
Naveen Gumaste 10,480

@NaveenGumaste

Posted

Hello Camille ! Congo 👏 on completing this challenge

Just one thing:

  • The right of the "change" is have more padding or margin so reduce it.

happy Coding😀

1

Camille 130

@fyrfli

Posted

@Crazimonk didn’t notice that! I’ll fix that ASAP.

1
Camille 130

@fyrfli

Posted

@Crazimonk Fixed it! :) Thanks for noticing that.

1

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