QR-code component with HTML5 and CSS

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 5 months ago

  Hi, well done on your first challenge!

  There are a few recommend adjustments needed though:

  1. Make sure all content is contained within landmarks. Wrap the section in a main.
  2. There is no reason at all to use the figure element in this challenge. You only use figure when you need to include a figcaption.
  3. The alt text on this very important image needs to say what the image is (QR Code) and where it goes (to FrontendMentor.io). Alt text should never include words like "image" or "picture of" because it is already on an img element, which has an image role. There are some great posts about how and when to write alt text in the resources channel on discord if you wanna take a look.
  4. This should have a heading. The first bit of text is a heading not a paragraph.
  5. To center a component on the screen, use flexbox not position absolute. The body can be made into a flex column and have min-height: 100vh; instead. This is really important! Your current solution will break for loads of people on smaller screens because position absolute removes the component from the normal document flow.
  6. Same with the footer. It must not be position absolute. It's overlaying the content of the card at the moment for lots of people. Let the footer sit below the component, just as it would do naturally without the position properties on these.
  7. I don't understand why you're using strange calc values for things like width in this... This component shouldn't have a width at all, just a max width and this should be in rem units so it scales nicely even when users change their default text size.
  8. The image doesn't need a width either, although you can optionally set it's width to be 100%. Really, all the image needs is border radius and the standard properties from any modern CSS reset: display: block; max-width: 100%;.
  9. Speaking of resets, it's good to get into the habit of always including a full modern CSS reset at the start of the styles in every project. Josh Comeau and Andy Bell both have good ones you can read about and use in your projects.

  1