Skip to content
Submitted 6 months ago

Responsive landing page using flexbox.

Kerwin•80
@KerwinAngeles
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 would do diffrently the next time that I start with a project, divide the task in steps, that's going to help me, where I should start.

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

The challenge was that I did not know how to do for the image occupy the exact with and height inside the card.

I found the solution only putting a max-with of 100% to the image.

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

I would like to know how to use the property that is like: ::root. Also, how can I put the exact with and height to the viewport

Community feedback

  • Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted 6 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">

    .

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

    Happy coding!

    Marked as helpful
    0
    Kerwin•80
    @KerwinAngelesPosted 6 months ago

    @0xabdulkhalid thanks bro.

    0
  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 6 months ago

    Hello Kerwin, congratulations on completing your first project! It looks extremely similar to the proposed design, you're off to a great start.

    Regarding your question about ::root, it basically allows us to create variables in our CSS. To create a variable with the width and height of the viewport, you can do it like this:

    ::root {
    --width-vp: 100vw;
    --height-vp: 100vh;
}

    Then you just need to use this in your selector, for example:

    body {
    width: var(--width-vp);
    height: var(--height-vp);
}

    If anything I said isn't clear, please feel free to comment below, and I'll try to help you in the best way possible.

    Marked as helpful
    0
    Kerwin•80
    @KerwinAngelesPosted 6 months ago

    @R3ygoski thanks my men it gonna help me a lot

    1
  • Ameer Hamza•60
    @AmeerHamza838Posted 6 months ago

    Wonderful

    Marked as helpful
    0
    Kerwin•80
    @KerwinAngelesPosted 6 months ago

    @AmeerHamza838 Thanks bro

    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