Skip to content
Submitted over 1 year ago

QR HTML AND CSS

Raúl Fernandez•140
@Rchanis
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

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

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

    Metadata 🗃️:

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

      You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

    • Add a title of the page. The <title> tag is used to specify the title of a web page, which is displayed in the browser's title bar or tab, and is also used by search engines as the title of a page in search results.

    Alt text 📷:

    • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

    • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

      If you want to learn more about the alt attribute, you can read this article. 📘.

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

    • To center the component in the page, you should use Flexbox or Grid layout. Using position relative and transform will only take up many more lines of code.. You can read more about centering in CSS here 📘.

      Using grid layout:

      .blue_background {
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    /* position: absolute; */
    /* height: 100%; */
    /* width: 100%; */
    display: grid;
    place-content: center;
}

.qr_grid {
    /* margin: 0 auto; */
    /* position: relative; */
    /* top: 50%; */
    /* -ms-transform: translateY(-50%); */
    /* transform: translateY(-50%);
   . . .
}

    CSS Reset 🔄:

    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

      CSS resets that are widely used:

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    1
  • 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.

    HTML 🏷️:

    • This solution generates accessibility error reports due to non-semantic markup, which lack landmark for a webpage
    • So fix it by replacing the element <div class="blue-background"> the with semantic element <main> in your index.html file to improve accessibility and organization of your page.
    • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>
    • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

    HTML ROOT :

    • And, This solution has also generated accessibility error reports due to lack of lang and attribute and title tag inside html element
    • <html> element must have a lang attribute with valid value, so fix it by <html lang="en">
    • <html> element must have a title tag, so fix it by adding <title>Qr Code Component</title> inside the html

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

    Happy coding!

    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