Grid, flex, media query

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello Luis

  Congratulation on completing this challenge,

  I have some suggestions regarding your solution:

  HTML

  • Page should contain a level-one heading . As this is not a whole webpage , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  • Don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms.

  • 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.

  • Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. So use the <a> .

  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.

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

  • width: 900px;an explicit width is not a good way . consider using max-width to component instead .That will let the component grow up to a point and be limited

  • It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

  • In line-height: 25px; 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 point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

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

  • Last , check the responsiveness.

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

  10

  Marked as helpful