Design comparison
Solution retrospective
Any feedback on the code architecture or css improvement are welcomed !
Community feedback
- @SahasSauravPosted over 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
0@HYannickPosted over 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!
0 - @mattstuddertPosted over 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 thealt
text a bit more descriptive than simply sayingalt="hero"
. It needs to convey what's in the image to screen reader users.Keep up the great work! 👍
0@HYannickPosted over 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.
0@mattstuddertPosted over 4 years ago@HYannick yeah,
alt
text is often an area that is neglected but it's so important. Try writing youralt
text (and everything else) on these challenges like you would on a production website. It's great practice!0
Please log in to post a comment
Log in with GitHubJoin 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