Skip to content
Submitted over 1 year ago

QR Code Component

Camagu Ncoso•20
@Camagu-Ncoso
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    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
  • Vishal Pawar•200
    @vishalpawarR

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

    Marked as helpful

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