Skip to content
OverviewSolutions
14
Comments
7
P
Abuzer Emre Osmanoğlu
@aeosmanoglu

All comments

  • Abuzer Emre Osmanoğlu•190
    @aeosmanogluPosted about 2 months ago

    Great job well done

    0
  • Umar Mubeen•80
    @UmarMubeeenSubmitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    had tough time fixing the fixed width issue for image and text area.

    Product Card

    1
    Abuzer Emre Osmanoğlu•190
    @aeosmanogluPosted 2 months ago

    You've done a great job with the design! Managing the image transitions for mobile and desktop using two different img tags is a solid approach, but I have a few suggestions to make it even better:

    One more efficient and modern way to handle this is by using the srcset attribute. This allows the browser to automatically select the most appropriate image based on the screen size. With your current solution, you're loading both mobile and desktop images, but only one is visible at any given time. This can negatively impact page performance since you're downloading an extra image unnecessarily. By using srcset, the browser will only load the image it needs, which boosts performance and keeps things running smoothly.

    Also, using a single img tag instead of two helps simplify the HTML and prevents potential accessibility issues. You only need to define one alt text, which improves both SEO and accessibility. It also means less CSS management with visibility classes like md:block and md:hidden.

    In summary, srcset will be a more maintainable and performance-optimized solution in the long run. Your design is already looking great—this will just take it to the next level! 🌟

    <img src="./images/image-product-mobile.jpg"
             srcset="./images/image-product-mobile.jpg 375w,
             ./images/image-product-desktop.jpg 768w"
             sizes="(max-width: 768px) 375px, 768px"
             alt="Gabrielle Essence Eau De Perfume"
             class="object-cover w-full max-h-60 md:max-h-none">
    Marked as helpful
    0
  • Abuzer Emre Osmanoğlu•190
    @aeosmanogluPosted 2 months ago

    Great work

    0
  • Josh Boys•180
    @jboysSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    It resembles the target design, so I guess that's good 🙃

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

    Not having the design files (Figma) made it more challenging when it came to sizing things outs. There was a lot of estimating and fiddling!

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

    Any semantics or accessibility suggestions to improve my solution. Also, any improvements in my use of tailwind classes?

    Social Links Profile

    1
    Abuzer Emre Osmanoğlu•190
    @aeosmanogluPosted 2 months ago

    Hi Josh! You've done a solid job on this solution, and I'd like to provide a feedback on a key area to help you refine it even further.

    Your code is clean, but consider grouping common styles for the buttons (or other repeated elements) into reusable classes or components. This reduces duplication and makes future updates easier. For example, create a .btn class for buttons:

    <a class="btn" href="https://www.github.com/">GitHub</a>

    And in your CSS:

    .btn {
  @apply bg-gray-700 hover:bg-green hover:text-gray-700 rounded-md py-2.5 text-xs font-semibold;
}
    Marked as helpful
    0
  • Abuzer Emre Osmanoğlu•190
    @aeosmanogluPosted 2 months ago

    Great work. Best of luck.

    0
  • Abuzer Emre Osmanoğlu•190
    @aeosmanogluPosted 2 months ago

    Best of luck

    0
  • Abuzer Emre Osmanoğlu•190
    @aeosmanogluPosted about 2 years ago

    Hello my friend.

    On line 17 in the style.css file add alpha value to your box-shadow color.

    box-shadow: 6px 6px 34px 6px rgba(64, 89, 104, 0.5);

    0