Submitted about 2 months ago

QR Code Component using CSS Grid

James Niemerg• 20

@JamesN-dev

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?

Refreshed on some basic HTML and CSS concepts. Went with CSS Grid as it seems the most flexible and I wanted a refresher.

What challenges did you encounter, and how did you overcome them?

I translated the Figma design as much as possible. It wanted to use flex but I felt CSS Grid was the way to go here. So i refreshed my CSS Grid knowledge by doing the CSS Grid Garden mini games and read up on MDN

Community feedback

Yonamine-Fernando• 70

@Yonamine-Fernando

Posted about 2 months ago

Hello! it was very good.

But if you take

'''<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a> </div> '''

and place it inside a <footer> tag like this:

<footer> <div class="attribution"> Challenge by <a href ="https://www.frontendmentor.io ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a> </div> </footer>

Marked as helpful

James Niemerg• 20

@JamesN-dev

Posted about 2 months ago

@Y0namine ah yes... I was thinking that the challenge wanted me to keep it within the card but putting it in a footer makes much more sense. Good call!

I've updated it. Thanks!

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