Skip to content
OverviewSolutions
3
Comments
18
P

Natasha Pierre-Louis

@natashapl280 points

I'm a UI / UX / Front-End Developer with 12+ years of experience developing and maintaining web applications, complex e-commerce sites and internal frameworks. I specializes in responsive web design, prototype creation and implementation of web analytics.

I’m currently learning...

I'm here to practice my front-end craft and improve my JavaScript skills.

Latest solutions

Latest comments

  • P
    Natasha Pierre-Louis•280
    @natashapl

    Hi Filipe. Nice work! I only noticed a couple of things. There are three notifications at the top, but after I mark all of them as read, there's still one at the bottom of the page that is marked as unread. As for accessibility, I suggest you add an h1 to your header and rerun the reports in the "View Reports" page to confirm all accessibility issues are resolved.

    Hope this help. :)

  • P
    Natasha Pierre-Louis•280
    @natashapl

    Hi Glenda. Nice work! I think most issues were already addressed. The only thing I wanted to point out is that the commented message you're using to separate the header from the main tag is causing you page to not be valid HTML. The fix is to remove some of the hyphens since there should only be 2 on each side: Once you're done fixing it, you can regenerate a new report by clicking the "View Report" button above and and then on that page click "Generate Report".

    I hope this is helpful. :)

    Marked as helpful
  • P
    Natasha Pierre-Louis•280
    @natashapl

    Hi Deren! You did a great job for a first responsive solution. The only feedback I have is that there seems to be an excessive amount of margin around the section and attribution. I can tell you were trying to match the design, but it may be best to vertically center the section. Since you're using CSS grid, you can apply the following CSS rule to the main tag:

    .main { display: grid; height: 100vh; align-items: center; }

    As for the attribution, consider decreasing the margin some, unless your intention is to hide it below the viewport.

    I hope this is helpful. :)

    Marked as helpful
  • P
    Natasha Pierre-Louis•280
    @natashapl

    Hi Arturo. Nice work! Just a couple of things I noticed when I checked out your code. For accessibility reasons, headers such as <h1> should increase by one. What this means is that since you used a <h1> in your header, the next header text should be <h2> rather than <h4>.

    Also, in order for your HTML to be valid, you'll need to add headers to all of the bottom sections. I suggest replacing the <span> tag around the names with <h3> tags.

    I hope this helps. :)

  • P
    Natasha Pierre-Louis•280
    @natashapl

    Hi Willie. Congrats on uploading your first solution and welcome to Frontend Mentor! Just a couple of things I noticed. I haven't done this challenge yet, but I was looking at the design images and think on hover the background should be gray with white text. On click of a rating the clicked button should be orange.

    Also, it appears in the `<svg class="svg-1"> you spelled "height" incorrect and that's causing your HTML to be invalid.

    Last but not least, to remove the accessibility issues in your report, consider wrapping both the <div class="before"> and <div class="after"> in the <main> tag. It helps with screen readers.

    I hope this is helpful. :)

  • P
    Natasha Pierre-Louis•280
    @natashapl

    Hi Eduardo! Your game is super cool! Nice work! I only noticed a couple of things:

    1. After I won a few rounds, the score remained "1".
    2. There appears to be the following console error, so perhaps its related...

    VM87:85 TypeError: Cannot read properties of null (reading 'close')

    I hope this is helpful

View more comments