Not Found
Oops! You need to be logged in to do that
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 Card using CSS and Flexbox

#sass/scss

@stevednick

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Stephen Nicholls’s questions for the community

I've used rem measurements extensively throughout. I have no idea if this is good practice and if not would love suggestions as to how I can improve this.

Very happy to receive suggestions for improvements. Thanks a million.

Community Feedback

PhoenixDev22 7,190

@PhoenixDev22

Posted

Greeting stevednick , Great work , your solution is really good. To get rid of the accessibility issue I would suggest to replace <h3> by <h2> click here to read more. keep and happy coding

Marked as helpful

1

Grace 21,080

@grace-snow

Posted

Hello

This looks pretty good overall except the attribution is overlapping the component on mobile - no need to position that absolutely

Here are some tips for improvement

  • look up how and when to write alt text on images, and how to treat decorative images
  • you have some invalid html in here at the moment, opening h2 tags but closing h3 tags
  • annual price and the price can't b I th be headings, that makes no sense. If Annual price is the heading, then the price is the content belonging to that heading - a paragraph
  • think again about when to use buttons and when to use anchor tags. What is it you expect proceed to do? What is it you expect change to do? (If this was a real project) It's really important to choose the right element for the job
  • not sure why you have two media queries in here. Most of your css is mobile first except the background image on body for some reason(?) I'd switch that, use the mobile image as the default and move the desktop background into the min width media query you've already got

Well done on this, good work so far. And yes absolutely use rems, that's spot on. It means everything will scale together no matter the users zoom or font size settings

Marked as helpful

1


@stevednick

Posted

@grace-snow

Hi Grace, thank you so much for such detailed and helpful feedback. I'm working on all those fixes now. I notice a few mistakes after my hurry to get this submitted last night, and really don't know what I was doing adding a second media query (doh!).

Everything you say makes perfect sense to me but I will definitely have to do a little more reading abut using buttons and anchor tags. In this case it feels to me that all the clickable elements are likely to navigate you elsewhere (except possibly the change button?). Does that mean that they should all be links? I'll do some reading!

Thanks again, I really appreciate it!

0

@stevednick

Posted

@grace-snow

So, have done some reading and I've decided to keep the cancel item as a link as it would likely just navigate away but have proceed and change as buttons as they would be changing things in the front or back end. Is this how you would approach this?

I think I am starting to understand better when to use on or the other but it seems like a bit of a dark art!

0

Grace 21,080

@grace-snow

Posted

@stevednick I would only have change as a button as I'd presume it would toggle the price to monthly or something

This isn't a form so I'm not convinced proceed would be a button. I think it would navigate to another page. Even the label "proceed" implies movement/navigation

Marked as helpful

0

Anosha Ahmed 9,700

@anoshaahmed

Posted

To get rid of the accessibility issue shown in your Report, start your headings with <h1>, and move up by one level each time

Great job! :)

Marked as helpful

0

Please focus on giving high-quality, helpful feedback and answering any questions stevednick might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!