Social Link Landing Page

Community feedback

• 

  ViicDev ☪︎•370

  @ViicDevPosted about 2 months ago

  I recommend you to take more accurate measurements with an online meter, you can visit my profile to see this example, I hope it will be helpful.

  0
• 

  P

  Edina Karsai Sztanojev•260

  @sztedinaPosted about 2 months ago

  Hey, well done finishing this challenge. Here are some tips to take along with you on your developer journey - I hope you find them helpful!

  HTML:

  • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • I would use the headings (h1-h3) instead of paragraph.

  • Change buttons with unordered list and li tags. Li tags shoud contain <a> tags with proper links.

  • Try to avoid using so many div containers so that your code becomes clean and simple.

  CSS:

  • I would set a default font-size on the body using px, and I would use rem instead of px on h1, .date and .title. Font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • On the image, add height: auto and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  • Media queries are nice, but there is no need for them. On smaller screen size the button are small.

  0