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 component solution

Cas 210

@iguanasplit

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


hey! its been a while, its been a while but i wanted to keep doing this!

So i was wondering about text overflow or what its recommended to use in this cases as the text doesnt fit the container, i used this three properties in my <p> overflow-wrap: break-word; word-break:keep-all; overflow-wrap: anywhere; i dont know how common or often are this used or how correct is it.

oh and are media querys only placed at the end? i tried placing them in other parts of the code but they didnt work

i would like to get general feedback!, feel free to comment tips or advice to improve or optimize my code!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello @iguanasplit, Congratulations on completing this challenge!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

1.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

2.You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.

✌️ I hope this helps you and happy coding!

Marked as helpful

0

Cas 210

@iguanasplit

Posted

@correlucas thank you so much for the resources and the advice, i will be trying this for the next challenges, this was really helpful.

thank you again for commenting in my solutions, have a nice day!

1

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