Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @mmiskiewicz99, Congratulations on completing this challenge!
Great code and great solution! Iβve few suggestions for you that you can consider adding to your code:
1.Add transitions to make the interaction smoother while the element gets hovered, you can use a value like
transition: all ease-in 0.5s
.2.Use units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but all sizes as well.3.
IMPROVE YOUR WORKFLOW
using VSCODE you can code your whole page usingpx
and then in the end use a plugin called px to rem here's the link β https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem4.To make your CSS code easier to work you can create a
single class
to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.βοΈ I hope this helps you and happy coding!
Marked as helpful0 - @denieldenPosted about 2 years ago
Hi Marcin, great 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 afont-family:" Big Shoulders Display ", sans-serif
much more similar to the primary font.Hope this help and happy coding :)
0
Please log in to post a comment
Log in with GitHubJoin 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