Order summary component with Flexbox

Community feedback

• 

  Agnik Bakshi•480

  @Agnik7Posted over 1 year ago

  Hi, Congratulations on solving this challenge!!🎉🎉 I have some suggestions that I feel will help you improve a lot.

  • Instead of defining width, define the max-width for the container. When you define width, you are making the width of that element a constant, it will not be able to change automatically. However, when you are defining max-width, you are making the the width of the element variable, such that the width can decrease by itself depending on the screen size, thereby making the component responsive.

  • Try to use more relative units like em and rem for defining the size, instead of absolute units like px. The relative units help in better responsiveness of the component, as they will set the component's size in comparison to the screen size, and not on the fixed pixel value. To learn more info on CSS units, click here

  • If the font-size for the root element or the body is 16px, you don't need to define it. This is because the default font size of most browsers is 16px. So, even if you don't mention it, it will be automatically taken as 16px.

  • For the title Order Summary, replace the p tag with an h1 tag, since it is a header. Then you won't have to define the font-size or the font-weight, all will be taken care of by h1.

  • Instead of using font-weight, it is better to use the <b> tag, to make a piece of text bold. Both <b> and font-weight achieve the same result, however <b> will save you few extra lines of CSS. Use font-weight only when you have to alter the boldness of a text.

  Hope you find this comment useful. Have a nice day!!!

  Marked as helpful

  1

  ---

  

  Alt08•60

  @Alt08Posted over 1 year ago

  @Agnik7 I started with css 20 days ago, I'm still learning new properties and I'm still missing the recommendations.

  I really appreciate your comments and I will take into account the max-width.

  1

  

  Agnik Bakshi•480

  @Agnik7Posted over 1 year ago

  @Alt08 Don't be overwhelmed, we all start at some point of time. Even I am no pro, I am also a noob😅😅. However, some things are there, that I learnt with experience. Just keep on practicing whatever you've learnt till now, and your experience will fine tune the rest

  1

  

  Kuraanal•210

  @KuraanalPosted over 1 year ago

  @Agnik7 You should not use <b>, it is deprecated and you absolutely have to use font-weight property as described on this page.

  If you need to emphasize some words in a paragraph, you should use the <strong> tag.

  1

  

  Agnik Bakshi•480

  @Agnik7Posted over 1 year ago

  @Kuraanal Thanks a lot for this information. I will surely keep this in mind.

  0