Colorful cards component with html and css

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Otuekong Arthur,

  Congratulation on completing this challenge, I have few suggestions regarding your solution:

  HTML

  • To tackle the accessibility issue: Page should contain <h1>. In this challenge , as it’s not a whole page , you may use <h1> with the class sr-only which is visually hidden but present for assistive technology.

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

  • Imagine what would happen when the user clicks on those learn more ? Clicking those "learn more" likely would trigger navigation not do an action so button elements would not be right.

  • You are misusing the section tag. Using <section> tag for each card is not really a good choice . Section is not meant to be used anytime you feel tempted to use a div . section is for a bigger chunk of content often titled by <h2> Read more about usage notes

  CSS

  • Your styles file is totally mixed up , as there are style for unfounded components like nav and nav ul …. Even though:

  • Consider using rem for font size . If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • To center the component on the middle of the page, You can use the flex or grid properties and Use min-height: 100vh to the body.

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

  Overall, well done . Hopefully this feedback helps

  Marked as helpful

  1

  ---

  

  Otuekong Arthur•90

  @fizy500Posted over 2 years ago

  @PhoenixDev22 Thanks for your suggestions . I have pushed changes to the code. Thanks once again.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @fizy500 Great work! I have checked again your solution. Just one little thing. you have removed the <h2> and replaced them by <h1> but

  • About <h1> it is recommended not to have more than one h1 on the page . Multiple <h1> tags make using screen readers more difficult, decreasing your site’s accessibility. You can add a <h1> withclass="sr-only"(Hidden visually, but present for assistive tech). Then you can use <h2> instead of those <h1>.

  • On your buttons, add border: 2px solid transparent; to the regular state. This way when the hover on the buttons , it doesn't add an additional 4 pixels to the height and width making the elements shift.

  Hopefully this makes it clear.

  0