Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section solution

Callie 170

@Callietron300

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Anything people notice such as better practices I could be keep etc would be greatly appreciated. Thanks all!

Community feedback

bikeinman 1,080

@BikeInMan

Posted

Nicely done and code looks nice too.

You have used ids like orange, blue etc., to style individual cards. But may be you could have another class like card card-orange etc. Most people use ids to access elements from Javascript, because they are supposed to be unique to a page.

Cards are themselves, very responsive. Very nice, but may be you should fix a minimum size below which you will not allow it to stretch, so that it will still look nice and card like and not like a long strip of element. ( like in dev tool, iPhone 12/13 mode).

Just my two cents, but great work.

Marked as helpful

0

Callie 170

@Callietron300

Posted

@BikeInMan thanks so much, I actually was really struggling with the border tops- I was using ".card .blue" as a class CSS selector to colour them and it wasn't working I tried alot of combinations including adding div etc (having four different colours to work with was useful for experimenting) so I used IDs in the end as it was an easy override, but maybe not a perfect one.

Thank you I'll add fixing the stretch a little later that's a good idea!

Really appreciate you taking the time to look through my code

0
bikeinman 1,080

@BikeInMan

Posted

@Callietron300 I don't know what exactly happened. But I understand your frustration, I have been there. But lately, I try to stop, take a break and think why something is not working, if it is supposed to work.

I am not very confident about my CSS skills yet, but I didn't have the problem. May be you want to look at my solution. https://bikeinman.github.io/frontend-mentor-4-cards/

Good Luck.

Marked as helpful

0
Callie 170

@Callietron300

Posted

@BikeInMan Sweet thanks, I will have a look at yours

0

Account Deleted

Hello there! 👋

Congratulations on finishing your challenge! 🎉

I have some feedback on this solution:

  • Always Use Semantic HTML instead of div like <main> <header> , etc for more info.

if my solution has helped you do not forget to mark this as helpful!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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