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

Responsive 3 Column Preview

wavy 30

@wavylmao

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


Everything was working great until it came to centering the cards on a large screen. I noticed it was centering the root component which was surrounding the sedan card, and thus centering the cards starting from the sedan card. Since the SUV card is the middle card, it should be centered from the SUV card. To fix it I moved the root element to the left but there must be a better way to tackle this.

Community feedback

@VCarames

Posted

Hey @wavylmao, some suggestions to improve you code:

  • Stay away from using libraries until you fully grasp the fundamentals. These is the purpose of this challenges.

  • The headings are being use incorrectly. The <h1> Heading can only be used ONCE per page. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.

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

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

Happy Coding!

Marked as helpful

1

wavy 30

@wavylmao

Posted

@vcarames Thanks for the advice, I will definitely consider it next time.

0
Travolgi 🍕 31,420

@denielden

Posted

Hello Wavy, You have done a good work! 😁

Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

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