Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
8

Fexxix

@Fexxix230 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Calculator app using React, SCSS, TypeScript, Vite


    Fexxix•230
    Submitted over 2 years ago

    1 comment
  • Country details using REST Countries API, TypeScript, SASS and Vite


    Fexxix•230
    Submitted over 2 years ago

    1 comment
  • Interactive Card form using TypeScript and Zod

    #typescript

    Fexxix•230
    Submitted over 2 years ago

    0 comments

Latest comments

  • Manish Mandal•650
    @manishdevelops
    Submitted over 2 years ago

    responsive webpage with Flexbox, MVC architecture, ES6, PARCEL, MODULE

    #accessibility#sass/scss#parcel
    2
    Fexxix•230
    @Fexxix
    Posted over 2 years ago

    It's good and it's nice you didn't get any accessibility errors but I think that I will point out a few things:

    • I, as a user, would prefer if the theme switcher, select, and search icons didn't animate indefinitely.
    • I think you forgot to change the input font color based on theme.
    • The text shadow in the details page is kinda uncomfortable and I personally don't like it.
    • When viewing details in succession (clicking through borders), the back button doesn't move backward by 1 so you might wanna look into that. (This might be the intended behaviour so I am sorry in case it is).
    Marked as helpful
  • diversis•250
    @diversis
    Submitted over 2 years ago

    NextJS, TailwindCSS, Framer Motion

    #motion#next#tailwind-css#typescript#accessibility
    1
    Fexxix•230
    @Fexxix
    Posted over 2 years ago

    I love it! I had no intention to do this one when I saw the some solutions but this one changed my mind. You have inspired me. I love all the hover effects and text animations. It looks very cool. But just like last time, I think the scroll bar could use some less width. Try using a different property(like width instead of min-width) or a different unit.

    Marked as helpful
  • vinu cyril•980
    @vinuman
    Submitted over 2 years ago

    Little JS

    1
    Fexxix•230
    @Fexxix
    Posted over 2 years ago

    You shouldn't need JS for share button this. Use before and after pseudo elements. This use case is like their reason for existing.

    and if you did want to use JS, it should have been like this:

    shareButton.addEventListener("click", showShareOptions)
    shareButton.addEventListener("mouseover", showShareOptions)
    
    function showShareOptions() {
      share.classList.add("show")
    
      shareButton.removeEventListener("click", showShareOptions)
      shareButton.removeEventListener("mouseover", showShareOptions)
      shareButton.addEventListener("click", hideShareOptions)
      shareButton.addEventListener("mouseleave", hideShareOptions)
    }
    
    function hideShareOptions() {
      share.classList.remove("show")
    
      shareButton.addEventListener("click", showShareOptions)
      shareButton.addEventListener("mouseover", showShareOptions)
      shareButton.removeEventListener("click", hideShareOptions)
      shareButton.removeEventListener("mouseleave", hideShareOptions)
    }
    

    Of course, this is not the most optimal approach and can be improved.

  • diversis•250
    @diversis
    Submitted over 2 years ago

    NextJS, TailwindCSS,Prisma,Radix,Typesctipt

    #next#tailwind-css#typescript
    1
    Fexxix•230
    @Fexxix
    Posted over 2 years ago

    Everything seems detailed there's really nothing wrong except two parts:

    • When customizing a scroll bar, always keep in mind that you should never use units for it's width (and height if your setting it) that scale up or down when zoomed in or out, your scroll bar does scale based on zoom and it shouldn't since it makes the UI look ugly so I think you should fix it. Personally, I use viewport units for this.

    Pro tip: You should use hover states for the scroll bar as well to make it visible only when needed. I'm suggesting it because the default ones do that.

    • This one is just me being nitpicky. I like the subtle animation for when the sign in modal appears but what I don't like is that it just erases itself out of existence when you close it, same goes for the hamburger nav menu. Again, this is pretty opinionated so you don't have to fix it if you don't want to.

    I could only list the things I thought you should fix since I wouldn't be able to list all the good parts of your solution. In fact, the things I did mention aren't all that important either. I guess what I am saying is that it just simply looks really cool and amazing and there isn't much wrong with it.

    Marked as helpful
  • Sppam•180
    @SppamLite
    Submitted over 2 years ago

    Password Generator App

    #deno#fresh#preact#typescript#accessibility
    1
    Fexxix•230
    @Fexxix
    Posted over 2 years ago

    I think it's pretty good but its overflowing on my screen so might wanna look into that.

    this is just extra stuff since it's not letting me comment with a comment this short.

    Try adding an Exclude Duplicate and an Include Spaces option. I made a password generator just like this when I started out and the exclude duplicate option was kind of tough for me as a beginner. I would like to see how you implement it in to your code as an experienced front end coder.

    Marked as helpful
  • mohammad salih•220
    @mohammadsalih
    Submitted over 2 years ago

    dark theme landing page

    2
    Fexxix•230
    @Fexxix
    Posted over 2 years ago

    It looks professional and the resposiveness is also good. I won't point out the alt img text problem since @Finney06 already briefed you on that. The only thing I noticed that was off was the input at the bottom of the page. It could use a bigger font and a placeholder text. You can get rid of the default border and outline by:

       border: none; 
       outline: none;
       outline-color: transparent; // this is preferable if you are taking contrast theme users into account
    

    Then you could utilize box shadow or a border to match your theme and give it a pleasing look. Other than that, superb stuff. Happy Coding!

    Marked as helpful
View more comments

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

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

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

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

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

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

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