Responsive 3 Column Preview Card [Pure CSS + Animation]

Hi,

As I've just completed the same challenge, here's my little contribution to yours :

• It looks great !
• As regard to mobile first design you will first style mobile design in the main section of your css file, then use @media screen and (min-width: 700px) to style desktop design. The advantage being that most of the time a larger proportion of properties are inherited by desktop styles from mobile styles than the other way around, hence using mobile first design reduces the amount of overriding properties you have to do in your media queries, among many other advantages.
• Try using em and/or rem instead of hard coded px, as explained in this video : CSS em and rem explained #CSS #responsive - YouTube
  • That way you can specify a base unit font size in pixel in the body element (15px for this challenge), and apply modifications to this value later on. See example below.
  • To use at your advantage in mobile first design : you won't have to override all font sizes of all needed selectors in your media queries but only the body font size and everything will follow (great use of mobile first design by the way).

body {
	font-size: 15px;
}

p {
	font-size: 1rem; // Paragraphs will be 15px.
}

h1 {
	font-size: 2.7rem; // h1 will be 15 * 2.7 = 40.5px.
}

@media only screen and (min-width: 700px) {
	body {
		font-size: 17px;
	}
	// Paragraphs will be 17px, without you having to specify it !
	// Then your h1 will be 17 * 2.7 = 45.9px.

}

I tried to implement those advice in my challenge, feel free to check it :)

I hope I'm not talking nonsense.

See you.

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

Mobile first approach:

https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first

• To better identify the main content of you site you will want to encase your entire component inside a Main Element.

• Along with the Blank Alt Tag, you also want to include the aria-hidden=“true” to your car images/icons to fully remove them from assistive technology.

• 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.

• Your "buttons" were created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃