P
@emawid
Latest solutions
Tip Calculator with React, Tailwind-CSS and TS
#react#tailwind-css#vite#typescriptPSubmitted about 13 hours agoI’d like help refining the handling of dynamic styles in Tailwind—especially for things like: • Animations or conditional transitions • Styling inputs with icons and responsive behaviors • Improving class readability when values depend on state
I’m also open to suggestions for better structuring components or optimizing Tailwind configurations for scalability.
Newsletter Sign-Up Form – React, Styled-Components
#react#vite#styled-componentsPSubmitted 3 months ago- Accessibility improvements: Making sure the form is fully accessible via keyboard and screen readers. 2. Animation techniques: Adding shake animations or subtle transitions to improve user feedback. The gradient background did not allow me to transition the way I wanted
Responsive Article Preview Component with BEM & Flexbo
#bem#sass/scssPSubmitted 4 months agoOne area I’d like to improve is handling window.innerWidth inconsistencies near breakpoints.
Responsive Landing Page | HTML, Sass, Flexbox & Media Queries
#sass/scssPSubmitted 4 months agoImages are not exactly as the prototype but I believe the images provided are not the correct ones...
Testimonial Grid Section using CSS Grid
PSubmitted 4 months agoBecause of the named areas, I feel all is a bit hardcoded. Not sure how would this layout look with different data.
For a moment I thought of measuring the length of the testimonial and whoever was longest would got to the double row column. I thought about it but did not implement it.
Latest comments
- P@martinianol
UX its not great Not decimal format in the bill input In the number of people input you are allow to type "." and "," All inputs do not have pointer cursor on hover indicating an action can be performed On clicking reset the latest Select Tip % option is still selected
Responsive its not 100% there, specially tablet mode.
Code-wise it looks pretty clean and organised. Kudos on that
It made me think if I should not have been better off using Vanilla JS rather all the React components I did.
- @yrjebP@martinianol
Mate, your responsive design is far off from what it should be. Pls review it There are no hover effects.
The link to your code is your whole github, not the specific repo. Cannot give a feedback of your code.
Need to work on details. It's far off from desired. Cheers
- @Ss-e-N-aaWhat are you most proud of, and what would you do differently next time?
I created two components , one for the Card and one SuccessCard for the success message after submission .
i used useState to get hold of the email input with help of FormData and another useState for the errors .
then i conditionally rendered whats shown on screen based on a third useState in the App component , by passing two props to the Card and SuccessCard.
What specific areas of your project would you like help with?i am open to suggestions on improvements or if there are other simpler ways to do this challenge .
i could not replicate the same design and i could use some help with that .
P@martinianolHi Sena It would have been nice to pass the entered email to the SuccessCard. Just pass it as a prop.
Need to work on the responsiveness between mobile and desktop
- P@ldgWhat are you most proud of, and what would you do differently next time?
I'm happy I got the javascript to work on this. I also tried something new on this project and used Sass Mixins to create utility classes from the text presets in the figma files. I saw how useful that can be, so I intend to explore mixins more as I progress.
What challenges did you encounter, and how did you overcome them?I struggled with the transition between the different viewport sizes, thinking I needed a javascript solution. After trying separate functions for mobile, tablet and desktop, I realized I could accomplish what I need with media queries instead. That simplified everything.
P@martinianolHey mate. Liked the solution and that you used rem. Agree on your comment about using BEM. The SCSS is too nested.
Minor detail: The Share text in the tooltip should be UPPERCASE.
Good job
Marked as helpful - P@Coder-LizWhat specific areas of your project would you like help with?
I am not really sure if I completed this challenge correctly, specifically in the hero section. I used display: block on the left and right images, and I used the clamp() function on the gap.
P@martinianolHey Liz Check the responsiveness in your code. The tablet and mobile version aren't that accurate.
Regardin the hero images I used display: none for mobile version and then display: block at a break point of 800px.
- P@fringe4lifeWhat are you most proud of, and what would you do differently next time?
I would not reuse the nth-child() selector, while it was good practise, it did not produce clean CSS.
I am quite happy with using Grid template areas in this it made things quite nice and easy
What challenges did you encounter, and how did you overcome them?Didn't encounter any particularly difficult challenges.
Just the usual bugs and misspelled selectors etc.
What specific areas of your project would you like help with?any feedback is welcome
P@martinianolWell done
