Skip to content
Submitted about 2 years ago

QR code component

Ayush Keshwan•20
@AyushKeshwan
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

All feedback is welcome. Thank you in advance ^^

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @AyushKeshwan 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions to improve your code:

    1.Try to use semantic tags in your code. More information here:

    With semantic tags:

    <body>
   <main class="container">
      . . .
   </main>
<body>

    2.- Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

    Solution:

    <h1>Gabrielle Essence Eau De Parfum</h1>

    3.Use justify-content: center; to body element to correctly center the content and remove margin: 0 auto; from .container selector

    • Use margin: 0.625rem or margin: 10px in the .container selector so that it has some space when viewed on mobile devices.

    Instead of using px in font-size, use relative units of measure like rem or em. Font size in absolute length units (px) does not allow a user with limited vision to change the text size in some browsers. Reference.

    I hope those tips will help you.

    Good Job and happy coding !

    Marked as helpful
    0
    Ayush Keshwan•20
    @AyushKeshwanPosted about 2 years ago

    Hii @MelvinAguilar 👋, Thank you so much for reviewing my code.

    As I am still a newbie here , I'm still confused with so many things like

    Should I start using <main> for most of the time , how'd I know when to use div or article or section tag ?

    Thank you once again for the help ^^

    0
    Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    @AyushKeshwan

    • The <main> tag specifies the main content of a document.
    • The <div> tag It has no semantic meaning and is a simple box, It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.
    • The <section> tag defines a generic section in a document
    • The <article> tag specifies independent content. The content of the article tag makes sense on its own and you can put that same article on a separate page and still make sense.

    More information here

    Marked as helpful
    0
  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @AyushKeshwan , congratulations on completing this challenge , you have done a good job

    please do use min-height for your container element else your content will get cropped

    test your code on width 300px and height 400px you will see your image is getting cropped

    you can check my solution to get an idea

    https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

    Marked as helpful
    0
    Ayush Keshwan•20
    @AyushKeshwanPosted about 2 years ago

    Hii @im-abhijit , Thank you so much for giving your feedback.

    Yes I tested the code on the given dimensions and it cropped, but I have question what this "min-height" actually do ? Like does it restrict the loading of image ?

    Thank you once again for feedback ^^

    0
    Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    @AyushKeshwan The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

    if you will give your image container a min height of what is the height of your image , then what will happen is if your screen size becomes smaller then min-height , scroll bar will come there and it will prevent your container to become further small and your complete image will be there

    https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

    Marked as helpful
    2

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