Plain HTML and CSS Card

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  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