Column Component using HTML and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Gowsalaya,

  Congratulation on completing this challenge,

  I have some suggestions regarding your solution:

  HTML

  • Wrap the body content using <main> landmark . HTML5 landmark elements are used to improve navigation .

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images . In this challenge , all the images are decorative.

  And it is essential that interactive elements have focus-visible styles as well as hover styles. These need to be really clear and obvious as they are needed to help a keyboard user know where is focused on the page.

  CSS

  • Consider using min-height: 100vh to the body instead . This allows the body to set a minimum height value based upon the full height of the viewport and allows the body to to grow taller if the content outgrows the visible page.

  • You can remove the body width, consider using max-width to the component that wraps the three cards .container.

  • In line-height:1.7em;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.

  • border-radius andoverflow hiddento the main container that wraps the three cards so you don't have to set it to individual corners.

  General points : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

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

  Marked as helpful

  0

  ---

  

  Gowsalaya•170

  @GowsalayadeviPosted over 2 years ago

  @PhoenixDev22 Thank you so much for taking your time and reviewing my code. Every point is valuable and I made all the changes.

  1