Skip to content
Submitted 8 months ago

QR Code Component

Camagu Ncoso•20
@Camagu-Ncoso
Preview site (opens in new tab)View code (opens in new tab)
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?

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

  • Grace•31,270
    @grace-snowPosted 8 months 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.
    Marked as helpful
    0
  • Vishal Pawar•200
    @vishalpawarRPosted 8 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
    0
    Camagu Ncoso•20
    @Camagu-NcosoPosted 8 months 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

    0
    Vishal Pawar•200
    @vishalpawarRPosted 8 months 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.

    0
    Grace•31,270
    @grace-snowPosted 8 months ago

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

    0
    Vishal Pawar•200
    @vishalpawarRPosted 8 months 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.

    0
    Grace•31,270
    @grace-snowPosted 8 months ago

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

    1

Please log in to post a comment

Log in with GitHub

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