Skip to content
Submitted about 2 years ago

Container with QR Code using HTML and CSS

zMitchC•30
@zMitchC
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi guys! This is my solution.

There are two things I'm note sure about: The first thing is the code optimization, to be more simple avoiding repeat in the code.

Secondly, I don't know if I've written well the README file. Is that clear to understand?

Feel free to give me feedbacks and tips. I'm happy to learn new things that can improve my works! :)

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Ecem Gokdogan•9,380
    @ecemgo

    Some recommendations regarding your code that could be of interest to you.

    • In order to center the card correctly, you'd better add flexbox and min-height: 100vh to the body
    • You'd better remove the width: 100%; you gave to the body in HTML.
    body{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}
    • If you use flexbox in the body, you don't need to use margin, top, left and right to center the card.
    • Also, if you use max-width instead of width, the card will be responsive.
    .qrcode-ctnr {
  max-width: 250px;
  /* width: 250px; */
  /* height: 400px; */
  /* position: absolute; */
  /* top: 0; */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
  /* margin: auto; */
}
    • If you want to make the card responsive and the image will be positioned completely on the card, you'd better add width: 100% and display: block for the img in this way:
    img {
  /* width: 250px; */
  /* height: 250px; */
  width: 100%;
  display: block;
}

    Hope I am helpful. :)

    Marked as helpful
  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.
    • We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component
    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    .qrcode-ctnr {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
    • Along with that you want to remove,
    <body style="width: 100%; background-color: hsl(212, 45%, 89%);">
</body>
    • Hereafter avoid inline styling it may affect code reusability, instead you can apply these styles from the seperate css file
    • Now your component has been properly centered with better structured code

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • dimar hanung•560
    @dimar-hanung

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale but still good
    2. html is pretty good, not too nested 👍
    3. Responsive until galaxy fold screen size 👌
    4. CSS Naming is also good, represent what is it for, but in my opinion don't use abbreviations, because the important thing is easy to understand, instead class="qrcode-ctnr" i’ts ok to be class="qrcode-container" , it looks a bit long, but the main thing is easy for others to understand

    My Feedback:

    • I suggest you use html semantic convention, add <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
    • you can seperate file by folder to be more structured, for example:
    public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    About your question

    • You handle it well, like in here:

      .qrcode-title, .qrcode-par{
    font-family: 'Outfit', 'sans-serif';
    text-align: center;    
}

      so it more less repetitive, nice 👍

    • The README.md was clear, just little mistake like whitespace in image too long and some typo like in section Afer that, to get rounded corners I use border-radius: 10px., but I understand what you mean like progress, technology used, etc

    and finally overall is good, nice solution, hope it useful 🙌

    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