Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code - Designed with flexbox

Chris 100

@DeveloperChrisP

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Created using 2 Flex-boxes (1 for the QR content, and other for the page layout) - I'm unsure if 'grid' would be "better" for layout, or if it doesn't matter.

Community feedback

P
Rupali 780

@rupali317

Posted

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

@DeveloperChrisP

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord