@tatasadi
Submitted
@aeosmanoglu
@tatasadi
Submitted
@aeosmanoglu
Posted
Great job well done
@UmarMubeeen
Submitted
What challenges did you encounter, and how did you overcome them?
had tough time fixing the fixed width issue for image and text area.
@aeosmanoglu
Posted
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
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?
@aeosmanoglu
Posted
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
@ahmed-elshamy23
Submitted
@aeosmanoglu
Posted
Great work. Best of luck.
@raphaeleliass
Submitted
@aeosmanoglu
Posted
Best of luck
@Enrico-Barros
Submitted
All feedback is welcome.
@aeosmanoglu
Posted
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);