Submitted about 3 years ago

Designo multi-page - REACT

Rayane• 1,935

@RayaneBengaoui

Preview site View code

This is a solution for...

Designo multi-page website

HTML
CSS
JS

5guru

View challenge

Design comparison

SolutionDesign

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 ☀️

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

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)! 😁

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello @ApplePieGiraffe thank you for commenting ! 🙂

I guess (like many others) I've been nicely influenced by you to add those little extra animations to make the project better. 😁

PS : Me too, I'm becoming a fan of micro interactions haha

Have a nice day 🌞

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@RayaneBengaoui

BTW, I just took a look at your personal site (linked on your profile page) and I think it's pretty cool! 😀 The animations and page transitions really make it fun! 😊

And I believe we might have taken the same JS course from Dev Ed because I noticed you included the "Photon" as one of your portfolio projects (and I did that same course and project, too)! 😆 I quite liked that course (and Dev Ed's stuff in general).

Anyway, have a nice day, too! 🌞

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

@ApplePieGiraffe

Haha you're totally right ! It's Ed that got me into web dev ! Before that, I hated web dev because of the courses I had during university that were not... my cup of tea 😁 So I was doing data engineering and machine learning stuff at the end of my uni.

But when I first discovered his HTML/CSS course last year, I was "Waouuw" literally haha. Right now I'm going to land on my first job as an Angular dev, while 1 year ago I couldn't write a line of HTML, it's crazy 😃

I did my portfolio right after completing his React course to apply all the theory, so I'm glad you find it cool ! Me too after finishing it, I thought it was very cool, but now a few months later I'm like... Hmm I could improve so many things and the render is not very professional and clean 😅. Also, the user experience is quite complicated, I'll probably restart from the ground later but with Next.js because I want a little blog part with markdown files !

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@RayaneBengaoui

Wow—that sounds great! 😀 Congratulations on landing a job, too! 🎉 Yeah, I agree that Dev Ed is a very fun teacher, and I like web development because you get to see what you're building out before your own eyes! 😎 And Next.js is a lot fun and makes working with React even easier. Best wishes as you continue your web dev journey! 👍

Anna Leigh• 5,135

@brasspetals

Posted about 3 years ago

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 use a 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.

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello @brasspetals ! Thank you for taking the time to leave me a nice feedback ! 🙂

Ho that's strange, on my Firefox the logo is stretched and so margins/grids are not rendering properly. Maybe it's because I don't use Firefox often and thus my version is outdated ? 🤔

You're right for the alt attribute, I totally forgot them on this challenge, will fix that ! I take note for the <a> and the <h1> ✔️

Anna Leigh• 5,135

@brasspetals

Posted about 3 years ago

@RayaneBengaoui My version is up to date, and I believe the program used to take the screenshots for the design comparison uses Firefox as well. The logo looks good in the design comparison, so you could be right on needing to update Firefox.

However, this made me curious, so I tested it in other browsers. Safari is where I’m seeing the logo stretching issue. I’m pretty sure it has to do with Flexbox and content being set to stretch by default. This discussion in stackoverflow might be useful. Let me know!

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

@brasspetals You're right, on some flex containers I omitted justify- content or align-items so by adding them it fixes the issue. However for the display: grid not being recognized as a valid property I'm a bit confused haha.

I'll check your stack overflow discussion. Again, thank you for your valuable comments ! 🙂

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

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".

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hi @Bonrey 👋

Thanks for your feedback ! Nice catch, I didn't see this behavior on the location page, I'll fix it. I plan also to add a favicon, I will definitely check your link 🙂

I will have less time during the following weeks, but I'll make sure to take some time to keep completing challenges and make feedbacks. Hope to see soon your first guru challenge, your rock/paper/scissors app really impressed me last time 🤩

Have a nice day 🌞

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

You're very welcome, @Rayane!

Haha, I don't think I'll tackle a guru challenge any time soon: firstly, they're premium, and secondly, they're probably way too hard for me at this point. 😅 Anyway, thank you for the kind words! They motivate me a lot to keep on coding. 😄

Jen• 1,230

@En-Jen

Posted about 3 years ago

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.

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello @En-Jen, thank you for your feedback ! I'm so happy to hear that you liked my solution and got interested in Framer Motion. 😊

Ho and good point ! I totally forgot to make the logo a link on the footer, I'll fix that !

Hope to see you soon on another project with awesome animations ! 😁

Have a nice day 🌞

Matt Studdert• 13,611

@mattstuddert

Posted about 3 years ago

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! 🙂

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello @mattstuddert thank you for your comment ! 🙂

Yes, it's awesome to have the opportunity to progress with these challenges ! I find it awesome to mix it with courses to directly apply all the theory learned in class. Also, I was so surprised at how trying to give feedbacks and read other people's code helped me to understand better a lot of concepts !

I'll make sure to implement the client-side validation for the form in the future 👍

Thanks for making this awesome platform and have a nice day 🌞

Michal• 665

@mbart13

Posted about 3 years ago

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

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello @mbart13 ! Thank you for your great advice 🙂

You are totally right and I didn't know about NavLink. I will definitely read that and give it a try !

Ameya Deokule• 355

@ameyadeokule

Posted about 3 years ago

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

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello @ameyadeokule ! Thank you for your precious feedback 🙂

I will definitely check react-preload-image. Also, If I am right, React has a native functionality called React Suspense for lazy loading no ?

Good point on the fav icon ! I'll change it 😉

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