HTML CSS Order summary mini project

Community feedback

• 

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted about 3 years ago

  Hi sylvamadu!

  I have some feedback on your solution.

  • Your background-image is not showing, background-image: url('img/pattern-background-mobile.png'); is an absolute path. it starts from whatever your root is, which might be different for local environment and for deployment environment, so i suggest you to try relative path . it is not dependent on which environment it is. e.g background-image: url('./img/pattern-background-mobile.png'); etc.
  • change should behave as it controls something, and for controlling prefer button but it is 100% not a p tag. And proceed to payment and cancel implies navigation so should probably be a anchor tags.
  • To overcome your accessibility issue of adding landmarks is you should need to add some semantic markers to designate sections of the page as the header, navigation, main and footer e.g:

  <main>
       <div></div>
    </main>
    <footer>
  </footer>
  

  • Your images should have alt attribute but for decorative images, you should leave alt as blank alt="" and use role=" presentation" or aria-hidden=" true" to make sure all screen readers ignore those images. In your case, the music icon and your hero image are decorative.

  Apart from this very well done.

  2

  ---

  

  sylvamadu•100

  @sylvamaduPosted about 3 years ago

  @muhammadshajjar thanks. I deeply appreciate the feedback. I'll work on it soon.

  0
• 

  Dharmik_487•1,740

  @Dharmik48Posted about 3 years ago

  Hey👋, Good job with completing the solution! But here are a few things you need to improve:

  • At around 800px the contents seem to be squeezed so try to fix it, maybe add a media-query.
  • Also at bigger screens the width of the card way more than the design so decrease it a bit.
  • Add some hover effects with transition to increase experience!

  1

  ---

  

  sylvamadu•100

  @sylvamaduPosted about 3 years ago

  @Dharmik48 thanks Sir. I'll work on it.

  0