Skip to content
Submitted 4 months ago

Four Card Feature Section with Next.js, Tailwind CSS

JaceLee•240
@jaceleedev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

  1. Implementing a more complex responsive design using CSS Grid, which allowed for a more sophisticated layout compared to previous challenges.

  2. Successfully adopting a mobile-first approach in this project, which improved the overall design process and responsiveness of the site.

  3. 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!

What challenges did you encounter, and how did you overcome them?

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

  • KADIBIA•40
    @iamkadibiaPosted 3 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"> 
      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"],
        },
      },
    },
  };
    <body> </body> </html>

    I HOPE THIS HELPS...

    0

Please log in to post a comment

Log in with GitHub

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