QR code component using HTML and CSS

Community feedback

• 

  cesar hernan ruscica•320

  @hernanruscicaPosted about 2 years ago

  Hi Gabrielkyalo, I was seeing your solution. It is very good, that you have encouraged to share it and participate in this community. It will help you to improve your codes.

  About this solution, I can tell you that it doesn't look very similar to the challenge design, I think you should have tried to make it more similar with all the details. For example in the "paddings", "font-sizes", colors. you even miss the "boxshadow" of the card.

  Regarding the code, you should use semantic HTML, relative units. In addition, to use less lines of code, you can use the "shorthand" of the different attributes.

  They are details, but they make the master. It is very good, that you are here, and that you have sent your solution.

  Greetings.

  Marked as helpful

  1

  ---

  

  Gabriel Kyalo•70

  @gabrielkyaloPosted about 2 years ago

  @hernanruscica Thank you so much for your feedback. I will apply this to my next code. Thank you once again.

  1
• 

  Bill McDavitt•460

  @BMcdavittPosted about 2 years ago

  Congratulations on completing your first challenge with Front End Mentor!

  Your solution looks great. One quick tip if you don't mind, a lot of challenges here ask for the content to be centered vertically. The easiest way to do this would be to add the following CSS to your code:

  body{
      height: 100vh;
      display: flex;
  }
  
  div.box{
      margin: auto;
  }
  

  Good luck, and happy coding.

  Marked as helpful

  1

  ---

  

  Gabriel Kyalo•70

  @gabrielkyaloPosted about 2 years ago

  @BMcdavitt Thank you so much for the tip. I actually had challenges with this. Thank you also for the code.

  0
• 

  Nikhil Sharma•340

  @NIk22517Posted about 2 years ago

  Hey @gabrielkyalo, Congratulations!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Improve the semantic by replacing the <div> used for box and using instead <section> is a better tag, remember that <div> doesn’t have any effective meaning is just a block elements, so for a big block of elements use semantic tags.

  This is a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

  You have use padding padding-top padding-bottom in your box class firstly understand if you are using padding then you do not have you padding-top padding-bottom padding-left padding-right

  .box{
    padding: top right bottom left
  }
  

  if you use padding and put just one value then that value will be applied to all the side in the box

  .box{
    padding : 1rem;  
     /// it will apply to all the side of the box
  }
  

  for the text just apply text-align: center

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Gabriel Kyalo•70

  @gabrielkyaloPosted about 2 years ago

  @NIk22517 Thank you for the tip. I am sure to apply this to my next challenge. It will help me.

  0