
BMI calculator with CSS custom properties and CSS grid layout
Design comparison
Solution retrospective
This challenge was trickier than I had anticipated, especially with respect to the layout. But I learned a lot trying to figure out how to get CSS grid to be responsive and deal with overlapping elements and things like that. So it ended up being a lot of fun to work through those things.
What specific areas of your project would you like help with?Comparing the design to my solution, the background gradient color in the top hero section is definitely off. The design has much more of the lighter blue and my solution has much more of the darker blue. I attempted to use the gradient parameters directly out of the settings from the Figma file, but given how off it is, I clearly didn't do that correctly. I also tried using the Figma Solid and Gradient to CSS plugin to translate the gradient in the Figma design directly into CSS, but that didn't give me great results either. I'd appreciate hearing how others figured out the best gradient for this design, and more generally about a better process for translating Figma design gradients into CSS. Thanks in advance.
Community feedback
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