Frontend Mentor | Amit Dhakal's profile

@JimmyHoang296Submitted over 2 years ago

long time no code.

interactive rating card

@herojk64Posted 11 days ago

You have added tag of react which you didn't use. you might what to wrap the functions to trigger after the DOMContentLoaded even occurs.

0

Gonzalo Tejada•240

@vgt3j4d4Submitted 14 days ago

Tip Calculator App (ReactJS, NextJS, Tailwind)

1

Amit Dhakal•530

@herojk64Posted 11 days ago

I think you have Figma access you should try to match all the typography and container height and width. and even without looking at the website I can see that yellow border or outline in the input which is not in the design.

0

Oswald•490

@OswalldSubmitted 20 days ago

time-tracking-dashboard-main

1

Amit Dhakal•530

@herojk64Posted 17 days ago

well you added the hover effect for the three ... icon but forgot to add hover effect for the card itself.

Marked as helpful

1

Stefan Bojkovski•640

@xStephxSubmitted 17 days ago

Solution Expenses chart component

5

Amit Dhakal•530

@herojk64Posted 17 days ago

Other things I won't be pointing out but the bg color of the card is white and is not the case in the styling .

Marked as helpful

1

Gotyan•340

@Notyan21Submitted about 1 month ago

What are you most proud of, and what would you do differently next time?

feedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedback

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

feedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedback

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

feedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedback

newsletter-signup-form-with-success-message feedback

2

Amit Dhakal•530

@herojk64Posted 20 days ago

Ok brother, your concepts and all the above is logically flawed.

when your using input why are your putting its label into div and then p tag. it was one thing if you wanted the error message to display side by side for that div I could understand but not using label separates user from that default functionality where input gets selected or focused just by clicking that email label.
why are did you add event listener in email input as "input". this will constantly keep checking and take resource from client side. like imagine user mistaken their email or forgot their email and they trying to type it out as it goes. each step he's Gona get stuck and you would be constantly checking if its an valid email or not. one this is going to stress the user out. second not practical if you want that kind of thing you can just say input type email and with required should be enough and you can just check or validate it after the form submitting.
if you haven't noticed if you type in wrong email and like kind of reset the email which will bring it back to normal no error state. your input styling is gone.
too much extra properties like your wrapper for card component has h-full which is not going to help you nor it is being applied.
use practice of using min-h-screen not h-screen cause if your working on larger page container your h-screen is going to give you trouble. look it up why it gives you trouble later.
first section if you were going to use article tag why is header not inside the article.
why are you compiling the tailwind to style.css use postcss or mixer or any compiler to directly compile it and after the compile process or build process minifying into one dist folder and such. this structure is used by many library and framworks.

Marked as helpful

0

tloyan•275

@tloyanSubmitted 28 days ago

"Newsletter sign-up form | Next.js, Typescript, Tailwind Css

1

Amit Dhakal•530

@herojk64Posted 22 days ago

very nice indeed but dont use pixels as a value your website will be messed up if someone has their browser font size to more then 16px or less then 16px it wont work

0

Stefan Bojkovski•640

@xStephxSubmitted 25 days ago

Solution Newsletter sign-up form with success message

8

Amit Dhakal•530

@herojk64Posted 24 days ago

good designing but bad structure for the form. first your tailwind configuration your loading though the CDN which is optional but learn to use node js and how to make your JavaScript more modular. Second you are listening to button click which is basically not ideal because the form is still submittable. what you want to do is include button inside the form and make the button type of submit and when you use JavaScript you listen to that form submit. advantages are you can get the values that are submitted through it without using any extra id for the input cause you only have one right now but in future if you have to work with many forms its a bad example. and instead of using two img with different screen break classes use picture will also default control that but its optional. happy coding.

Marked as helpful

3

V.S Karthik Tirumalasetty•130

@VSKarthikTSubmitted 28 days ago

What are you most proud of, and what would you do differently next time?

This project I am proud of using grid to make elements stay in the respective areas and stretch them to it full width and height in the container

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

I had difficulty with aligning items of the grid in desktop layout, I have read article about grid layout which made it easy for me to align items and gave me much deeper understanding of grid layouts

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

I would like help with reducing CSS code, how can I optimize the code, I am not sure I have use correct semantic HTML, any feedback is appreciated, Thanks

Responsive page with grid(Desktop) & Flexbox(Mobile)

2

Amit Dhakal•530

@herojk64Posted 28 days ago

Ok, if you want to reduce CSS the very first concept is to make as minimal html as possible. if you see your html there are few things I saw. why aren't you dividing your sections with section tag rather than div. you are just using section as main component which is nested in the main. I also don't see any header tag or h1,h2,etc. you see with the content you can separate the headers based on the title looking content. also article tags are best for that if you want to do better SEO. Anyway mixin in SCSS was a great find for me took me seconds to understand but didn't knew it was a thing in SCSS so thanks for that.

Marked as helpful

1

Timothé Bissonnette•420

@Fable54321Submitted about 1 month ago

What are you most proud of, and what would you do differently next time?

I woudl take a different approach for the share section on mobile.

my take on the article-preview challenge

1

Amit Dhakal•530

@herojk64Posted 29 days ago

Getting access to the Figma file you should get margin, padding, line height, etc. exactly matching. so that would be your improvement.

Marked as helpful

1

tloyan•275

@tloyanSubmitted about 1 month ago

What are you most proud of, and what would you do differently next time?

I could further separate the different parts of the code and rethink how to handle the variations between each, while using the same component with dynamic data. Definitely on my refactor list!