Order Summary Component using Flexbox

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @Kobinamd 👋🏻

  Let me first answer your question, and then I'll give you some feedback 🙃

  1. This is how you add them in one line, however, I wouldn't suggest this. Even though it looks kind of short, it will be a lot harder to debug. So separately, and you'll thank yourself in the future 😅

  background: no-repeat 
               url(../images/pattern-background-desktop.svg), 
               hsl(225, 100%, 94%);
  

  2. You can give background-size: cover; and it will in its original size and cover the whole width. But in this challenge it's correct to use contain, so that your project matches the original design.
  3. There's no right or wrong way, honestly, it all depends on the layout. In this case, I'd say what you did is the right way, because it's easier to position, rather than if you placed it as a background image. There would be a lot more code and just to position a small icon.

  Now let me give you a couple of small suggestion for this and future projects.

  • The music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • I'd take .attribute out of main and place it before the closing body tag, since it's considered footer of the layout. Also change its tag like so: <div class="attribution">...</div> should be <footer class="attribution">...</footer>.
  • One last thing, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

  I hope this was helpful 👨🏻‍💻 if you have any follow-up questions, let me know. And the project looks good, well done. Cheers 👾

  0