Responsive 3 Column Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @CreatiqueMedia, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  • The icon doesn’t have an important role when you think about semantics and the html structure. So you can add aria-hidden=“true” to avoid it being found and read in the accessibility mode/screen readers. These are only decorative items.
  • Use max-width: 100% for the cards in the mobile version to allow the cards grow 100% of the width considering the paddings and avoid to have a lateral gap (limited by a fixed width).
  • To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.
  • Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  CreatiqueMedia LLC•70

  @CreatiqueMediaPosted about 2 years ago

  @correlucas AWESOME! Man, I really appreciate this type of feedback, it's GREAT! Thanks man, means a lot to me for you to take time to provide such great insight on web dev! I am taking notes from you gurus out there!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, there! 👋

  Here are some suggestions for improvements.

  • There's no need to wrap each element with section tag. Also, those section tags are behaving like div in this case. So, simplify the HTML markup by removing those section.
  • Swap all the h1 with h2. It is not a best practice to have many h1 on a page. It can confuse the screenreader users because there will be many titles for a single page. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
  • Always specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. I recommend reading this article about rem and em unit. This article explains both units in a simple way.
  • Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.
  • Never use 100vw on the body as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
  • I recommend using rem unit for margin. The percentage unit is a relative unit. So, it can lead to an unexpected result.

  I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
  • Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps! Happy coding!

  Marked as helpful

  0

  ---

  

  CreatiqueMedia LLC•70

  @CreatiqueMediaPosted about 2 years ago

  @vanzasetia AHHHHH! Man, I ALWAYS forget about screen readers!!! I always forget about coding practices for accessibility for the handicap as well. Your feedback here is an absolute NUGGET of information. I keep all the notes that you all provide in my OneNote notebook and I refer to it each time I develop something to ensure I am following those best practices.

  So, keep the FANTASTIC recommendations and suggestions coming!

  Also, thanks for the GREAT homework material!

  I got some studying to do today bro!

  Love ya guys!

  1
• 

  Zach Flegle•130

  @zflegle3Posted about 2 years ago

  Hey, great solution!

  One suggestion I would make is to add a border to your buttons when they are not being hovered. Pick either transparent or the main button background as the color and change the border color on hover. This prevents the layout from shifting on hover because the border is already there and just changing colors.

  1

  ---

  

  CreatiqueMedia LLC•70

  @CreatiqueMediaPosted about 2 years ago

  @zflegle3 You don't like that slight flinch? I think it looks kinda cool, but I know what you are talking about.

  Thanks for the feedback brother, I appreciate it.

  1