Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

HTML, CSS, JS, REACT

react, bootstrap
Genaro Martinez•80
@GMartinez0210
A solution to the Digital bank landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hi there. I made this solution for this challenge and although everything works, I would like to get a piece of feedback from you about using portals in React. I mean, when I coded the nav mobile, I would want to use portals and searched for information about that, but I didn't understand it. So if you know how to use it, please help me.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Fluffy Kas•7,655
    @FluffyKas
    Posted about 3 years ago

    Heyo,

    I have only started learning React fairly recently so the existence of portals was new to me. I looked them up now but what I'm about to say take with a grain of salt (me being a newbie and all that).

    I strongly doubt portals are something that you should use for a mobile menu. I get where you're coming from wanting to use it here but it seems off. Why would you not want your nav menu to exist in your DOM at all times? I think it should. You're only keeping it from being displayed but it's there. If it was a modal, that's a different topic. From what I gather, the main use case of portals are modals. I found 2 articles - this and this - that I think are pretty easy to follow, check them out. My suggestion would be to just make things work with good ol` css styling and toggle the menu with state. Once you're done, you can extract it and make it a reusable component pretty much so you don't have to bother coding it again (that's what I did at least).

    Regarding the code, there's a few things to note:

    1. Your markup is really hard to follow. Everything seems to be nested in containers, even when it's not needed (headings, for example are individually wrapped in divs).

    2. Everything should be contained by landmarks. Right now, your nav and header-container isn't. Your nav should be inside a <header> and what is a header-container right now belongs to <main>, but perhaps you could rename it hero section or something like that.

    3. All images seem to be missing alt texts. You need to have these, even if you just leave them empty (which is a correct solution for decorative images).

    4. You may be misunderstanding what article and figure does. In short, not everything that is an image should be wrapped in a <figure>. Most of the time, images can be embedded without any sort of wrapper. Articles should be used for the actual articles in the Lastest Articles section (you're using a figure inside a figure right now). For the Why choose Easybank? section, article and figure seem like a strange choice too. Just use divs, it's fine.

    5. Your social links are missing aria-labels.

    Overall, React seems like an overkill for a project that mainly consist of just css and html. This leads to a lot of strange abstractions in your code and that makes it hard to follow. That might just be my opinion though. Regarding the React code I have some suggestions:

    1. Decide what your'e going to use js or jsx files. It's one or the other.

    2. You could create an assets folder that holds all the images and things like info.js, redes.js.

    3. You seem to have a Redes.js and a Redes.jsx? It's a bit confusing.

    4. There are 3 separate components for your nav: Nav.jsx, NavbarNav,jsx, PortalNav.jsx. A navbar should be one component in your website and that's it. This is what I mean by unnecessary abstractions.

    5. If you ask me, this challenge requires some really unique solutions both markup and css wise so the fact that you abstracted them all away and everything is hidden behind <Article /> and <Section /> is an odd choice.

    Don't misunderstand me, I think what you did style wise seems pretty fine. I found this challenge really tough myself. I think you're just using the wrong tools for it and making your life harder than it should be >.< This challenge needs some planning ahead with the styles and markup which is admittedly a lot harder to do when everything is broken down to components.

  • Reetesh Kumar•550
    @Virous77
    Posted about 3 years ago

    cheers man. good work

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.

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