Design comparison
Solution retrospective
-
Implementing a more complex responsive design using CSS Grid, which allowed for a more sophisticated layout compared to previous challenges.
-
Successfully adopting a mobile-first approach in this project, which improved the overall design process and responsiveness of the site.
-
I've added a 2x2 card layout between the desktop and mobile views for a more natural responsive design, even though it's not defined in the design system. Please visit the site and check it out!
The main challenge I faced was implementing the desktop layout after initially using flexbox for the mobile-first approach. The desktop design proved more complex than anticipated. I overcame this by switching to CSS Grid for the desktop layout and then refactoring the existing code.
What specific areas of your project would you like help with?I'm curious about how others effectively utilize CSS Grid, especially given that Figma's dev mode only shows layouts in Flexbox. While I managed to implement Grid for this project, I'm interested in learning more about best practices for translating Flexbox-based designs from Figma into Grid-based layouts. Any tips or insights on this process would be greatly appreciated, particularly strategies for efficiently converting Figma's Flexbox layouts to Grid in actual code.
Community feedback
- @iamkadibiaPosted 4 months ago
Hi friend your design looks good. It's pretty cool... I will like to give you a recommendation; It's not safe deploying unnecessary files to your git hub especially the tailwind.config.js file. It can cause conflicts and inconsistencies when working with a team and deploying your bigger projects. You can simply move your custom configurations to a new file and link with your html or you can use the tailwind play CDN approach below:
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<body> </body> </html>tailwind.config = { theme: { extend: { colors: { red: "hsl(0, 78%, 62%)", cyan: "hsl(180, 62%, 55%)", orange: "hsl(34, 97%, 64%)", blue: "hsl(212, 86%, 64%)", veryDarkBlue: "hsl(234, 12%, 34%)", grayishBlue: "hsl(229, 6%, 66%)", veryLightGray: "hsl(0, 0%, 98%)", }, fontFamily: { poppins: ["Poppins", "sans-serif"], }, }, }, };
I HOPE THIS HELPS...
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