Submitted almost 2 years ago

Responsive component using Flexbox

Eduard Ionescu• 510

@EduardIonescu

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

On my last challenge I got advice to use rem instead of px, but should I do that for everything, or should some things be in px (font-size / width etc) ?

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey there! 👋 Here are some suggestions to help improve your code:

The “car images/icons” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

The headings in your component are being used incorrectly. Since the h1 heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading since it is reusable and it will give each heading the same level of importance.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁

Marked as helpful

exitsimulation• 100

@exitsimulation

Posted almost 2 years ago

There are several advantages to using the rem unit over the px unit in CSS. First, the rem unit is relative, which means that it scales based on the root element of the document, whereas the px unit is an absolute unit of measurement that does not scale. This makes the rem unit more flexible and easier to work with, especially when creating responsive designs that need to look good on a variety of different screen sizes.

Another advantage of using the rem unit is that it makes it easier to create consistent sizing across different elements on a page. Because the rem unit is based on the root element, you can use it to size elements relative to the base font size, which is specified on the <html> element. This makes it easy to ensure that all text on a page is consistently sized, regardless of where it appears in the document hierarchy.

Additionally, using the rem unit can make your CSS code easier to read and maintain. Because the rem unit is a relative unit of measurement, it can make your CSS code more self-contained and easier to understand. This can be especially helpful when working on large, complex stylesheets with many different elements and styles.

Overall, the rem unit offers a number of advantages over the px unit, including greater flexibility, consistency, and readability in your CSS code.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord