Submitted over 2 years ago

QR code component solution

Brian Carlo Birondo• 320

@Briancarlo24

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

Please check my code. I believe I have improved with coding since I first started. I just want to know what you would have done differently with this challenge?

Community feedback

radriann• 150

@radriann

Posted over 2 years ago

It's a very good design but you should lower the font.

The background color is also missing, and so that the accessibility report does not come out, this is because FrontEnd Mentor when generating the error and accessibility report, takes into account that you use semantic tags, I recommend changing the div of the attribution by a footer or include it within the main.

Hope my tips help you and enjoy coding ^_^

Marked as helpful

Brian Carlo Birondo• 320

@Briancarlo24

Posted over 2 years ago

@laindomJS I didn't know that was the accessibility report was all about. Thanks I'll implement that for sure.

vcodey• 270

@v-codey

Posted over 2 years ago

Hi @Briancarlo24, Really good job on the challenge, Just few things you may haven't done right

size of the card, font etc. is much bigger then the provided design
body background color isn't set
main container needs to white too, else its taking body background color.

that was my few observations. Happy Coding

Marked as helpful

Brian Carlo Birondo• 320

@Briancarlo24

Posted over 2 years ago

@v-codey I'm using free account so I don't really have the exact size.

thanks though. I appreciate this kind of comment :D

vcodey• 270

@v-codey

Posted over 2 years ago

@Briancarlo24 I'm also using the free account, I didn't meant you should create this with exact dimension, mine solution isn't exact either. Just eyeball the width height with provided design image (use desktop-design.jpg).

also I forgot to mention,

change attribution section from div to footer i.e.

<footer class="attribution">
  Challenge by
  <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
  >Frontend Mentor</a
  >. Coded by
  <a href="https://github.com/Briancarlo24">Brian Carlo Birondo</a>.
 </footer>```

Marked as helpful

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