3 column card using flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Vanakkam Thozha 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HEADINGS ⚠️:

  • This solution consists incorrect usage of <h1> so it can cause severe accessibility errors due to incorrect usage of level-one headings <h1>

  ---

  • Every site must want only one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • In this solution there's three <h1> elements, like this <h1>SEDANS</h1>, you can preferably use <h2> instead of <h1>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  • Example: <h1 class="sr-only">3-column preview card component</h1>

  ---

  • If you have any questions or need further clarification, you can always check out my submission for this challenge where i used this technique and feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  SIVA RAMA KRISHNAN S•140

  @siva-krish45Posted over 1 year ago

  @0xAbdulKhalid nandri nanba.

  0
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋🏻, some of this may interest you:

  HTML / ACCESSIBILITY:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • The icons are decorative images and therefore need an empty alt attribute to be ignored by a screen reader.

  • Remember that <button> should be used for any interaction that performs an action on the current page and <a> should be used for any interaction that navigates to another view. It seems that links are more appropriate in this case.

  CSS:

  • Think about using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the font-size.

  • It might be good to get used to designing with the Mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

  • Regarding your comment: if the height of the viewport is greater than the the content, a space will be generated automatically if you have it centered using grid or flex (as you did); but if you want a space when the height of the viewport is less than the content then you will have to use margin in the '.wrapper' or padding in the body.

  I hope it’s useful : )

  Regards,

  Marked as helpful

  0

  ---

  

  SIVA RAMA KRISHNAN S•140

  @siva-krish45Posted over 1 year ago

  @fernandolapaz thanks for your valuable comments, I learned a lot.

  1
• 

  Abdallah Aminu Daneji•240

  @waad2lfPosted over 1 year ago

  Well done, Your project looks nice. about your question, you can use justify-content:space-between on the container.

  0