QR code - Designed with flexbox

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 12 months ago

  Hi Pedro!

  Congrats on submitting the first challenge!

  I have a few suggestions after reading your code

  1. You might want to consider using units for font-size as rem instead of px. Because if the user goes to their browser settings and chooses font size as large. They would expect the font size to scale but with pixels, the font-size will remain the same and users will not be happy.
  2. It is better to define some CSS definitions such as hsl(212, 45%, 89%) as a variable. This is not limited to just colours, it could also be spacing definitions, box-shadow, font-sizes and many more. The reason is now imagine there is a requirement that you have to alter the theme colors for this challenge. That means you have to go to each and every style definitions to alter them. That's a lot of work, which invites more room for error and debugging. It is not ideal for maintenance. If you define all these CSS definitions in one place and if you have to alter the color scheme, you just alter in that variable and it will be reflected in all the classes

  Example:

  :root {
  --link-color: hsl(228, 45%, 44%);
  --card-border-radius: 20px;
  --font-size-base: 1rem;
  --font-size-s: 0.8rem;
  }
  
  .card {
    border-radius: var(--card-border-radius);
   ...//other definitions
  }
  
  .card a {
    color: var(--link-color);
    font-size: var(--font-size-base);
  }
  
  img {
     border-radius: var(--card-border-radius);
     ...//other definitions
  }
  
  footer a {
    color: var(--link-color);
    font-size: var(--font-size-s);
  }```
  

  Marked as helpful

  0

  ---

  

  Chris•100

  @DeveloperChrisPPosted 12 months ago

  Thanks so much for taking the time to reply @rupali317. That's really helpful advice which I hadn't considered. I'll try to implement those points moving forwards :)

  1