QR-code-component-challenge

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @Zukamimotu147!

  Your project looks pretty good to me!

  If you add a box-shadow to the card, it'll look even closer to the original design.

  Other than that, excelent job!

  Marked as helpful

  0
• 

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  • In future coding, It's better not to assign definite values such as in your case div class .QR-code width: 250 px & height: 420 px, same with img and div class .text . You could assign with percentage values having responsive design while maintaining your desired size. For example, You can assign img width: 70% and class .text width: 80% as you like, So the width will always have 70% & 80% in relative to their parent size class .QR-code.

  • Adding up to previous point, If you're gonna assign value to element, Check on and use Clamp( ) method in your coding for font-size, width, margins, paddings, etc., So their designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout. Even It can control at what viewport dimension to start changing sizes.

  • You could wrap img inside div for better control design.

  Hope you find this Useful & Helpful.

  Other than that, Nice work & keep on going.

  Marked as helpful

  0
• 

  Dreamleaf•230

  @DreamleafPosted 11 months ago

  Well done, one suggestion would be to move away from using the PX values for fonts.

  Using REM instead gives much better consistency across different elements (once you understand how it works!). Check out W3Docs for a primer.

  Hope this helps

  Marked as helpful

  0
• 

  P

  Ruben de Man•460

  @developer-rubenPosted 11 months ago

  Hi Zuka,

  Welcome to the community! Here are my tips for your first challenge:

  • Take a look at variables, so you can reuse colors anywhere in the code without writing the same color code over and over again.
  • Search Google for BEM, which is a way of writing html and css in a more structured way.
  • Avoid using uppercase and lowercase in your selectors, it makes the css look more clean
  • Take a look at flexbox, which you can use to center your card more efficient

  Again, welcome and see you in an other challenge!

  Cheers, Ruben

  Marked as helpful

  0