Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Designo multi-page - REACT

Rayane• 1,935

@RayaneBengaoui

Preview siteView code
Desktop design screenshot for the Designo multi-page website coding challenge

This is a solution for...

Designo multi-page website
  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (1)
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZQAAAA2CAMAAADXuJ/DAAABd1BMVEVHcEzogGrngGnogWvlfmrngGvnf2v////////////ngGr////fv7/ogGrngGvkf2jngGvogGzngWzpfmfpfmz////ngGrofGbogWv////ogGvtfmfpgmnpgGrpf2vnf2n////pgWvngGvmf2rqf27ogGfmhWf///////...

Rayane’s questions for the community

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

P
ApplePieGiraffe• 30,105

@ApplePieGiraffe

Posted

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

2

Rayane• 1,935

@RayaneBengaoui

Posted

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 🌞

1

P
ApplePieGiraffe• 30,105

@ApplePieGiraffe

Posted

@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! 🌞

1

Rayane• 1,935

@RayaneBengaoui

Posted

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

1

P
ApplePieGiraffe• 30,105

@ApplePieGiraffe

Posted

@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! 👍

1

P
Anna Leigh• 5,135

@brasspetals

Posted

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.

2

Rayane• 1,935

@RayaneBengaoui

Posted

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

1

P
Anna Leigh• 5,135

@brasspetals

Posted

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

1

Rayane• 1,935

@RayaneBengaoui

Posted

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

1

Bonrey• 1,130

@Bonrey

Posted

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

1

Rayane• 1,935

@RayaneBengaoui

Posted

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 🌞

1

Bonrey• 1,130

@Bonrey

Posted

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

0

P
Jen• 1,230

@En-Jen

Posted

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.

1

Rayane• 1,935

@RayaneBengaoui

Posted

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 🌞

0

P
Matt Studdert• 13,591

@mattstuddert

Posted

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

1

Rayane• 1,935

@RayaneBengaoui

Posted

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 🌞

0

Michal• 685

@mbart13

Posted

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

1

Rayane• 1,935

@RayaneBengaoui

Posted

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 !

0

Ameya Deokule• 355

@ameyadeokule

Posted

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

1

Rayane• 1,935

@RayaneBengaoui

Posted

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 😉

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!