QR code component made with HTML and basic CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  HTML 🏷️:

  • Wrap the page's whole main content in the <main> tag.

  Alt text 📷:

  • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Instead, try to make the description as human-readable and understandable as possible.

    The alt attribute should explain the purpose of the image, for example, in the case of a QR code, a description like "qr code to frontendmentor.io" would be more appropriate.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • You don't need to add font-family: "Outfit", sans-serif; to each <p>, <h*> separately. Instead, add it to body.

  • It's not a big problem but the display: block; style on the .white-border element is unnecessary, that value is the default for the div tag.

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Jack•150

  @DamuzidPosted almost 2 years ago

  @MelvinAguilar Thank you for the feedback. Very usefull for the next challenge, especially the CSS Reset.

  I was looking at your solutions and I was wondering how you're getting the exact sizes to use? I tried examining the images in Photoshop but I always tend to end up a bit to large.

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @Damuzid Hello!! I use an extension called PerfectPixel to put the preview image on top of the solution I'm making, then I simulate a screen (1440px wide) using dev tools so it looks as close as possible.

  Screenshot.

  Another option is to upgrade to Premium in order to view the Figma files containing the precise values.

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  To center .white-border on the page using flexbox, add align-items: center and min-height:100vh to .container.

  There is no need to give .white-border a height value. For a responsive content , replace the width in .white-border with max-width and give the img a max-width of 100% instead of a width.

  There is no need to give .container a width, height and margin values.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Jack•150

  @DamuzidPosted almost 2 years ago

  @Hassiai Thanks for the feedback! I incorporated your input into my solution. Really helped me get a better understanding of responsive content and the usage of flexbox. Also started reading more about the correct way to use em/rem.

  1