Submitted about 4 years ago

Animated Base Apparel coming soon page with GSAP

Ynnk• 170

@HYannick

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feedback on the code architecture or css improvement are welcomed !

Community feedback

Sahas saurav• 745

@SahasSaurav

Posted about 4 years ago

nice work but you can improve liltle bit in loading time of page and while change the size browser the dont stay it properly what i mean that spanning the size of browser image center it self

Ynnk• 170

@HYannick

Posted about 4 years ago

@SahasSaurav You're totally right! I used an image with better quality but should definitively resize it. And maybe add a loader :).

I'm not sure to understand the second issue though, the image is always centered when I resize it? If this is it, it's intended

Thanks for your feedback!

Matt Studdert• 13,611

@mattstuddert

Posted about 4 years ago

Great work on this challenge, Yannick! I need to have a play around with the screenshot configuration to try and make it work for GSAP animations. Your code and overall architecture look good. Be sure not to use too many @import statements in pure CSS as they are not great on the performance side of things.

Nice to see you using the picture element for the image as well. Just a quick tip that I'd make the alt text a bit more descriptive than simply saying alt="hero". It needs to convey what's in the image to screen reader users.

Keep up the great work! 👍

Ynnk• 170

@HYannick

Posted about 4 years ago

@mattstuddert Thanks for your feedback!

Indeed for the @import I didn't know that, I will keep that in mind! For the alt I must admit that I have been a bit lazy ahah.

Matt Studdert• 13,611

@mattstuddert

Posted about 4 years ago

@HYannick yeah, alt text is often an area that is neglected but it's so important. Try writing your alt text (and everything else) on these challenges like you would on a production website. It's great practice!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord