Designo multi-page - REACT

Solution retrospective
Hello everyone ! 🙂
I'm so proud to complete my first Guru challenge ! 🎉 6 months ago I could hardly finish a Newbie project but thanks to FME and his amazing community here I am !
It was pretty challenging and once again I find myself not being very DRY friendly, but it's getting better. I plan to finish the form validation later as I want to focus on other stuff.
Also, I found out that the website renders well on Chrome/Edge but is totally broken in Firefox. For example display: grid
isn't working properly, so I'm wondering what is the problem ? I'll try to fix it, but now I get why browser compatibility is a pain haha.
Lastly, do you know a good way to preload images ? On loading some images take time to load and thus worsen the user experience.
Otherwise, any feedback/remark is appreciated !
Have a nice day ☀️
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hi, Enayar! 👋
Congratulations on completing your first GURU challenge on Frontend Mentor! 🎉 Amazing job on this one! 👏 I think everything looks great and responds very nicely! 😀 The smooth transitions and hover states that you added to the various interactive elements across the site are really cool, too (I'm such a fan of those kinds of things, LOL)! 🙌
It's great to hear how much you've grown since joining Frontend Mentor. Like you, I never imagined how much I would learn and be able to do after completing Frontend Mentor's challenges! 😅
Well, keep learning and coding (and happy learning and coding, too)! 😁
- @brasspetals
Hi, Rayane! 👋 Great job on this challenge! I tested it out in Firefox, and it doesn’t appear to have any issues - did you fix it? Could you tell me more about the issues you’re seeing?
To fix the errors in your report:
- add
alt
attributes to your imgs, even if you leave them blank. Example:alt=“”
- Almost all your buttons (apart from the submit button) should be "button-styled“ links rather than actual
button
elements. If it doesn’t have a button functionality, it’s better practice to usea
tags instead. - h1 tags should only ever be used once per page both for better SEO and accessibility. You could use the same class for certain headings so they're stylistically the same, but in the HTML there should only be one h1.
- add
- @Bonrey
Hi, @Rayane! 👋 I'm a little late to the party, but still, I'd love to write a few words. There aren't so many stunning GURU solutions out there, after all. 🙂
First of all, I love the overall look of your website! All these transitions and animations are very entertaining! I especially liked the one with the smartphone moving on scrolling. 😍
Probably just a couple of things that are worth pointing out:
- In the Locations tab, the United Kingdom section appears without paddings on either left or right on my screen (1280pxs wide).
- I think it'd be nice to add a custom favicon to your site that would fit with the overall design. 😁 I personally use Flaticon for icons. It's a noteworthy site with lots of free images of many sizes.
Also, it's great to hear that you've improved so much in just 6 months! Indeed, it's surprising how much you can learn in just half a year if you put in consistent work! I hope you'll enjoy your job as an Angular developer and still find some time to post new solutions on FME once in a while. 😄
Good luck with your work, and happy coding! 🙌
P.S. Hopefully, I correctly inferred that FME stands for "Frontend Mentor".
- @En-Jen
Hey Enayar, just want to return the favor and leave you a comment on your solution 😊 Absolutely amazing work, everything looks and functions beautifully and your use of animations is really impressive!! I loved the animations so much that I've been learning all about Framer Motion since I first peeked at your solution. Really the only suggestion I have for an improvement is to make the Designo logo in the footer into a link that routes to the home page like you've done for the Designo logo in the header.
- @mattstuddert
Amazing work on this challenge, Enayar, and congrats on completing your first guru-level challenge!! 🎊
It's been awesome to see your progression since joining the community. I love all the extras you've added to this project, like the micro-interactions and animations. These challenges are a perfect opportunity to play around with new approaches and techniques.
You've already received some great feedback. The one small thing I'd add is that I'd love to see custom client-side validation on the contact form as opposed to the default HTML5 validation. It's a nice little challenge to do as well!
Keep up the great work! 🙂
- @mbart13
I also think it looks great
maybe it would be easier to navigate if you showed which link is currently active
I believe it can be done with NavLink from react-router https://reactrouter.com/web/api/NavLink
- @ameyadeokule
Good Work!! The website looks amazing, great to see your progress. I really loved the hover effects on project images and the scroll effect on the phone was also a nice touch. The only feedback I may provide is that the standard react favicon could be changed to the custom website icon. For preloading the images and other data you can use any lazy loading npm library but if you need it only for images I would prefer react-preload-image, as I have used it the most for lazy loading and animating images. You can read about it here -> https://www.npmjs.com/package/react-preload-image
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