Skip to content
OverviewSolutions
3
Comments
3
Liyyy9
@Liyyy9

All comments

  • Liyyy9•80
    @Liyyy9Posted 3 months ago

    Well done on completing the challenge! I have a few suggestions for further improvement based on feedback I received. I’m not claiming to be an expert, but I think these could be helpful insights for your project.

    1. To improve the responsiveness of the webpage, consider using rem units for font sizes instead of px. Set the html selector to a font-size of 16px, and then define other font sizes relative to this base size, such as 1rem (16px), 2rem (32px), and so on.

    2. In line 49, the font-size is currently set to 1 (i.e., font-size: 1;). It would be clearer to specify the unit of measurement, such as px, em, or rem.

    3. Similarly to the font sizes, using rem units for max-width can enhance responsiveness.

    I’m not sure if I’ve caught everything that might need improvement, but those are the only issues I’ve noticed so far. I hope my suggestions are helpful! I'm not entirely sure either, but they should be a good starting point.

    Marked as helpful
    0
  • aniketinTech•30
    @aniketinTechSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    What am I proud of and what I would do differently next time:

    1. The code is easy to understand and follows a logical structure.
    2. Closely matching the design specifications.
    3. Ensuring the component looks good on different screen sizes.
    What challenges did you encounter, and how did you overcome them?

    Challenges encountered:

    1. Matching Design Precisely: Challenge: Ensuring the component matched the provided design down to the smallest detail. Solution: Used design tool Figma(since this is Free+) and browser inspection to measure elements and fine-tune CSS properties.
    What specific areas of your project would you like help with?
    1. Ensuring the component looks good on different screen sizes.
    2. How to use media query?

    QR Code Component | Flexbox | HTML | CSS

    2
    Liyyy9•80
    @Liyyy9Posted 3 months ago

    Great job completing this challenge! I have a few suggestions for improvement based on feedback I received for the same project. I think they could be useful for you as well.

    HTML:

    1. Add a <main> element to wrap all of your content except the <header> and <footer>. This improves accessibility and acts as a landmark for your webpage. Make sure to include your card within the <main> element.

    2. Consider changing your <p class="para1"> tag to an <h2> tag. Typically, a page should only have one <h1> tag for the main heading. Since this challenge doesn’t include a main heading, it would be appropriate to use an <h2> tag instead.

    CSS:

    1. Don’t forget to include a fallback font in your font-family property. It should be specified like this: font-family: 'Outfit', sans-serif;.

    2. Avoid using px for font-size. Instead, use rem units to ensure the font size scales with the user’s default browser settings, which enhances accessibility.

    3. Since you want all text to be centered, you only need to apply text-align: center to the <body> element. The child elements will inherit this property, so you can remove any redundant text-align: center declarations from elsewhere.

    Hope this helps!

    Marked as helpful
    0
  • Liyyy9•80
    @Liyyy9Posted 3 months ago

    Looks good! Slightly different than the template but I'm assuming you are changing it to what you want. Code is readable, reusable and well-structured. I wish I thought about adding the :root and media query into my code.

    Marked as helpful
    0