Submitted 4 months ago

QR Code Component using CSS Grid

James Niemerg•40

@JamesN-dev

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

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-FernandoPosted 4 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
0
James Niemerg•40
@JamesN-devPosted 4 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!
0

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