Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 4 years ago

Designo multi-page - REACT

Rayane•1,935
@RayaneBengaoui
A solution to the Designo multi-page website challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted over 4 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)! 😁

  • Anna Leigh•5,135
    @brasspetals
    Posted over 4 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.
  • Bonrey•1,130
    @Bonrey
    Posted about 4 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".

  • Jen•1,230
    @En-Jen
    Posted over 4 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.

  • Matt Studdert•13,611
    @mattstuddert
    Posted over 4 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! 🙂

  • Michal•665
    @mbart13
    Posted over 4 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

  • Ameya Deokule•355
    @ameyadeokule
    Posted over 4 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

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub