☕💻 UI/UX --- Web Design---Front-end development 🤖Currently learnig Ai and Backend || Connect with me on Twitter:(https://x.com/Piyushrajput710) and linkdein:(https://www.linkedin.com/in/piyush-patil-7a2a261b9/)
I’m currently learning...Currenttly learning next.js, System Design and Backend.
I’d love feedback on:
Whether the toast notification is screen-reader-friendly enough
Suggestions for improving JavaScript structure and modularity
Any advanced ARIA practices that could further enhance accessibility
Optimization techniques for cleaner CSS or better responsive behavior
Could someone review how I manage the aria-expanded state and whether there’s a better pattern for updating DOM attributes cleanly?
Is my approach to hiding/showing answers (element.hidden = true/false) optimal for accessibility, or is there a more semantic method?
Any tips for improving the keyboard accessibility further (e.g., arrow key support or accessibility roles)?
I'm not confident in how I handled custom tip percentages. How can I improve the UX for the “Custom” input field?
Is there a more robust way to structure the calculation logic using modular or reusable JavaScript?
I want to make sure my solution is accessible and responsive — any tips for improvement?
Any feedback on UI accuracy, input validation, or clean code practices would be appreciated!
Grid structure for desktop layout: Is my CSS Grid implementation the most efficient approach for aligning all six cards and the user info panel? Or is there a more flexible way to structure it?
JavaScript structure: I’d love feedback on how I handled the time updates for each timeframe. Could I improve the code for better readability or reusability?
Accessibility: Are there any improvements I can make to improve accessibility — especially for screen readers or keyboard navigation?
Used js to do what i wanted
What challenges did you encounter, and how did you overcome them?when i click the input ,turning the background to the color i wanted.
What specific areas of your project would you like help with?media query, i cant do query for all sizes.
Your CSS is clean and well-structured, with good use of spacing, modern styling, and responsive design via media queries. The success message (toast) is visually clear and well-placed. Input focus and hover effects enhance usability. For improvements, consider removing duplicate properties (like margin-bottom in .input-field), using CSS variables for consistent colors, and ensuring accessible labels for custom radio buttons. Overall, it’s a strong, responsive form with polished UI and good UX.
I'm proud to have successfully built a page with a 100% accessibility score according to the Lighthouse test. What I would do differently is render the accordion items using a list's map function, instead of writing the HTML four times in the code.
What challenges did you encounter, and how did you overcome them?The biggest challenge was creating the animation to hide the accordion items. For that, I used JavaScript.
What specific areas of your project would you like help with?I'd like to know if I should have used the <ul> component, with <li role='button'>, instead of buttons for the accordion headers. I was unsure which alternative is more correct.
This FAQ accordion implementation shows strong attention to both accessibility and semantic structure. The use of ARIA attributes like aria-expanded, aria-controls, and aria-labelledby is commendable and ensures better accessibility support for screen reader users. Structurally, the project is well-organized, using semantic tags such as <button> for interactivity and <section> for content grouping, which enhances both readability and meaning for assistive technologies.
One standout aspect is the clean use of lazy loading for icons, which helps improve performance by deferring image loading until needed. Additionally, the class naming convention follows the BEM methodology, making it easier to understand and scale the CSS structure.
However, there are a few areas that need attention. First, there is a typo in one of the aria-controls values—"andwer-2" instead of "answer-2". This breaks the association between the question button and the corresponding answer, which could impact accessibility and JavaScript functionality. Additionally, the name attributes on the buttons are unnecessary in this context unless used for form submission or scripting, so they can be safely removed to clean up the HTML.
Another point to consider is the visibility of the expand/collapse icons. Currently, both the plus and minus icons are always present in the DOM, but there's no logic or CSS handling their visibility based on the accordion's state. To address this, conditional CSS rules using the aria-expanded attribute can control which icon is shown at any given time. For example, when aria-expanded="false", the plus icon should be visible and the minus icon hidden—and vice versa.
For even better accessibility, it’s recommended to add role="region" and aria-live="polite" to each answer section, allowing screen readers to announce content updates dynamically. Adding tabindex="-1" to each answer div also allows for better keyboard navigation focus when answers expand.
Overall, the implementation demonstrates solid understanding of accessible web development practices, with a few areas that can be easily polished to take it to a professional level.
I’m most proud of creating an interactive rating component that is both user-friendly and visually appealing. The component responds smoothly to user input, providing immediate feedback when a user hovers or clicks on a star or rating icon. It is also accessible, supporting keyboard navigation and screen readers. Additionally, the component’s state management is efficient and easy to extend, making it reusable in different parts of the application.
What challenges did you encounter, and how did you overcome them?One of the key challenges was implementing the logic to accurately display the selected stars on the screen as the user interacted with the component. It was tricky to keep the UI in sync with the user’s input—making sure that when a star was clicked, the correct number of stars would remain highlighted, and also updating the display immediately on hover without overriding the selected rating.
What specific areas of your project would you like help with?Accessibility improvements: Although I implemented basic keyboard navigation and ARIA attributes, I’m not fully confident that the component meets all accessibility standards. Any advice on how to improve screen reader support or keyboard interactions would be very valuable.
Your HTML structure is clean and well-organized, with good use of semantic tags, proper font loading, and separation of concerns through external CSS and JS files. You've correctly used button elements for interactivity and included a responsive meta tag, which is great. However, for better accessibility, your images should include meaningful or explicitly empty alt attributes (alt="" or aria-hidden="true" if decorative), and rating buttons could benefit from aria-labels (e.g., aria-label="Rate 1") to improve screen reader support. Overall, the code is solid, but adding small accessibility enhancements would make it more inclusive.
improve the responsive design
Your JavaScript logic is well-structured with good separation of concerns, clear validation, and proper handling of both preset and custom tip percentages. You've used helpful functions like principal(), resetScreen(), and various validators to keep the code organized and readable. However, you could improve it by replacing the repetitive if-else percentage logic with a cleaner map-based approach, using parseFloat instead of parseInt to support decimal custom tips, and avoiding recalculations when inputs are invalid. Additionally, using textContent = "$0.00" in resetScreen() is good, but you might consider also resetting the custom input field and clearing the background highlight to fully reset the UI. Overall, the logic works well and just needs a few refinements for better scalability and clarity.
Estoy orgulloso de haber completado este reto usando data.json y recuperando los datos en el HTML
What challenges did you encounter, and how did you overcome them?un reto que me costo es la conexión con el data.json y como mostrar los datos en la web
Hey! 👋 I just checked out your solution — great job getting everything working and responsive!
What I liked:
Your layout matches the desktop design really well.
I like the clean use of JavaScript to switch between daily, weekly, and monthly data.
Good hover effects and color usage!
Suggestions for improvement:
You might want to use rem or em units instead of px in some places to improve accessibility.
Also, placing @import rules at the top of the CSS file will help fix some style linting issues.
Consider handling prefers-reduced-motion for smoother accessibility on motion-sensitive devices.
Keep it up! 🔥 Looking forward to seeing more from you.
not using ai to do it. nothing. i will still do the same thing. Probably will ask advice on where i can improve instead.
What challenges did you encounter, and how did you overcome them?not sure how to input the error message in the input div. its simply just add another div lmao.
What specific areas of your project would you like help with?not sure but probably how to best optimize the design i guess. its not an exact 1-to-1 match but i did design it without any ai tho
Your implementation of the newsletter sign-up form is well-structured and follows solid front-end practices. The use of semantic HTML, accessible labels, responsive CSS with media queries, and JavaScript for form validation and UI transitions is effective. The visual state toggling via class manipulation (.hide, .show) is simple yet reliable. Additionally, separating the main card and success card into their own containers helps maintain clarity. A small improvement would be to enhance accessibility further by adding ARIA roles or alerts for dynamic changes, and refactoring repeated styles like buttons into reusable utility classes for scalability. Overall, it's a clean, functional solution that aligns well with the Frontend Mentor design.
