Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
16
P

Serhii Orlenko

@grifanoPoland415 points

Hey there! 👋 I'm all about web dev 🧑‍💻, drumming 🥁, and hitting the road on my bike 🚴! Designing and developing with Webflow is my jam, serving clients worldwide 🌎. Studying FullStack at GO-IT in Ukraine atm! Drop me a line ✉️ if you wanna chat 😊.

I’m currently learning...

React, TypeScript, NextJS

Latest solutions

  • Password Generator WebApp | React | TypeScript

    #typescript#react

    P
    Serhii Orlenko•415
    Submitted 5 months ago
    • Code Review:
      I believe feedback from more experienced developers is the best way to improve my skills and get closer to the job I’ve been dreaming of for so long. Please let me know if way that I was write a code is good enough for working as a developer, and how much time such a project should take according to the real life job?

    • State Management:
      I used a lot of states in my implementation. While this approach makes the code clear and understandable for me, I wonder if it's the best practice or if there’s a better way to handle it. I’d love to hear suggestions on improving state management in my project.


    1 comment
  • Tip Calculator | NextJS | TailwindCSS | TypeScript | Redux

    #next#redux#tailwind-css#typescript

    P
    Serhii Orlenko•415
    Submitted 5 months ago

    I’d love feedback on how my code looks from a Junior Developer perspective. Is it enough to start applying for Junior positions? If not, what should I improve? I’d also appreciate guidance on optimizing my process with this stack to save time in future projects.


    1 comment
  • Time tracking dashboard build with React

    #react

    P
    Serhii Orlenko•415
    Submitted 5 months ago

    I would really appreciate it if you could review my code and provide feedback on how I can improve it for my next challenge. I want to make my work cleaner and increase my chances of landing a job.

    I’m also wondering where to focus my time next: should I spend more time polishing my React skills, or after improving my understanding of Redux, should I dive deeper into Next.js? I’ve heard that Next.js is a more powerful and efficient way to build websites and web apps, offering great performance and high SEO rankings.


    1 comment
  • Newsletter Sign-Up form with vanila JavaScript validation


    P
    Serhii Orlenko•415
    Submitted 8 months ago

    I think the main help I need is advice on how to simplify the process and whether my code is broken down enough to be suitable for a Junior role.


    1 comment
  • Testimonials cards section using Grid CSS


    P
    Serhii Orlenko•415
    Submitted 9 months ago

    Overall, I want to ensure that my code aligns with what’s expected for a junior position. Does this approach meet those standards?


    0 comments
  • Responsive Product Card component CSS


    P
    Serhii Orlenko•415
    Submitted about 1 year ago

    I’d like help in reviewing my code to see if it’s efficient and good enough to meet hiring standards.


    1 comment
View more solutions

Latest comments

  • Miguel Jardinez Ramos•30
    @miguel-jardinez
    Submitted almost 2 years ago

    NextJs password generator, ContextAPI and hooks

    #next#react#styled-components#typescript
    1
    P
    Serhii Orlenko•415
    @grifano
    Posted 5 months ago

    Hi Miguel 👋

    Congratulations on completing this exciting challenge! It was a great experience for me to review your work.

    To be honest, I felt a little overwhelmed by your code. You’ve used some concepts that are new to me, like ThemeProvider, type unions, and advanced Next.js features. Even though I have some knowledge of Next.js, I found myself a bit lost in certain areas of your implementation.

    That said, I really appreciate the effort and thought you’ve put into this project! I have a couple of suggestions that might help improve your project and your GitHub README: • It would be great to make the strength level update dynamically as the user changes settings. This way, they get immediate feedback on whether their password is strong enough. • I noticed an issue with the color table in your GitHub README. It seems like the image paths for the colors might be incorrect.

    Overall, this is an awesome project, and I can see you’re making great progress with Next.js—I’m a fan of the framework too!

    Keep up the great work, and I look forward to seeing your future solutions! 😊

  • Specro•270
    @Specro
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Read a bit about useMemo and was able to overcome all NaN cases (I think) :)

    What challenges did you encounter, and how did you overcome them?

    At first I thought I could hold the tip percent state in the tip input component but the reset button made me lift it up. Also I kind of hate how the input with an icon in front requires that much HTML but it seems like all other solutions are pretty hacky.

    Tip calculator app using React & Tailwind

    #tailwind-css#vite#react
    1
    P
    Serhii Orlenko•415
    @grifano
    Posted 5 months ago

    Hi Specro,

    Congratulations on completing the Tip Calculator challenge! 🎉 I really like your approach to handling the “value not zero” validation—it’s super clean and efficient. I don’t know why I didn’t think of using a utility function for that myself!

    I also had to dig into useMemo recently, especially when I ran into warnings while using useEffect. After exploring it further, I realized it’s a great best practice to avoid unnecessary re-renders—so it’s awesome to see you using it here.

    Overall, you did a fantastic job! 👏 The only thing I noticed is that the Custom field seems to be missing characters in its placeholder. Fixing that would make it look more polished. I’d also suggest adding a red outline to the field when the error message (“Can’t be a zero”) appears. If you want to take it a step further, you could include a notification or toast for a better user experience.

    Great work! Keep up the amazing effort, and happy coding as you take on new challenges! 🚀

  • Specro•270
    @Specro
    Submitted 5 months ago

    Time tracking dashboard using React & Tailwind

    #tailwind-css#vite#react
    1
    P
    Serhii Orlenko•415
    @grifano
    Posted 5 months ago

    Hi there! 👋 Congratulations on your solution – it’s truly impressive. As I started exploring your code, I couldn’t help but feel like a complete React newbie 😂. Your work is so clean, elegant, and well-organized that I’m absolutely amazed.

    The only thing I’d love to see is some smooth hover transitions to make the user experience even better. Keep up the fantastic work! 🚀

  • Oluwatobi•270
    @LupoNetn
    Submitted 8 months ago

    Newsletter form

    1
    P
    Serhii Orlenko•415
    @grifano
    Posted 8 months ago

    Hi! Congratulations on completing the challenge! 🎉 I hope this isn't your final solution, and that you'll continue working on improving it, especially the styles to match the design.

    Here are a few tips to help you improve your code:

    • HTML: Try to give your classes more meaningful names. Avoid using numbers like "hidden-2" as it makes it harder to understand what the class is doing.

    • CSS: I noticed the styles were missing, but remember that user experience is a key part of web development. Adding styles will really make your project stand out.

    • JavaScript: To make your JS cleaner, you can break it down into smaller functions. Also, using addEventListener for form handling is a good idea, like this:

      addEventListener('submit', function() {})
      

    Feel free to check out my code if you want.

    Overall, great work! You've shown a lot of progress and learned some valuable skills that will help you become an even better web developer. Keep it up!

  • Oru Ovie•880
    @Kingoruovie
    Submitted 8 months ago

    Article preview card component

    1
    P
    Serhii Orlenko•415
    @grifano
    Posted 8 months ago

    Great job! The code is well-organized and easy to read. I just have a couple of suggestions to share:

    Try using const for variables that don’t change, and only use let when you know the value will be reassigned. It's a good practice for cleaner code. For SVG icons, there’s an interesting approach I learned in my full-stack course: using an SVG sprite. You can check out this article for a quick intro: https://medium.com/@sorlenk/introduction-to-svg-sprite-004a99bcd2bd.

    Keep up the great work, and remember—every small improvement you make brings you one step closer to mastering your craft!

  • P
    DalaScript•600
    @DalaScript
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?
    • I am proud that I successfully brought this project to the end. 🎉✅
    What challenges did you encounter, and how did you overcome them?
    • There were some challenges with the images, but nothing too difficult. 🖼️🔍
    What specific areas of your project would you like help with?
    • Any advice would be appreciated. Thanks in advance! 🙏💡

    Responsive Meet landing page using Flexbox, scss and BEM

    #sass/scss#bem
    1
    P
    Serhii Orlenko•415
    @grifano
    Posted 9 months ago

    Hi, great job with the solution! Keep up the good work!

    Here is a few improvements: The solution includes some semantic HTML, such as proper use of <section>, <header>, and <footer>. However, improvements can be made by ensuring each section has meaningful roles, such as using <main> for main content and limiting to one <h1> for SEO and accessibility.

    Accessibility: Color contrast is generally good, but some improvements can be made by ensuring all images have descriptive alt texts. Add ARIA labels to interactive elements, like buttons, for better screen reader accessibility.

    Layout on Different Screen Sizes: The layout is responsive and adjusts well across different screen sizes, from mobile to desktop. However, the text in some sections (like the subtitle under "Smarter meetings") could benefit from better spacing on smaller screens to avoid cramped appearance.

    Code Structure: The code appears clean and well-organized, it can be improved for reusability by using more classes and CSS variables for commonly reused styles.

    Design vs. Solution: The overall solution closely matches the design, though there are minor differences, such as I was mentioned before.

View more comments
Frontend Mentor logo

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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

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