Skip to content
OverviewSolutions
8
Comments
9

orbdev1

@orbdev1130 points

hi

Latest solutions

View more solutions

Latest comments

  • orbdev1•130
    @orbdev1

    Good job Ajide, but need to update some observations:

    • Do mobile view
    • Image needs a 'object-cover' class to be fine on that div
    • Use 'absolute' and 'relative' for share button, when user rezising de viewport, the 'modal' of share is not in correct place
  • P
    tasosbeast•150
    @tasosbeast
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing a responsive grid layout that accurately matches the design while adapting to different screen sizes. The card component's dynamic styling system—using object mappings for colors, text styles, and grid positioning—turned out to be an elegant solution that made the code more maintainable.

    If I were to approach this project again, I would focus on simplifying my workflow to reduce development time:

    • Start with a better component structure - I spent too much time refactoring my Card component. Next time, I'll plan the component hierarchy before writing code.

    • Use utility classes more efficiently - I created several custom style objects in my components when I could have leveraged Tailwind's built-in utilities more consistently.

    • Simplify data management - Moving data to a separate file was helpful, but I could have structured it more efficiently from the start.

    • Focus on mobile-first implementation - While I did use a mobile-first approach, I sometimes found myself making unnecessary adjustments. A stricter mobile-first discipline would save time.

    These adjustments would help me complete similar projects more efficiently while maintaining high-quality results.

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

    While building this testimonial grid section, I encountered several challenges that pushed me to find creative solutions:

    1. Dynamic Styling Based on Card Type: Each card needed unique styling (colors, backgrounds, grid positioning). Rather than hardcoding styles for each card, I created mapping objects that connected card identifiers with appropriate classes:
    const cardColors = {
  card1: "bg-Purple-500",
  card2: "bg-Grey-500",
  card3: "bg-White",
  card4: "bg-Dark-blue",
  card5: "bg-White",
};

    This approach made the code more maintainable and easier to update.

    1. Complex Grid Layout: the layout required different cards to span multiple columns/rows at different breakpoints. I solved this by creating a gridProperties object that defined positioning for each card:
    const gridProperties = {
  card1: "md:col-span-2",
  card4: "md:col-span-2",
  card5: "md:col-span-2 xl:row-span-2 xl:row-start-1 xl:col-span-1 xl:col-start-4",
};

    3.SVG Background Image: Getting the quotation background image to appear correctly on the first card was tricky. I resolved this by creating a custom utility class in my CSS that properly positioned the SVG:

    @utility bg-quotation {
  background-image: url("./assets/images/bg-pattern-quotation.svg");
  background-position: 85% 0%;
  background-repeat: no-repeat;
}

    4.Custom Font Integration: Incorporating the Barlow Semi Condensed font with multiple weights required careful configuration of font-face rules and ensuring they were properly applied throughout the application.

    By approaching each challenge systematically and leveraging the flexibility of React components and Tailwind CSS, I was able to create a responsive, visually accurate implementation of the design.

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

    I'm looking for feedback on the following aspects of my implementation:

    1. Grid Layout Optimization: I've implemented the testimonial grid using Tailwind's responsive grid system, but I'm curious if there are more efficient ways to handle the complex layout requirements, especially handle the varying card sizes across different breakpoints.
    const gridProperties = {
  card1: "md:col-span-2",
  card2: "md:col-span-2",
  card3: "md:col-span-2",
  card4: "md:col-span-2",
  card5: "md:col-span-2 xl:row-span-2"
};
    1. Dynamic Styling Pattern: I've used object mappings to apply different styles to each card based on its className prop. For me, this works, but I'm curious if there are better patterns for managing component variants:
    const cardColors = {
  card1: "bg-Purple-500",
  card2: "bg-Grey-500",
  card3: "bg-White",
  // ...
};
// ...

    1. Background Image Integration: I've had trouble with the quotation mark background image on the first card. Would using a different approach to background images with Tailwind help?

    2. Component Structure: Is my current Card component too complex? Should I consider breaking it down further into smaller components?

    3. Tailwind Theme Extension: I'm using custom color variables. Is extending Tailwind's theme the best approach or should I rely on CSS custom properties?

    Any advice on these specific areas would help me improve both this project and my approach to similar projects in the future!

    Responsive Grid with React, Tailwind CSS, and Dynamic Styling

    #tailwind-css#react
    1
    orbdev1•130
    @orbdev1

    Nice job Tatos! I thinks just 3 little observations:

    • In comment of Patrick Abrams, is cut the 'headline'
    • In mobile design, top and bottom there is not margin/padding
    • Need add a bit more of shadow, try with different values
  • P
    Rực Chu Văn•230
    @vanruc
    What are you most proud of, and what would you do differently next time?

    I am able to control general layout in different mobile size

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

    Any honestly comment are welcome!!!

    Responsive Four Card Feature Section

    #tailwind-css
    1
    orbdev1•130
    @orbdev1

    Nice design, i think there is a small observation, in the border top of cards, in div where "card__wrapper--content--title" class is, this div should have class with the border top, and div who has "card__wrapper--content" class, should have the border-radius and possible overflow hidden

  • mrRamezanzad•80
    @mrRamezanzad
    What are you most proud of, and what would you do differently next time?

    looks pretty similar

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

    it was hard to make it responsive

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

    making it responsive was hard as hell

    product-preview-card-component

    #tailwind-css
    1
    orbdev1•130
    @orbdev1

    Hi Ramezanzad! Good job on your project, yeah i understand you, there is some of difficulty on responsive. But with practice it will be easy and more fast. These are my observations:

    • You know it, responsive in first place.
    • Some font size are not corrrect
    • Use object-fit for image, it will help with stretched image
    Marked as helpful
  • orbdev1•130
    @orbdev1

    Hi Laize! Good job, these are my observations:

    • Little detail on font text on name of product, is different, but is ok
    • Need align correctly price and old price, same with cart (.svg) and 'Add to Card'.
    • And resize from mobile to desktop, the breakpoint i think it will be 640px or less. 376px is tiny and in one moment the content does't display correctly
  • Franklin Nmaju•110
    @Gentlefrank
    What are you most proud of, and what would you do differently next time?

    I want to thank @stuartbradley and @AdrianoEscarabote for pointing towards the right direction. Their correction has really made me conscious of standard pratices.

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

    Properly targeting certain elements was challenging at first, but I had to be persistent.

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

    I'm open to more corrections, I really appreciate the fact that little corrections can make a big difference in the way we write code. The goal is to write neater and simpler code.

    RECIPE PAGE TASK

    #react
    1
    orbdev1•130
    @orbdev1

    Need apply fonts and some colors of style-guide.md. After that, all is good

View more comments