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

3-column Preview Card with Flex(HTML, CSS)

under4 110

@under4

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello all! This is my first challange here. Fairly new to web design and programming. Would greatly appreciate some feedback! Thanks in advance.

Community feedback

@AgataLiberska

Posted

Hi @under4, well done on this challenge, looks really good! A few things I noticed that you could work on

  • the column is not centered on larger screens

  • the layout goes from column to horizontal when there isn't quite enough space on the screen to display it correctly

  • many people don't consider using ids for styling to be a good practice, it would be better to have a separate class for each type of car and combine classes, or have a single class for cards and use pseudo selector :nth-of-type to set the backgrounds etc.

  • you have a class of container that you don't seem to be using at all?

  • instead of setting border-radius on individual cards, set it on the containing div, and add overflow: hidden to make sure that the cards don't cover the rounded corners of it.

Hope this helps :)

1

under4 110

@under4

Posted

Hey @AgataLiberska thank you for the feedback. It seems that I misunderstood the container class. Thank you for clarifying it. I still dont have a grasp on good practises yet but with time and helpful people like you, i will.

Have an awesome day!

0

@AgataLiberska

Posted

@under4 no worries, happy to help! :)

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