Skip to content
Submitted over 1 year ago

QR Code Component with HTML5 and CSS3

Diogo•100
@diogo-kappaun
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

  • バレンタイン 😈•64,190
    @VCaramesPosted over 1 year ago

    Hey there! 👋 Welcome to FEM and congrats on completing your first challenge!🎊🍻

    Here are some suggestions to help improve your code:

    • FEM Best practice ✅, before moving on to the next challenge, always check your FEM report (It provides value information), to see what is incorrect and update your code with it so that you would not make the same mistake over again. This should be the first thing that should be done ⚠️ right after submitting the challenge.
    • Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

    More Info: 📚

    MDN Main Element

    • There is no need to have separate stylesheets ❌, as it can affect site performance. Instead have one single stylesheet ✅.
    • Change ⚠️ the height to min-height in your body element, to improve your component's responsiveness.
    • Change ⚠️ width to max-width in your component’s container to make it responsive. You will also want to remove the height as it is unnecessary.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🤖

    Marked as helpful
    0
  • Jeroen Leijnse•1,420
    @jrleijnsePosted over 1 year ago

    Hey there! Great job completing your first challenge! 🎊

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

    HTML 📄:

    • 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
    • Try to always provide an <img> with a descriptive ALT text. This makes your project more accessible to people using screen readers and SEO.

    CSS 🎨:

    • To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

    For more information on this topic, you can read the following article: Media queries 📘

    • An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    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
    Diogo•100
    @diogo-kappaunPosted over 1 year ago

    @jrleijnse Hey man, thank you so much.

    1

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