Submitted over 2 years ago

HTML, CSS, Flex

Nikhil Patel• 70

@PatelNikhil-08

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

Community feedback

Travolgi 🍕• 31,400

@denielden

Posted over 2 years ago

Hi Nikhil, good job! I took some time to look at your code and have some ideas for improving it:

add main tag and wrap the card for improve the Accessibility
remove all margin from .container class because with flex they are superfluous
add justify-content: center flexbox property to the body for center the card horizontally
to make it look as close to the design as possible add padding-inline: 1rem to p of card
instead of using px try to use relative units of measurement -> read here

Overall you did well 😉

Hope this help and happy coding!

Nikhil Patel• 70

@PatelNikhil-08

Posted over 2 years ago

@denielden Really appreciated for your time to check my solution I will make above changes and will send the link here. Again I am glad that you checked my solution and gave me valuable feedback.

vcodey• 270

@v-codey

Posted over 2 years ago

Hello @PatelNikhil-08 ! Congratulations on completing this challenge

There are a few suggestions I would like to give you

Add main tag inside body
Use padding where needed, instead of every sides(i.e. top, bottom, left, right) you can also use combo like top-bottom or left-right to make it more closer to provided design.
Its better not to remove the default code provided by frontend mentor like you have removed the link the a tag . Do not remove it, rather replace the div with footer
the body of the html should be like

<body>
   <main class="container"> 
        <-- Your code -->
   </main>
<footer class="attribution">
   Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
   Coded by <a href="Your profile link"> your name </a>.
 </footer>
</body>

For better understanding follow this link

I hope it was helpful, keep learning happy coding.

Nikhil Patel• 70

@PatelNikhil-08

Posted over 2 years ago

@v-codey I am glad that you gave me some valuable feedback will be working on it. Again really appreciated for your time to check me solution.

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