Skip to content
Submitted about 1 month ago

QR Code Challenge

P
Marion•140
@MarionCts
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?

This is my first challenge on Frontend Mentor. I have basic knowledge of HTML and CSS fundamentals from a previous Web Design training, and I want to improve significantly.

For this challenge, I aimed to get as close as possible to a pixel-perfect solution while ensuring semantic HTML. The Figma design was extremely helpful, and I believe my solution is quite close to the original design.

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

I wasn't sure if my HTML was correct, so I had to revisit my lessons to ensure I was using the right elements. Since this is such a small page, I initially skipped writing a CSS reset, although I was reminded that it is a good practice, even for small projects.

I corrected this, and with a few minor updates, the page looked even better. This made me realize that, regardless of the project size, writing clean and well-structured code is never 'too much.

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

I would be grateful for any kind of feedback!

Community feedback

  • P
    Ronaldo Nogueira de Sousa•70
    @ronoguePosted 30 days ago

    Hi Marion,

    Congratulations on completing your solution! It’s great to see your progress. I have a couple of suggestions to help improve your code further:

    1. Global Reset and Box-Sizing:
      Consider using the global selector (*) to reset the padding and margin of all elements to 0. Additionally, setting box-sizing: border-box globally will make it easier to manage element dimensions, as it includes padding and border in the element’s total width and height. For example:

      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    2. Semantic HTML:
      The <figcaption> element should be nested inside a <figure> tag, as it is meant to describe content within the <figure> element. You can refer to the MDN documentation on <figure> for more details.

    Once again, great job on your solution! Your use of the <article> tag reminded me of its purpose and inspired me to revisit its usage.

    Marked as helpful
    0
    P
    Marion•140
    @MarionCtsPosted 30 days ago

    @ronogue Hi! Thank you so much for your valuable recommendations! I'm going to correct this right away :)

    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