P
@Helewud
Latest solutions
News Homepage
#react#tailwind-css#vitePSubmitted 2 months agoI would like to know if there is easier way to do this project than how I have done.
Contact form using tailwind and react
#react#vite#tailwind-cssPSubmitted 2 months agoMy checkbox is not clickable, it can be clicked if we press the consent area. I need help with that one.
React and tailwind for Quiz app
#react#vite#tailwind-cssPSubmitted 3 months agomaking it more responsive and get idea on how to make more components to make it more reliable.
Latest comments
- P@SurajCasey
You've done a great job with the design! The overall layout looks clean and the code is readable and well-structured, which is great to see. I appreciate that the code isn't overly complex—it's straightforward and easy to follow, just like I have done in some of my own work.
However, one thing I noticed is that the tablet design could use a little more attention to match the design guidelines. The responsiveness is there, but the layout could be further refined on tablet-sized screens to ensure everything looks polished. Additionally, I noticed that the percentage for the discount was missing in the implementation. This is a small detail but important for the complete experience.
Overall, your solution is solid, and with a few tweaks for tablet design and including the discount percentage, it will be spot on. Keep up the good work!
- @codi-AndreP@SurajCasey
Accessibility is decent but needs improvements in ARIA attributes, focus management, and color contrast. The layout is responsive and looks good on both mobile and desktop, closely matching the design. The code is well-structured and readable, but reusability can be improved by reintroducing sub-components and moving data to a separate file. The solution closely matches the design, with minor adjustments needed for font sizes, spacing, and the MainContent height.
- @codi-AndreP@SurajCasey
You have done a great job. keep it up bro!
- @Stephanie0905P@SurajCasey
Good use of <main>, <header>, and <div> for structure. The <header> includes different images for mobile and desktop using .img__container-mobile and .img__container-desktop. This is a great responsive design approach. Use <button> instead of <div> for better keyboard navigation and screen reader support. Use buttons instead of divs for FAQ toggling. Improve accessibility by adding aria-expanded and using hidden. Optimize JavaScript to close other open FAQs when clicking a new one. Simplify HTML structure by removing unnecessary wrapper divs.
Marked as helpful - P@jonatan-samuelssonWhat are you most proud of, and what would you do differently next time?
Though it wasn't part of the challenge as such, since the challenge appeared in the accessibilty learning path, I decided to read up a little on accessibility and to implement some of what I found. This led me to pay some attention to both the cloe-button on the thank you section, which got an ARIA-label to let screen readers know what it's for, and the rating radio buttons, for which I ended up slightly adjusting my design solution to accomodate a better focus-state highlight.
What challenges did you encounter, and how did you overcome them?Not that challenging overall, but I am keen to learn more accessibility techniques now, as I feel I am starting to see some of the little tweaks that go very far. Also, on a side note, I realized I need to brush up on my formData management skills in JS.
P@SurajCaseyyou have done nice job.
- P@firatyedibelaP@SurajCasey
You have done a wonderful job with your design and it looks cool. Codes are well structured and redeable. It looks cool on different screen sizes. Keep it up bro!
