QR code component using Flexbox

Community feedback

• 

  Alyfer Jacobsen•450

  @AlyferJT

  Posted 10 months ago

  Hi there, nice job! Just a little tip about the flexbox, you don't really need to set a justify-content or align-items everytime you use display: flex; on a container. The main goal of the flexbox is that you have the control of the elements inside your container, so you make then to behave the way you need.

  Well, in my view, this would be something i would do in that specific project.

  I would change the HTML to:

  <div class="container">
        <img src="images/image-qr-code.png" alt="image of a qr code">
        <div class="container-info"> 
              <h1>Improve your front-end skills by building projects</h1>
              <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
        </div>
  </div>
  

  Using a <div> around <h1> and <p>, you would have a better control of the element.

  So you would have 2 elements inside the .container

  So in the CSS you have this:

  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  

  that's not wrong in all cases, but in that one, you could do this:

  display:flex;
  flex-direction: column;
  justify-content: space-between; /* i think this would be better */
  gap: 2rem; /* or whatever value you want */
  
  padding: 1rem; /* i think that a fixed value would show a better look, but depends*/
  

  The gap is a space between the elements inside the flexbox

  So doing all that would remove the weird blank spaces around it, and bring it a nice look. I recommend you to search a fun minigame that calls Flexbox Froggy on google, this somehow teachs you the logic behind the flexbox. Overall, i think tha's it, if you didn't understand something, feel free to ask :D

  00

  Marked as helpful
• 

  MElhatmi•40

  @MElhatmi

  Posted 10 months ago

  You have done well using semantic html, properly centering the qr container using flexbox. I'm getting the impression that you are too concerned with responsiveness already, from my understanding of the design all we need to do in regards to responsiveness is that we center the container across all screen sizes, and you already to that. what I advice you to do now is to get familiar with figma and how to get all the metrics, and just copy all the values from widths and heights to margins to font sizes to border radius and even the box shadow. until you are close enough to the design after that I advice you to take an optional step to learn about css variables and implement them in your solution, they maybe overkill for a small project like this but i think its a good practice going forward

  00

  Marked as helpful