Static website containing qr-code

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 7 months ago

  I've come back to this challenge for you as I can see lots of repeating foundational mistakes in the challenges you've done so far which shows you've not had/read enough quality feedback yet. I hope to help correct that here. Make sure you apply the learnings to each challenge. I recommend you pause doing any new ones until you've had feedback and refactored the ones you've done so far. Good luck!

  • all content should be contained within landmarks. This is a single card component (eg div, article or serction) that should sit within a main. The attribution should be a footer outside of the main.
  • make sure you update your attribution link to point to your frontend mentor or github profile page.
  • this card is not a figure really. I'd remove that. As I said, use div, article or serction. If using article or section you can give them an aria-label like "Frontend Mentor".
  • the img doesn't need wrapping in a div. Keep the html as simple as possible.
  • the image is extremely important content in this. It is essential that it has an appropriate alternative description. Remember, alt is human-readable content not code. I recommend you read Craig Abbot's blog article about how and when to write alt text on images. In this case, the image alt needs to say what the image is (QR code) and where it goes (to FrontendMentor.io), that's all.
  • place the styles in their own file and link it in the html head.
  • get into the habit of including a full modern css reset at the start of the styles in every project you do. Look up Andy Bell's modern css reset.
  • you are importing waaaayyyy too many fonts in this! Only link what you need for this challenge.
  • the body needs a min-height 100svh.
  • make the body a flex column and use flex properties to center the card. Remove the huge margin from the card, huge margins is never how to center things or create layouts.
  • the body will need a little padding on all sides so the card and footer can't hit screen edges.
  • the component mustn’t have a width or height. It’s the browser's job to decide what height is needed based on the content and any spacings inside. All the card needs for sizing is a max-width in rem units. This is better than pixel units because it means the card will scale correctly for all users including those who have a different text size setting in their browser or device.

  01

  Marked as helpful
• 

  Blueee•50

  @Leanseln

  Posted 7 months ago

  You can use absolute so the footer will stay at the very bottom of the screen

  06

  Marked as helpful
• 

  Esther Asukwo•60

  @obongg

  Posted 7 months ago

  task nicely done

  01