Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Qr Code Component with SASS

#sass/scss
Fatβ€’ 850

@Fahatmah

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My first one was kind of not good and got accessibility issues so here's a second try with SASS. I should have put box-shadow and more border-radius πŸ˜…

Community feedback

Lucas πŸ‘Ύβ€’ 104,580

@correlucas

Posted

πŸ‘ΎHello Fahatmah, congratulations for your new solution!

Great solution as always! I liked that you've done pretty much anything, the component and the image are fully responsive. Thats great!

My only advice is about the html structure that could be clean. You clean your code removing all unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

Fahatmah, look here a good and clean structure for this challenge:

<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

πŸ‘‹ I hope this helps you and happy coding!

Marked as helpful

1

Fatβ€’ 850

@Fahatmah

Posted

@correlucas Thank you for the compliment! And yeah I wanted to make it simple as possible. I didn't really thought that main could be also use just like a div. Once again, ** Thank You!**

0
Elaineβ€’ 11,420

@elaineleung

Posted

Hey Fahatmah, this looks really good, pretty much pixel perfect! I tried so hard to find something to comment on and... it was really hard! πŸ˜… But I did see just one thing you can try, which is, there are some declarations that are unused or not necessary, such as the overflow: hidden. I know it's common to write a bunch of CSS and see which one works; what I normally do is, I'd try commenting out lines and see whether anything is affected, and if nothing changes, I'd keep the line commented until the very end when I clean up the code. That way, I know what I don't need to add next time, and in case I do need it at the end, it's still there instead of deleted midway. Anyway, excellent work here, real proud of you! πŸ™‚

Marked as helpful

1

Fatβ€’ 850

@Fahatmah

Posted

@elaineleung Noted! 😊 Thank You!

0
PhoenixDev22β€’ 16,990

@PhoenixDev22

Posted

Hi Fahatmah Mabang,

Congratulation on completing this frontend mentor challenge. Another Great solution from you. I have some suggestions regarding your solution:

  • In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like QR code to frontend mentor not describes the image. The alternate text should not be hyphenated , it should be human readable.
  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

Overall, Excellent Work! Hopefully this feedback helps.

Marked as helpful

0

Fatβ€’ 850

@Fahatmah

Posted

@PhoenixDev22 Thank you for your feedback! May I ask of how is the code looks like or what are some example of how I can do the second part? Thank you again! 😊

0

Please log in to post a comment

Log in with GitHub
Discord logo

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