Skip to content
Submitted almost 2 years ago

QR Code Component Using HTML and CSS

Fatima Shaikh•10
@fash1462
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

  • Jeroen Leijnse•1,420
    @jrleijnsePosted almost 2 years ago

    Hey there!

    Great job completing your first challenge! 🎊

    I have some suggestions for your code that might interest you:

    • Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

    • If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to the website frontendmentor.io

    • For a better file structure (especially when you start building bigger and bigger projects), place your CSS code in a separate file (for example: style.css) and move the code located within the tag inside your HTML to the style.css file. Afterwards, don't forget to link the CSS file to your HTML file using the <link> tag and placing it inside of your <head> tag in your HTML. For example: <link rel="stylesheet" href="./style.css"/>.

    I hope you find my suggestions useful, and above all: the solution you provided is very good!

    Keep it up and happy coding! 😃

    Marked as helpful
    0
    Fatima Shaikh•10
    @fash1462Posted almost 2 years ago

    @jrleijnse Thank you for providing such valuable insights on my work, I surely found your suggestions useful and will look forward to apply these in my future work. Thank you for your valuable feedback!

    1
  • ZMB•720
    @ZMBAIGPosted almost 2 years ago

    Hi,

    Well done on completing the challenge. There are some minor alterations or suggestions that will help you.

    -Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

    <div class="outside-comp"> replace it with <main class="outside-comp">

    <div class="attribution"> replace it with <footer class="attribution">

    Always use heading levels; <p class="text1">Improve your front-end replace it with <h1 class="text1">Improve your front-end

    For further reading

    I hope you find it useful!

    Marked as helpful
    0
    Fatima Shaikh•10
    @fash1462Posted almost 2 years ago

    @ZMBAIG Thank you for giving the feedback! I found these suggestions very 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