Skip to content
Submitted over 1 year ago

QR-Code-Component_ In this solution, I have use HTML and CSS tools.

KASHIFBAIG•10
@MirzaG0786
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HEADINGS ⚠️:

    • This solution consists incorrect usage of <h3> so it can cause severe accessibility errors due to incorrect usage of level-three headings <h3>
    • Every site must want only one h1 element identifying and describing the main content of the page.
    • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
    • In this solution there's <h3> element which is this <h3>Improve your...</h3>, you can preferably use <h1> instead of <h3>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely
    • So we want to add a level-one heading to improve accessibility
    • Example: <h1>Improve your front-end skills by building projects</h1>
    • If you have any questions or need further clarification, and feel free to reach out to me.
    • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
    KASHIFBAIG•10
    @MirzaG0786Posted over 1 year ago

    Thanks a lot Abdul khalid, did you point out my mistake.

    0
  • Saad Hisham•1,750
    @Saad-HishamPosted over 1 year ago

    Hey there, fantastic job on completing the challenge! I'm really impressed with your work. I do have a few tips that I think could help make it even better.

    Firstly, for best practice, I would suggest wrapping the card container in a <main> tag instead of a <div>. This will not only make your code more semantically correct, but it will also help with SEO.

    Secondly, for accessibility purposes, it's really important to add an alt attribute to the image. The alt attribute should describe what the image is showing, so that people who use screen readers can understand the content of the image. For example, if the image is a picture of a dog, the alt attribute could be "A cute brown dog sitting in the grass".

    Lastly, I would suggest changing the font to match the style guide. Consistency is key when it comes to design, so making sure that all the fonts on the page match will help create a more cohesive look and feel. this is how to add font to your page

    Go to the Google Fonts website at fonts.google.com and browse the library to find the font you want to use.

Click on the "+" icon next to the font you want to add. This will add the font to your collection.

Once you've added all the fonts you want, click on the "Use" button in the bottom right corner of the screen.

Select the styles and character sets you want to use, and copy the HTML link element provided.

Paste the HTML link element into the <head> section of your HTML document.

In your CSS file, use the font-family property to set the font to the Google Font you added. For example, if you added the font "Open Sans", you would write:

body {
  font-family: 'Open Sans', sans-serif;
}

    Overall, great job on your work so far! I hope these tips are helpful for you. keep the great work up ❤

    Marked as helpful
    0
  • khushboo khatwani•1,070
    @khushi0909Posted over 1 year ago

    1)image should always have alt="some description". some description about image should always be there for accessibility reasons

    2)you should learn about semantics HTML and using it for ex footer ,main etc

    3)Read about h1 tag its the most important and every website should have at least one https://www.semrush.com/blog/h1-tag/

    4)now it looks good on every screen ,but you can read about media queries for responsiveness for the future

    All the best

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord