Submitted over 1 year ago

Qr code component using semantic HTML, Sass and Bem

Antonio Russo• 260

@antoru

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@superpooperxxx

Posted over 1 year 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

Antonio Russo• 260

@antoru

Posted over 1 year ago

HI @superpooperxxx !

Thank you for your tip!

Regards, Antonio

Kyrylo Haiduk• 420

@superpooperxxx

Posted over 1 year 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

Antonio Russo• 260

@antoru

Posted over 1 year 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

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year 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!

Antonio Russo• 260

@antoru

Posted over 1 year ago

Hi, Vanza!

Thank you for your feedback!

Regards, Antonio

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year ago

@antoru You are welcome!

Please log in to post a comment

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