Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Plain HTML and CSS Card

@Aaron-Morse

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

PhoenixDev22 16,950

@PhoenixDev22

Posted

Greeting Aaron Morse,

congratulation on completing your first frontend mentor challenge ,

I have some suggestions regarding your solution:

CSS

  • width: 320px;an explicit width is not a good way . consider using max-width to card instead and a little padding to the body to prevent it hitting the edges

  • height: 497px;It's rarely ever a good practice to set heights on elements, you almost never want to set it . let the content define the height.

  • In line-height: 28px;use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

General points :

  • It's recommended not to use px absolute units for font-size. you can use rem(relative units) instead .If the user tries to resize the text through his browser, any element with an absolute font size will not change, although any other element will. This prevents users from making your page's text larger if they need to see it more clearly, or smaller if they think it's too big.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  • Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  • It's recommended to use em and rem units .Both em and rem are relative units , Using px won't allow the user to control the font size based on their needs.

Overall , your solution is good. Hopefully this feedback helps.

Marked as helpful

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