html and css

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Mbahkingsley,

  Congratulation on completing this challenge. Excellent work! I have some suggestions regarding your solution if you don’t mind:

  • You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Page should contain one level heading. In this challenge, you may use <h1> instead of <h4>.

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. The alternate text should not be hyphenated , it should be human readable.

  • Add min-height: 100vh instead of height: 100%to the body that let the body grows taller if the content outgrows the visible page instead.

  Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Mbahkingsley•20

  @MbahkingsleyPosted about 2 years ago

  @PhoenixDev22 thanks alot. I really appreciate your feedback. I will apply them on my future projects.

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Mbahkingsley’s congrats on finishing the challenge and welcome to the frontendmentor community!

  It seems that your component is a lot of height in your solution, if you want to fix it remove your height: 100vh and instead try centering the component using also flex-box on the body, and setting the body height to 100vh, you could also add the brackground-color to the body instead of the div of the component.

  Also I would recommend you to use more semantic html tags like main, and h1 (every html file should have 1 of this), your component for example, could be wrapped on a main, and your h4 could perfectly be an h1. This will improve the accesibility to your page and also will be better positioned on search engines!

  Hope my feedback helps you, if you have any questions, don't hesitate to ask!

  Marked as helpful

  1

  ---

  

  Mbahkingsley•20

  @MbahkingsleyPosted about 2 years ago

  @DavidMorgade thanks alot david. I will henceforth consider this when working on other projects. I really appreciate your feedback.

  1