Skip to content
OverviewSolutions
3
Comments
3
KADIBIA
@iamkadibia

All comments

  • KrishnaPoddar1•400
    @KrishnaPoddar1Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Completing the whole Project without referring to any material and the improved timing.

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

    Nothing in particular just took some time to make a decision whether to use a flex or grid in .b1, .b2 sections in the desktop view. Chose flex at the end

    Would like advice if it was the right call or if anything can be done differently.

    What specific areas of your project would you like help with?

    Any advice or suggestions would be of great help.

    Thank you

    Responsive Review template using HTML and CSS Grid

    1
    KADIBIA•40
    @iamkadibiaPosted 4 months ago

    Hello! Your solution looks great, and this is one of the best so far I will suggest you reduce the size of the images and then adjust the padding. I think doing this will help make your solution more accurate.

    Hope this helps?

    0
  • JaceLee•240
    @jaceleedevSubmitted 4 months ago
    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.

    Four Card Feature Section with Next.js, Tailwind CSS

    1
    KADIBIA•40
    @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"> 
      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
  • KADIBIA•40
    @iamkadibiaPosted 4 months ago

    This is the best I have seen so far

    0