Responsive 3 Column Card Component

👾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!

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!

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.