P
@Ashmit-kansal
Latest solutions
Tip Calculator App: ReactJS + TailwindCSS
#react#tailwind-cssPSubmitted 6 days agoI guess the overflow of long lines of numbers, it is a bit unrealistic however I'm not sure what would look good if ever someone put in 24+ digits
Time Tracking Dashboard: ReactJS + TailwindCSS
#react#tailwind-cssPSubmitted 9 days agoHow do I fix border anti-aliasing?
Newsletter Sign Up: ReactJS + TailwindCSS
#react#tailwind-cssPSubmitted 10 days agoWhen I put the useState (setIsSubscribed) function inside the <Button> component inside the Form, it says the form is disconnected. I am unsure why it is like this.
Article Preview: ReactJS + TailwindCSS
#react#tailwind-cssPSubmitted 12 days agoI have 3 areas I which I think need improvement or clarification:
- Rounding of the corners of the article along with the image. If I put an overflow-hidden on the parent element, when the share button is clicked on tablet/desktop, the pop-up will also be hidden. My workaround is to reapply the border radius for the children that need it.
- Creating the tail of the callout bubble.
<div className="w-0 h-0 border-x-10 border-x-transparent border-t-10 border-t-grey900 mx-auto"></div>In my search, this is the cleanest tailwind way I found. However, I don't fully understand it. Can anyone enlighten me? - Having two instances of the Share component. I found it almost impossible to make the share feature be part of the document flow on mobile while also putting it inside the flex item for the share button to capture its center when in tablet/desktop.
Meet Landing Page: React + TailwindCSS
#react#tailwind-cssPSubmitted 16 days agoI have noticed in most of my projects that I tend to put everything in a div immediately and give it the tailwind property of
min-h-screento take on the full height of the viewport. Is that recommended or is there a better standard of doing it?Testimonials Grid: I used ReactJS + TailwindCSS
#react#tailwind-css#vitePSubmitted 17 days agothis line specifically:
sm:*:not-[*:nth-child(2),*:nth-child(3)]:col-span-2this worked on selecting the grid items except 2nd and 3rd child but due to it being arbitrary variants, can it be structured in a more tailwindesque way?
Latest comments
- P@aflamiano-career
I'm also not sure how the custom part of Select Tip % should function but good effort!
- P@PetarR21What are you most proud of, and what would you do differently next time?
I am most proud of finding a way to switch different views, depending on selected timeframe.
What challenges did you encounter, and how did you overcome them?Biggest challenge was making cards, like in the design (with overlapping top and bottom part).
What specific areas of your project would you like help with?I would like to improve the code, so it is more robust and clean.
P@aflamiano-careerGreat job! You can also lessen code repetition by using the timeframe variable as index when parsing the array of objects. And I also improved my solution by following your code for removing the leaking border bottom radius anti-aliasing!
- P@monika-webdeveloperP@aflamiano-career
Good effort. Code looks clean and organized! You might also want to pass the email value as a prop to your success page so that it will update the message with the provided email.
- P@Ashmit-kansalWhat are you most proud of, and what would you do differently next time?
I will learn positioning and then improve my css next time.
P@aflamiano-careerGreat effort! The pop-up being clamped to the right side of its relative parent is a workable solution but is not really centered to the button itself. Just a small improvement but you can learn a lot from it!
- P@Snah19What are you most proud of, and what would you do differently next time?
-
I don't blindly follow the design, as you can see in the design at the desktop break point it appears that the images are trimmed, well is it necessary to do it? for me I choose to display them just the way they are.
-
I try to make the text look as close as possible to the design, and you know what the unfortunate is? well the result in the "Solution Judging System" looks very different from the design in Figma file, that was ridiculous and frustrating, Hey Frontend Mentor, I blame you for this.
-
No more.
The provided image has different sizes and aspect ratios from the design. How did I overcome them? well I ignore them completely since it is very out of control, what can I do?
What specific areas of your project would you like help with?import logo from './assets/logo.svg';
<img className='block mx-auto' src={logo} alt="Logo" />Look at this code, can we load the image without the need of importing it in React?, you know I tried this: <img className='block mx-auto' src="./assets/logo.svg" alt="Logo" /> but the image didn't load.
P@aflamiano-careerGreat work! I also personally try to follow the figma design to pixel perfection but I found that most often it will still depend on you and how you want to interpret it. I tend to round things out especially when using tailwind, I find myself using the available set values and not bother with adding custom :) As for the react side of things, I would suggest to make use of separating the code into components. Not really necessary but I find it good practice. Lastly, as for the look, one thing you can consider is adding padding to the Hero section text on smaller devices. Other than that great job and keep at it!
-
- P@Ashmit-kansalP@aflamiano-career
This is an awesome rendition! The idea is great for the <Testimonial /> component, you can try looping it with array data like how you organized the user testimonials data. This would lessen repetition but overall great work!
