Design comparison
Solution retrospective
HI, making the four card component was hard. I was told to use grid instead of flex, I'll go study more on that. Thanks. Feedback are appreciated.
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @Osauyi, 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.Use units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices.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 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-rem2.The box-shadow is a bit too strong, this is due the
opacity
andblur
. The secret to create a perfect and smooth shadow is to have low values foropacity
and increaseblur
try this value instead:box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);
If youβre not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/
βοΈ I hope this helps you and happy coding!
Marked as helpful0 - @VCaramesPosted about 2 years ago
Hey @Osauyi, some suggestions to improve you code:
- To give your HTML code structure, you want to set up your code in the following manner:
<body> <header></header> <main> <section> <div class="supervisor-card"></div> <div class="team-card"></div> <div class="karma-card"></div> <div class="calculator-card"></div> </section> </main> </body>
The Header Element represents introductory content.
The Main Element identifies the main content of the document.
The Section Element can be used to wrap content that is related to each other.
And since none of the cards make sense on their own, a simple Div will do for each card.
-
The heading is one single heading so the entire thing should be wrapped in a single <h1> Heading along with a Span Element.
-
The icons serve no other purpose than to be decorative; They add no value. There Alt Tag should left blank and have an aria-hidden=βtrueβ to hides it from assistive technology.
-
Add a third layout to make the transition from mobile π± -> desktop π₯ views smoother.
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
Happy Coding! π»π
Marked as helpful0
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