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 order summary component using html and vanilla CSS

evilhare 20

@evilhare

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


Any feedback to improve my coding? I don't really know what to ask. Feel free to suggest or recommend anything to improve my css skill. I'm just a newbie dreaming to master css. Anything will be appreciated.

Community feedback

Haziq 320

@zyq-m

Posted

Wow that was close enough to design. I have a couple of suggestion here.

If you want your site is close to design, you can change the background-color: hsl(225, 100%, 98%) to background-color: hsl(0, 0%, 100%).

Then, you should set your max-width of order-summary to max-width: 28.125rem probably.

Happy coding evilhare!!

Marked as helpful

0

evilhare 20

@evilhare

Posted

@zyq-m Thanks for this suggestions. Definitely going to try this to get that pixel perfect copy design.

Happy coding Haziq,

0
Haziq 320

@zyq-m

Posted

@evilhare You are most welcome😊

0
darryncodes 6,430

@darryncodes

Posted

Hi Evilhare,

You've smashed it, well done.

HTML feedback not CSS i'm afraid. You could clear up your accessibility report using some simple semantic mark up like <main> <footer> etc.

Happy coding 🤙

Marked as helpful

0

evilhare 20

@evilhare

Posted

@darryncodes Yeah I saw this in report and don't have any idea how to solve this. Thank you very much. Now I know what to change in my code. Really appreciated these feedbacks. Nice community we have here. Cheers.

0
P
Patrick 14,325

@palgramming

Posted

Nice job with the background placement and keeping the card centered in the window. You ended up with a really nice solution. Great Job!! ⭐⭐⭐⭐⭐

Marked as helpful

0

evilhare 20

@evilhare

Posted

@palgramming Wow! thanks my very first feedback since I started coding. I'm really afraid to show my codes to to anyone and this is my first. That's so good to hear. Now I'm hype for the next challenge. It really boost my confidence. Thanks again.

2

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