Order Summary Card Component Project build using CSS Grid and Flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  You forgot to give the body a background-image, with a background-size of contain a background-repeat of no repeat.

  In the media query you have to change the background-image

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  You forgot to give .btn-confirm a box-shadow.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0
• 

  Rostyslav Nazarenko•560

  @rostyslav-nazarenkoPosted almost 2 years ago

  Hi! Great solution

  There're issues to resolve and a few suggestions

  • HTML
    • alt attribute should describe the image or its function, and be empty if is only decorative. alt="Card Hero Image" gives no information. Don't use word image in alt, screen readers will read img as Image, Card Hero Image. The same with the music icon.

  • CSS
    • I wouldn't recommend splitting CSS into three files, especially in such a small project. The server will have to make additional requests to fetch each file. Look at Sass/SCSS for this.
    • Don't use this trick html {font-size: 62.5%;}. Read this article for more detailed information.
    • Setting max-width: 144rem; margin: 0 auto; to .container makes no sense as it does nothing.
    • Font size is too small, in the style-guide.md body text is 16px
    • Use resets, like displaying images as block elements, and most important making buttons inherit font from parent elements because font-family is right now set to default Arial

  Keep coding!👍

  0