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 Card using CSS

@aramatsolrac

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


At the beginning of this challenge, I thought I would not be able to finish. However, I kept going and trying to figure out how to do it, and now I could not be more proud of myself that I did it! :D

So, please feel free to give me any feedback. I am sure that I will learn a lot from that! I am looking forward to reading it!

Thanks! :)

Community feedback

P
Grace 27,950

@grace-snow

Posted

Overall this is really good

Just some common beginner improvements to make

  • swap section for a main element
  • remove the alt text value on music icon and leave of intentionally blank like alt=“”. To ensure this is ignored by all assistive tech and search engines, I recommend adding aria-hidden true or role presentation
  • it’s best practice to include a css reset at the start of all css projects. That removes different browser styles. I like Andy bells modern css reset, but there are loads out there. Eg it will set images to be display block
  • in css never put font size in px. Use rem instead
  • probably change height 90vh to min-height.

There may be other things but all pretty minor so I’ll leave it there.

Good luck on your next challenge 👍

Marked as helpful

1

@aramatsolrac

Posted

@grace-snow I just finished all the improvements! I couldn't be more thankful for your feedback. I feel like I have learned a lot in the couple of days that I have been studying to put it into practice. Thanks again :)

1
P
Grace 27,950

@grace-snow

Posted

You’ve removed an essential meta tag from the html head that makes this viewable on mobile. You need to put that back in - it’s something about viewport. If you redownload the starter files it will be there or just google viewport meta tag and should find it

Marked as helpful

0

@aramatsolrac

Posted

@grace-snow Thanks for the feedback. :D I just fixed that.

0
P
Grace 27,950

@grace-snow

Posted

Well done @aramatsolrac

So now I can preview on mobile I can see it doesn’t fit on my screen. This is where the advice below comes into play, like using max width instead of width 400px, and adding padding on the outer wrapper or margin on the component to prevent it ever hitting screen edges.

Good luck

Marked as helpful

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