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 card

@Sahitya2006

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


Order summary component card HTML AND CSS #Likes and comments welcome

Community feedback

P
Nikolas Escobal• 230

@nikoescobal

Posted

Hello there! 👋

Congratulations on finishing your challenge! 🎉

I have some feedback on this solution:

  • I suggest you build mobile-first moving forward, as your code currently breaks upon resizing to 375px
  • The web is responsive by default, so just add media queries to cover bigger screens
  • check the HTML report to fix accessibility issues
  • Your button content is currently overflowing because the font size is too big.
  • You can also set a max-width for your button so it doesn't stretch outside the container

I hope this is helpful and best of luck with your coding journey!

Marked as helpful

0

@Sahitya2006

Posted

@nikoescobal Thank you very much for helpful suggestions !

1
P
Nikolas Escobal• 230

@nikoescobal

Posted

@Sahitya2006 My pleasure!

0
Hamza-Noah• 280

@Hamza-Noah

Posted

Hey,

let me give you feedback on the things I see you need to edit:

1- I see that you have not added the curve background to the body so make sure you add it and customise it in different screen sizes until you make it identical to the design on all screens

2- there is this content --> at the bottom of the page so make sure next time you do not have any content that doesn't proper the project

3- I have checked the HTML code and there is a comment that has no benefit to the project I mean it doesn't describe anything so why you did keep it make sure you remove it and only use comments when you need them

4- for the footer there isn't any need to use the footer in this small tiny project

5- and most importantly do not use an internal stylesheet you should create another file and put all the CSS code in it make sure always to isolate the CSS code in a specific file to make the project structure organized and structured correctly

I hope those tips will help you make this project and all the next projects created and structured in the right way!

Good Job

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