Skip to content
Submitted about 2 months ago

QR Component with HTML and CSS (using Flexbox).

Carla Sablic•120
@CarlaSablic95
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 am proud of having completed the challenge, but I need to improve in knowing which units of measurement are appropriate for the widths and heights of elements.

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

I faced difficulties when working on the mobile version; I searched for information on the proper use of measurement units.

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

I would like to get advice on how I can improve in layout (structuring) and styles (selection of measurement units).

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted 26 days ago

    Hi. I saw your last challenge you have done and I've noticed some important problems in terms of HTML, CSS and responsiveness. Then I checked your first challenge and I noticed you had these important issues in your code from the start. So I wanna give you some notes on this challenge and strongly suggest to first refactor this challenge code and solve the issues and then try to move step by step. Try to ask more question on discord and ask for helps. This really helps. Here the problems of your code I think you have:

    • You can check most of the pages and see they have a structure like this insid the body:
    <body>
  <header>...<header>
  <main>...<main>
  <footer>...<footer>
</body>

    Based on your design you may have header and footer or not. But You should have a main element inside your page. So after your body always wrap all of your code inside a main element. In this design you do not need header but you have a footer.

    • Each Page should have a h1 heading. In this challenge though, Because in a real scenario the QR code is part of another page It does not need to have h1 but you have to use a h2 not a h4. Remember this point. headings should only increase one by one. You can not just go from h1 to h4. This is not true because screen readers use this hierarchy to navigate through content efficiently, making it easier for visually impaired users to understand the page structure. It also has SEO benefits and organize your code.

    Inside your CSS:

    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Use min-height: 100vh; instead of height:100vh; and put it inside your body. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.
    • You do not need any width and height with percentages for this challenge. And also no need for using media query to change the width. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens. Use the max-width with rem unit.
    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.
    Marked as helpful
    1
    Carla Sablic•120
    @CarlaSablic95Posted 24 days ago

    @kaamiik Hello Kamran, thank you for taking the time to explain what I need to improve. Thanks for the advice! I will apply it! Best regards!

    1
  • Ejiro Frances•260
    @Ejiro-FrancesPosted about 1 month ago
    • The layout looks good on different screen sizes.
    • Read MDN documentaries for solutions on measurement units.
    Marked as helpful
    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