Submitted

Order Summary Component using Flexbox

Ken 455

@lmaoken

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

3

Accessibility Issues

1

HTML Issues

View Report

Ken’s questions for the community

THIS IS MY SECOND ATTEMPT... I spent my whole weekend learning how to replicate this with zero knowledge in HTML and CSS. I tried using only Google, and no YouTube tutorials.

I am still trying to grasp media queries and how to make everything responsive.

If anyone has any suggestions on how I can write my code differently, please let me know! Any feedback out of your time is greatly appreciated!

Community Feedback

@beslerpatryk

Posted

Awesome job Ken! I recommend you to get more familiar with CSS display properties such as grid and flex. It will definitely help you set up the proper layout for your components. I looked up your HTML code. You should put elements in div tags only where there is a need for that. For example, putting h1 tag inside div creates unnecessary lines of code. The overall outcome looks solid. Good luck with your future projects!

Marked as helpful

1


Ken 455

@lmaoken

Posted

@beslerpatryk Thank you for your feedback. I will definitely keep that in mind for my next challenge.

0

darryncodes 2,970

@darryncodes

Posted

Hi Ken,

Great effort, really close to the design - well done!

Some fundamentals:

Consider using relative units instead of absolute units for responsive design. I can see you have used rem in places, you'll need to change the root font-size with media queries to see the magic happen. Here is some information to get you started:

And finally an awesome guide:

All the best with your journey!

Marked as helpful

1


Ken 455

@lmaoken

Posted

@darryncodes Thank you for the detailed comment with helpful links as well. I will definitely look into all of the resources you provided.

0

Give some feedback to @lmaoken about their solution...

Slack logo

Join our Slack community

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