Skip to content
Submitted 12 months ago

Qr Code Component

Brian Muniz Silveira•200
@BrianMunizSilveira
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?

As I mentioned earlier, using variables with CSS is a great practice in my opinion. Even in a small project like this, it already helps a lot in development. Next time, I would make better use of class.

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

I had difficulty with alignments, both for texts and boxes. I had to review past studies and consult my previous codes to overcome these challenges. Additionally, I received help from a friend who gave me a small push in development.

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

I would like help with alignment because I still feel a certain difficulty in getting the alignments right. However, I believe that with a little more practice, this will become easier. I still feel lost with display: flex and its properties, but I will be practicing. I believe this was my biggest challenge; the rest was a smooth process.

Code

Please log in to post a comment

Log in

Community feedback

  • Dylan de Bruijn•3,220
    @DylandeBruijn

    Hi @BrianMunizSilveira,

    Great job on your completing your project it looks very close to the design specifications. I like that you took the time to write a detailed retrospective.

    A bit of friendly constructive feedback:

    • Try putting a bit of padding on the left and right of your body. Or wrap your card in a separate container that applies this spacing. This is recommended so your card has some spacing between the sides of the browser on smaller viewports.

    • Nice use of a reset stylesheet. I would give your main CSS file a more descriptive name however, like main.css, style.css or styles.css. Other developers will then have an easier time knowing where the styles come from.

    • I suggest using min-height: 100vh instead of height: 100vh on the body element. If your content ever grows and it exceeds the height of 100vh you'll run into overflow issues.

    • I suggest using a p tag for your description instead of a span. This is a little bit more semantic. A span is generally used to style a specific piece of text inside a p or h1 for example.

    If you have any questions about flex specifically I would be happy to answer them.

    I hope you find my feedback helpful!

    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