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

Yanna 120

@yannancls

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VitorEmanoelNogueira

Posted

Hello, Yanna, great job!

After seeing your codes, I have some tips that may help you:

  • If you want your project to be more like the design, I recommend you to pay attention to the "Powered by Technology" and cards titles, since the have different font weigths, and to the border-radius of the cards aswell, since your project has a value higher than the original design (that I personally like better XD);
  • For improvement in general, I recommend you to studying the 'em' and 'rem' unit of CSS, since using px can limit acessibility for custom configurations of font-size, etc. Here's why font-size should not be in pixels: https://fedmentor.dev/posts/font-size-px/. By learning these units and understanding when to use which one, you can use them on the font-size, margin, paddings, etc.
  • Other thing I recommend is learning CSS GRID, that will alow you to place the cards like in the desktop version with much less effort.

Keep on the great work! You did great!

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