Skip to content
Submitted 8 months ago

QR css midulive css guia

Juan1423•60
@Juan1423
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?

First introduction to css without GPT

First test the simples solution before go on with more complex solutions, because i see so much and tried to use, fail hard and waste a lot of time.

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

Don`t know how to center a div xD

Most of thing just with some time I get it, but center a div make me so confused that I try everything to the simples ones up to more difficult ones and return to simples ones, just more slowly and it work.

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

I`m here to use css efficiently and responsive

So if I could recive advice about hoe to use more clean css and assure the sites I design are responsive I gradly accept.

Community feedback

  • Marcus Daniels•160
    @marjskyPosted 8 months ago

    I see that you are using individual margin properties throughout your embedded CSS. I would like to suggest considering shorthand properties for margins to streamline your code and improve readability.

    1
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 8 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    QR iMAGE ALT TEXT 📸:

    • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.
    • The alt attribute should explain the purpose of the image.
    • E.g. alt="QR code to frontendmentor.io"
    <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
    • Additionally the radius of component is not well applied because of using % units, instead you can use relative units like em & rem, For example:
    .container {
   border-radius: 1.5rem;
}
img {
   border-radius: 1rem;
}
    • Here we added border radius for both wrapper of component and qr image so that it would like as same as design provided by FEM.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    1
    Juan1423•60
    @Juan1423Posted 8 months ago

    @0xabdulkhalid Why using % units is wrong? Could you explain it please and what unit are better for specific uses?

    0
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 8 months ago

    @Juan1423, If we use % units for minute things like border-radius then it will respond according to our device width and height. So this will make the website's elements to look weird on mobile & desktop.

    You can % for width and height it would absolutely helpful in these cases but not for styling minute details.

    0
  • Moniruzzaman Monir•740
    @ad-monir2001Posted 8 months ago

    Hey, Nice work . You have worked hard to solved . Nice coding ,

    0

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