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

Muhammad Zariyan Asif

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

  • Responsive Clipboard Landing Page

    #react#tailwind-css#framer-motion

    Muhammad Zariyan Asif•150
    Submitted 11 months ago

    0 comments
  • Mortgage Repayment Calculator

    #accessibility#react#tailwind-css

    Muhammad Zariyan Asif•150
    Submitted 11 months ago

    0 comments
  • Response Blogr Landing Page


    Muhammad Zariyan Asif•150
    Submitted about 1 year ago

    0 comments
  • Tailwind CSS , React JS, Javascript

    #react#tailwind-css

    Muhammad Zariyan Asif•150
    Submitted about 1 year ago

    0 comments
  • React Js, Bootstrap, Javascript


    Muhammad Zariyan Asif•150
    Submitted over 1 year ago

    0 comments
  • React Js, Bootstrap, Javascript


    Muhammad Zariyan Asif•150
    Submitted over 1 year ago

    1 comment
View more solutions

Latest comments

  • Stefan Bojkovski•720
    @xStephx
    Submitted 7 months ago

    Solution Newsletter sign-up form with success message

    #tailwind-css
    9
    Muhammad Zariyan Asif•150
    @MuhammadZariyanAsif123
    Posted 7 months ago

    It's good but there are responsiveness issues in the layout.

  • P
    Justin Green•2,940
    @jgreen721
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Some alright reusability of some form components (inputs), albeit with a somewhat lengthy props list but in theory, I think the form can scale a bit. Can always (or usually) be a little tidier.

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

    Just getting more practice/acclimated to using Tailwind. On one hand its pretty awesome to just knock out a bunch of utility classes and immediately get some decent styling, but then knowing when to prune and create a custom class with the @apply in addition to custom CSS-ing...Yea, just getting used to the nuances there.

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

    Nothing specific comes to mind but always welcome feedback or suggestions.

    Responsive Animated Solution using NEXT and Tailwind

    #tailwind-css#next
    1
    Muhammad Zariyan Asif•150
    @MuhammadZariyanAsif123
    Posted 11 months ago

    Impressive.

  • Ralph•190
    @RalphPastel972
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I feel I leveled up with this one! I had to tackle many unplanned challenges. It works well.

    • I solidified my DOM manipulation proficency
    • I practiced JS a lot more than I expected (👍🏾)
    • I used regex validation for the first time
    • It was surprisingly harder than my calculator project
    What challenges did you encounter, and how did you overcome them?
    • My estimating skills are bad: Originally, I estimated I could do it in just 8 hours. Let's just say it took me way longer.
    • As I didn't have a clear vision beforehand, my code started to be spagettified. I still need to refactor it! I know!
    • I wasted a lot of time trying to implement a way to prevent the user to type forbidden character when at the end, a simple regex validation is good enough IMHO.
    What specific areas of your project would you like help with?
    • Any advice on the best way to refactor my JS code
    • How to organise my CSS file better?

    Responsive mortgage repayment calculator

    1
    Muhammad Zariyan Asif•150
    @MuhammadZariyanAsif123
    Posted 11 months ago

    Impressive :-) .

  • Yordan•220
    @Frame993
    Submitted over 1 year ago

    Tip-calculator-app Public

    2
    Muhammad Zariyan Asif•150
    @MuhammadZariyanAsif123
    Posted over 1 year ago

    Hi,

    There is an issue in the "Bill" and "Number of People" fields. In your case, the user can enter the negative values inside the fields which is wrong.

    Marked as helpful
  • mingen898•10
    @mingen898
    Submitted over 1 year ago

    FAQ-accordion (HTML and CSS only)

    2
    Muhammad Zariyan Asif•150
    @MuhammadZariyanAsif123
    Posted over 1 year ago

    Hi,

    You can fixed this issue by setting the body with background-image with this pattern and background-repeat = "no - repeat" something like this.

    In CSS FILE:

    body { background-image: url("your image"); background-repeat: no-repeat; }

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