Semantic HTML5 markup CSS custom properties and Flexbox

Community feedback

• 

  P

  Kamran Kiani•2,780

  @kaamiik

  Posted 6 months ago

  Some notes:

  • Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

  ---

  • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.

  ---

  • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

  ---

  • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

  11

  Marked as helpful
• 

  Aakash Verma•9,500

  @skyv26

  Posted 6 months ago

  Hi @a2-112,

  Great job on the project! 🎉 The design is responsive, and your code is clean and easy to read. 👏 However, I have a few suggestions to enhance accessibility and polish:

  1. Alt Text for Images

     • For the image <img src="images/image-qr-code.png" alt="">, please add a meaningful alt text since the image is part of the main content. Alt text helps improve accessibility and ensures the content is understandable for all users, including those relying on screen readers.
     • Example: If the image represents a QR code for a specific action or information, you can write something like:
       <img src="images/image-qr-code.png" alt="QR code description or action.">
     • For decorative images, leaving the alt attribute blank is the right approach, so you're already following best practices there. ✅

  2. Code Clarity and Consistency

     • Your code is already clean, but maintaining consistency in formatting and comments can further enhance readability for collaborators. For instance, a brief comment explaining the purpose of key sections could help future developers understand your work quickly.

  Overall, you're doing fantastic work! 🚀 Keep it up 😊

  Cheers,
  Aakash

  11

  Marked as helpful