Submitted about 2 months ago

QR Code Component

Camagu Ncoso• 20

@Camagu-Ncoso

Preview site View code

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?

I need to practice more flexbox because I noticed that it is mostly there on projects. I am going to build more project on flexbox

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

I encountered changes on aligning the container. I requested for help from forums online

What specific areas of your project would you like help with?

media query.

Community feedback

Vishal Pawar• 200

@vishalpawarR

Posted about 2 months ago

Nice work! Use the media query from chatgpt for the screen sizes and make little changes here and there if needed

Marked as helpful

Camagu Ncoso• 20

@Camagu-Ncoso

Posted about 1 month ago

@vishalpawarR I've been adviced to avoid media query for this one. I used the mind-height in the body and max-width in the container...it still the same. not close to the design

Vishal Pawar• 200

@vishalpawarR

Posted about 1 month ago

@Camagu-Ncoso Hey! I agree this doesn't require any media queries.

You don't need pixel perfect design and you can achieve it. If it looks close enough with bare eyes then it is fine.

Grace• 27,890

@grace-snow

Posted about 1 month ago

@vishalpawarR this challenge definitely doesn't need a media query. I'm curious what made you suggest that as initial advice?

Vishal Pawar• 200

@vishalpawarR

Posted about 1 month ago

@grace-snow I agree with you and this doesnt require the media query. He was asking for the media query inputs I just suggested it.

Grace• 27,890

@grace-snow

Posted about 1 month ago

@vishalpawarR ah I see that makes sense, I didnt see that above

Grace• 27,890

@grace-snow

Posted about 1 month ago

In this, the component itself should not be the main landmark. It should be a div within the main landmark. If you think about how this component would be used in a real site that should make sense - it would go inside main.

Similarly, this card would never serve as a page title for a whole Web page. That means it can't have a h1. A h2 would be more appropriate.

Remember alt text should never include words like "image" because it's already on an image role. This is just a "QR code to FrontendMentor.io".

CSS feedback:

@import is not good for performance. It would be better to link fonts in the html head.
get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
the component should likely be display block not inline- block. You would only see this difference once it's on a real page.
you can place text align center on the component itself instead of repeating it on the individual child elements.

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