@juliankruger
Posted
Hi Anosha,
there is not really much to criticize, this looks great! One thing you could add to really get the color of the image right is a pseudo-element. An ::after or ::before css-class that sits right above the image with the same background-color and a low opacity.
Another suggestion for future challenges: The design works perfectly on the two screen sizes set by the challenge, but in between it is not responsive anymore. What might help is mobile-first approach. Design it for mobile screens first and then later add the complexity of the desktop design. The dev tools of your browser help displaying all the screen sizes. I would not rebuild this just for that, though but maybe keep it in mind in the future.
A nice free course for that is Conquering Responsive Layouts by Kevin Powell. It takes 21 days and only presents you a very small challenge each day including some break days.
Hope that helps!
Greetings
Marked as helpful
@anoshaahmed
Posted
@juliankruger I agree about the responsiveness. I just felt a bit lazy haha (especially after it took me a million hours to get the right colour for the overlay.) I've never started designing with mobile layout first, so I will definitely challenge myself to do that next time.
I just finished watching a YouTube video on using ::after for image overlay. That's a game changer! Definitely will be using that in the future for image overlays.
Thank you so much for helping me improve!
@juliankruger
Posted
@anoshaahmed Oh I get that, the image overlay really took me quite a while, too!
I am glad my comment was helpful to you. Pseudo elements really are a game changer and they work on all kinds of stuff, it's a nice topic to explore.
