Order summary card

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing your second challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

  • This solution generates accessibility error reports due to non-semantic markup

  ---

  • So fix it by replacing the <div class="card"> with semantic element <main> along with <div class="attribution"> with semantic element <footer> to improve accessibility and organization of your page.

  ---

  • Every site must want at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • So Every site wants a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  I hope you find it helpful ! 😄 Above all, the solution you submitted is great

  Happy coding!

  Marked as helpful

  1

  ---

  

  Ava Christine•20

  @avaChristinePosted over 1 year ago

  @0xAbdulKhalid Thanks for providing valuable feedback.

  0

  

  Ava Christine•20

  @avaChristinePosted about 1 year ago

  @avaChristine Can i you share best resources for learning Flex layout ?

  Because I'm about to continue to learn web development after a long break, willing to learn the layout first.

  Thank You.

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 1 year ago

  @avaChristine, Sure here are the best resources for learning Flexbox.

  • MDN Web Docs - Flexbox Guide: Detailed explanations, examples, and interactive demos.

    • Link: MDN Flexbox Guide

  • Flexbox Froggy: Interactive game for hands-on practice and understanding.

    • Link: Flexbox Froggy

  • CSS-Tricks - Complete Guide to Flexbox: Comprehensive guide with detailed explanations and code examples.

    • Link: CSS-Tricks Flexbox Guide

  • Flexbox Defense: Game for practicing Flexbox properties by defending against enemies.

    • Link: Flexbox Defense

  • Flexbox Zombies: Interactive coding game where you learn Flexbox by saving the world from zombies.

    • Link: Flexbox Zombies

  • Scrimba - Flexbox Course: Interactive coding platform with a Flexbox course including video lessons.

    • Link: Scrimba Flexbox Course

  • YouTube Tutorials: Quality tutorials on channels like "Traversy Media," "The Net Ninja," and "Academind."

  • Flexbox Cheat Sheets: Printable cheat sheets for quick reference.

    • Flexbox Cheat Sheet by CSS-Tricks
    • Flexbox Cheat Sheet by Joni Bologna

  Remember, practice is essential to mastering Flexbox. Build projects and experiment with different layouts to reinforce your understanding.

  Marked as helpful

  0
• 

  Maykol Vallejos•200

  @maykol-vallejosPosted over 1 year ago

  Hi, how are you? I was reviewing your code and I saw that you had problems to center your card, which is not very responsive to use custom margin for accessibility issues, responsiveness and resizing on smaller screens (such as 768 px), your card will be displayed sideways and not in the center. So to correct this you can center it using flexbox or grid, in this case use grid with respect to your code, if you replace the following classes in your stylesheet you will see that it will be centered before any resizing:

  body { width:100%; display:grid; place-items:center; min-height:100vh;

  font-family: Red Hat Display, sans-serif;
  background-image: url(./images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  background-color: hsl(225, 100%, 94%);
  font-size: 1rem;
  
  background-size:contain;
  

  }

  .card{ width: 25rem; margin-top:8rem; }

  section{ display: block; background-color: white; border-radius: 2rem; }

  Finally remove in your stylesheet the classes named: "body,html{ }" and ".attribution{ }".

  I hope these tips will help you, keep it up and may you succeed in your future coding! ;)

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace<div class="container">with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Always begin the heading of the html with <h1> tag because the <h1> is needed to make the content accessible, wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  Give the body a background-size of contain, this will stretch the image on the entire width of the screen.

  To center the section on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  USING FLEXBOX:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  USING GRID:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  For a responsive content, there is no need to give the section a height rather give the second div in the section a padding value for all the sides and replace its width with max-width.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0