Order Card Component solution using HTML and CSS

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey Promise You did amazing work congratulations for completing this challenge

  -- to fix accessibility issues :

  • use <main</main> and wrap inside it <div class="container"></div> so all page content should be contained by landmarks.

  ---

  -- To make your code more Responsive

  • don't give section or div specific height that will damage the responsivity in mobile if width of screen small so remove height and use min-height instead .

  • use <a href="#"> cancel order</a> instead <p>cancel order </p> to make it more semantic

  • you can use variables in css and save colors or fixed sizes in variables like this :

  :root 
  {
  --main-color:#3829e0;
  --font-family:'Red Hat Display',sans-serif;
  }
  
  h1 
  {
  font-family:var(--font-family)/*to call  value of the variable*/
  }
  

  • you can comment footer section in this challenge to get more awesome view

  You used semantic class names and id so code is readable and this awesome

  Regardless You did amazing I hope this is useful to you... Keep coding👍

  Marked as helpful

  0

  ---

  

  Promise•100

  @Promise30Posted over 2 years ago

  @zenab12 Thank you very much for this feedback. I'll take note of all that you mentioned and make the necessary changes and also implement them in my future projects.

  0