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

Simple QR component with HTML/CSS

An 150

@anaislcno

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


Do you have any idea for doing this with less CSS code?

Community feedback

@jmadilia

Posted

Hi An,

Nice job! As far as optimizing with less CSS, I notice your .card selector has a value assigned for each border, set at 15px for each. This is perfectly fine, but if you really want less CSS, then since each value is the same, you could set the value of padding to just a single 15px, like so:

padding: 15px;

This way, each of the four border values will still be set to 15px. There are helpful examples of this on the W3Schools site, located on the CSS Padding page.

Additionally, I noticed that your link to the live deployment of the component results in a 404 error when navigating from FrontendMentor at the time of writing this message. It is likely the incorrect URL. Currently deployed from Github Pages is https://anaislcno.github.io/QR-Code-Component/, while the URL used in FrontendMentor is https://anaislcno.github.io/QR-code-component/. The URL is case sensitive.

Hope this helps! Keep it up!

Marked as helpful

0

An 150

@anaislcno

Posted

Hello @jmadilia ! Firstly, thank you very much for your kindness! I didn't notice for the padding, so I'll change that. And same for the link, I totally forgot to edit it after changing the name of the repository haha I you have any other comment or something else, don't hesitate ! Have a nice day

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