Submitted 8 months ago

qr-clone (using HTML &CSS)

paradawx• 40

@paradawx

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

Something I found a little difficult with this project was the dimensions, it felt like I was constantly typing in different px amounts to try and get everything spaced out correctly.

Something I am unsure about with my code is how it will work on different display sizes and if it is scaleable / mobile friendly. Max-width and @media stuff was confusing to me when i looked into it.

Also i am unsure of my decision to use <br> line breaks instead of something that automatically flex's the text how I'd like

I would like to get better at structuring my HTML, it felt like i was making random things at random with no real plan for how the structure should work. (i used a div and a section as well as a bunch of classes to get to the result I ended with.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 8 months ago

Hello @dawsonjoyner!

Your solution looks excellent!

I have just one suggestion:

Use <main> to wrap the main content instead of <section>.

📌 The tag <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

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