QR Code Component Solution

Community feedback

• 

  vinay kandoi•120

  @vinaximusPosted about 3 years ago

  Hi Jason, firstly congratulations for your first project and suprisingly you did a great job. Answers to your questions are

  • Yes you can use CSS like you did in html file. This is called internal CSS. However it is always recommended to use all the CSS styles in an external file, so that you can organainse your work properly. This also optimises the loading time of your webpage. So all your qr-code, main-text and sub-text should go in your css files.

  -Margins is the space outside of your box or control, while Padding is the space reserved inside. To get more idea, I did the following a) If you are on chrome or Edge, right click on any object and click inspect. b) There you'll se a tab 'computed'. Click on it and you will see the layout of the object including its dimension and padding. Click on the values to change them and see the effect.

  Please mark this as helpful if your questions are answered properly :)

  Marked as helpful

  2

  ---

  

  Vanza Setia•27,715

  @vanzasetiaPosted about 3 years ago

  @vinaximus Hi there! Next time, try to avoid asking people to mark your comments as helpful. It can make unnecessary pressure on the solution author to mark the comment as helpful.

  Keep in mind that the idea is to give helpful feedback to offer helpful support without the expectation of gaining something. If the solution author marks the comment as helpful, then it is a bonus. 😉

  @mattstuddert, I notice that in the community guidelines, there's no rule where people should not ask the solution author to mark the comments as helpful. Maybe, you want to add it in the near future?

  0

  

  vinay kandoi•120

  @vinaximusPosted about 3 years ago

  @vanzasetia Yes you are right Vanza. I will avoid it in the future. I m sorry if any one got pressurized. Though my intention was only to give my feedback.

  2

  

  

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  @vanzasetia, thanks for highlighting this! I'll add it this week 👍

  1
• 

  Vanza Setia•27,715

  @vanzasetiaPosted about 3 years ago

  Hello, Jason! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Your solution is responsive and looks great! 👍 It's also a good thing that you are able to finish this challenge without any media query! 👏

  Two things that I highly recommend doing,

  • Firstly, move all the styling into a separate CSS file. It's a good thing to start practicing a good practice even for a simple project. The general rule of thumb is to always separate the HTML, CSS, JavaScript into its own files.
  • Secondly, always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain). It's a good practice to keep the CSS specificity as low and flat as possible.

  Overall, great work. You have done the challenge pretty well and if you move all the CSS code into a separate stylesheet then it would clean up the HTML and also you start practicing a good practice.

  That's it! I hope this information is useful! 😁

  Marked as helpful

  1
• 

  Vincent Dsouza•70

  @VincentX33Posted about 3 years ago

  Well done Jason!!! To understand margins and padding, learn about the CSS box model. But in short, if you apply a border to an element:

  the padding is the free space within the border, while the margin is the free space outside the border.

  1