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

abdulrrahmann

@abdulrrahmann270 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

  • News Homepage


    abdulrrahmann•270
    Submitted 4 months ago

    Feel Free To Write Anything That May Help Me Improve My Skills.


    1 comment
  • Contact Form


    abdulrrahmann•270
    Submitted 4 months ago

    1 comment
  • Responsive FAQ Accordion


    abdulrrahmann•270
    Submitted 5 months ago

    1 comment
  • Interactive rating component


    abdulrrahmann•270
    Submitted 5 months ago

    1 comment
  • tip calculator app


    abdulrrahmann•270
    Submitted 5 months ago

    1 comment
  • time tracking dashboard


    abdulrrahmann•270
    Submitted 5 months ago

    2 comments
View more solutions

Latest comments

  • P
    Marcello•480
    @marcello88c
    Submitted 4 months ago

    News Homepage Project

    2
    abdulrrahmann•270
    @abdulrrahmann
    Posted 4 months ago

    Great Work. Consider adding transition for smooth effect. try using the same colors in the design so they visually appear the same.

  • Vladimir Gatara•440
    @vgarmy
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of the overall design and the use of the Tailwind css.

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

    The Query Type boxes turned out to be more challenging than I expected. I initially believed that Tailwind CSS would provide an easy solution for styling them, but it didn’t deliver the functionality I needed. As a result, I changed my approach and opted to use React's useState hook instead. This allowed me to manage the state of the boxes effectively and create the interactive behavior I was aiming for.

    What specific areas of your project would you like help with?

    No help needed.

    Contact form

    1
    abdulrrahmann•270
    @abdulrrahmann
    Posted 4 months ago

    Good job. your overall solution is really nice. You can add transitions to make it more nicer. also, you can remove resize resize: none; in the textarea and add a specific height.

    Marked as helpful
  • a5420bc•240
    @a5420bc
    Submitted 5 months ago

    transition flex absolute

    1
    abdulrrahmann•270
    @abdulrrahmann
    Posted 5 months ago

    Great Job. Make sure to add descriptive class names that make your code easy to read.

  • Oludare Suulola•170
    @osuulola
    Submitted 5 months ago

    interactive-rating

    1
    abdulrrahmann•270
    @abdulrrahmann
    Posted 5 months ago

    You should add some padding and make the button centered you can use margin-left: auto; margin-right: auto;. also, you should take care when the user does not click on any of numbers. great job.

    Marked as helpful
  • Bunchydo•570
    @Bunchydo
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of:

    Successfully handling decimal input in number fields by removing spin buttons using step="any". Aligning images within containers using position: relative and position: absolute, and centering them with transform: translateY(-50%). Organizing global styles (fonts, colors) first to set up the foundation before focusing on layout. Effectively managing hover states with CSS selectors like :not(:last-child) to simplify the styling process without adding extra divs. What I’d Do Differently:

    Instead of relying on JavaScript for some layout adjustments, I’d explore more CSS-based solutions like flexbox or grid to handle responsiveness and dynamic content changes. I would work on optimizing media queries to ensure they target all screen sizes efficiently. Focus on testing the app on multiple screen sizes and devices to refine the layout before finalizing styles.

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

    Challenges:

    Getting input fields to accept decimal values without the spin buttons was tricky. The step="any" attribute was a new concept, but after some testing, I found it works well for number inputs. Handling vertical centering using top: 50% and transform: translateY(-50%) was initially confusing. I had to learn the relationship between the element’s height and container height to make it work properly. Some CSS properties like height: 100% didn’t behave as expected due to nested percentage-based heights, so I had to adjust my approach and sometimes use height: auto for better results. Solutions:

    Used step="any" on number inputs to allow decimal values. Used position: relative on parent containers and position: absolute for child elements to fine-tune image alignment. Experimented with height: auto in some cases where 100% was causing layout issues.

    What specific areas of your project would you like help with?

    CSS Grid and Flexbox: I would appreciate advice on how to improve the responsiveness of my layout using CSS Grid and Flexbox. I’m currently using a lot of height: 100% and flex properties, but I would like to make the design more adaptive to various screen sizes.

    JavaScript Calculations: I’m handling some dynamic calculations in JavaScript (e.g., calculating tip amounts). I’d love feedback on how to optimize these calculations or make the interaction smoother (e.g., avoiding issues when values are updated rapidly).

    Media Queries: I need some suggestions for structuring my media queries to ensure the app works well across different devices and screen sizes. Any advice on best practices for mobile-first design and handling breakpoints would be helpful.

    Tip calculator app

    1
    abdulrrahmann•270
    @abdulrrahmann
    Posted 5 months ago

    great job! your solution is amazing. you can take a look at mdn web docs https://developer.mozilla.org/en-US/docs/Web/CSS/grid the grid and flexbox are explained in depth.

  • Abo_Tolba•170
    @AhmedElbassuony
    Submitted 5 months ago

    Time tracking dashboard

    2
    abdulrrahmann•270
    @abdulrrahmann
    Posted 5 months ago

    good job

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

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