Skip to content
Submitted almost 2 years ago

Qr code component using semantic HTML, Sass and Bem

Antonio Russo•260
@antoru
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

Solution retrospective

What are you most proud of, and what would you do differently next time?

The result match very good with the design provided.

What challenges did you encounter, and how did you overcome them?

It was a simple but nice challenge.

What specific areas of your project would you like help with?

Any feedbacks and suggestions are welcome.

Community feedback

  • Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    Hello, Antonio, good job ! I really liked you used BEM and SASS in this project🔥

    The only thing, I would recommend using regular <p> tag here instead of <h2>, because in semantics <h2> usually means a title for some big section, but here it is just a paragraph.

        <h2 class="qrCode__subTitle">
      Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
    </h2>
    Marked as helpful
    0
    Antonio Russo•260
    @antoruPosted almost 2 years ago

    HI @superpooperxxx !

    Thank you for your tip!

    Regards, Antonio

    0
    Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    @antoru also as you are using BEM + SASS is a good practice to have a separate .scss file for each BEM block. Create a folder blocks with a file _qrCode.scss and move .qrCode styles there.

    And you are using @import which is an old approach, check this video

    0
    Antonio Russo•260
    @antoruPosted almost 2 years ago

    @superpooperxxx

    in this project there is only one block and I think that it can be fine without an additional folder.

    Thank you for the interesting video about @use and @forward in sass.

    Regards, Antonio

    0
  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Antonio!

    Next time, provide the non-minified CSS so that people can easily give feedback on the stylesheet. It is a lot of work to open each Sass file.

    Here are some suggestions for improvements:

    • <figure> does not need to wrap the <img> element. Only use <figure> when you need to include a <figcaption>.
    • Alternative text for images should not include any words that are related to the word "image". The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image.
    • Improve the alternative text by adding more information about the QR code. Tell the users what will happen after they scan it. It is navigating to a website then the alternative text can be "QR code to [site URL or website name]".
    • Set font styling on the <body> element. Most of the elements will inherit the font styling of the <body> element.

    I hope this helps. Happy coding!

    0
    Antonio Russo•260
    @antoruPosted almost 2 years ago

    Hi, Vanza!

    Thank you for your feedback!

    Regards, Antonio

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @antoru You are welcome!

    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