@asia272
Latest solutions
Contact Form
#accessibility#pure-cssSubmitted 3 months agoPlease If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂.
FAQ Accordion with accessibility
#accessibility#pure-cssSubmitted 3 months agoPlease If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂.
Interactive rating component with accessibility
#accessibility#pure-cssSubmitted 4 months agoPlease If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂. As it's my first project of making website accessible.
Tip Calculator using React
#react#pure-cssSubmitted 4 months agoPlease If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂. As it's my first project using react.
Time Tracking Dashboard
Submitted 4 months agoWhy do I need to zoom out when opening this website on a phone, and how can this issue be fixed? Please If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂.
NewsLetter SignUp
Submitted 5 months agoPlease If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂.
Latest comments
- @kunal90803
Great work, @asia272 🎉
I noticed that the design isn’t fully responsive for mobile devices . Consider optimizing it for smaller screens to enhance usability.
Additionally, to improve design practices, you could incorporate accessibility features using ARIA attributes. This will make the interface more inclusive and user-friendly.
Other than that, it’s perfect! 🚀 HAPPY CODING! 😃
Marked as helpful - @cfofanaWhat challenges did you encounter, and how did you overcome them?
Finding time to sit down and complete the project due to life's busyness and fear of submitting a bad solution. I overcame this by deciding that submitting a less than perfect solution on time was better than freezing up and not completing the project due to fear of it not being perfect.
What specific areas of your project would you like help with?Aria labels, semantic html
@kunal90803Great Work @cfofana!
Your website has achieved an impressive accessibility score of around 95%, which is a fantastic accomplishment. You've done an excellent job utilizing semantic HTML elements, and it's clear that you've put a lot of effort into making the site accessible.
However, I have a few suggestions to make it even better:
-
Reduce the use of <div> elements: While
<div>tags are useful, try to minimize their usage by leveraging more semantic HTML elements. For example, consider using<section>or<article>elements for container divs. -
Wrap social links with
<button>elements: Instead of using anchor tags (<a>) for social links, you can wrap them in<button>elements. This approach will enhance the accessibility of those links, especially for users navigating with keyboards or screen readers. -
Add ARIA labels for better context: To further improve accessibility, consider adding ARIA labels where applicable. For instance, when displaying personal information, you can add specific ARIA labels like
aria-label="Person Name", aria-label="Person Address", or aria-label="Person's Interests". This helps screen readers convey a clearer context for users.
Once again, excellent work on the accessibility improvements, Happy Coding 😊!
Marked as helpful -
- @Guilherme-Porto-SilvaWhat specific areas of your project would you like help with?
Did I forget any aria property?
@kunal90803@Guilherme-Porto-Silva Please work on the design part and ensure that the main div is centered across all screen sizes. Additionally, add a hover effect that changes the text color and also functions as a + button when hovered.
For the button properties:
Remove the border
(border: none). Set the background to transparent(background: transparent). I really appreciate the way you focus on accessibility—it looks perfect! Also, the way you implement the keydown event is impressive.Best of luck with your future coding! 🚀
- @asia272What are you most proud of, and what would you do differently next time?
I’m most proud of successfully implementing a fully responsive layout using CSS Grid. Initially, I faced alignment issues, but by using grid-template-areas, I achieved a well-structured and visually appealing design.
Next time, I would focus on better planning before writing code. I would sketch a wireframe or design layout to minimize structural issues. Additionally, I would explore advanced CSS Grid techniques to enhance responsiveness and improve code efficiency.
What challenges did you encounter, and how did you overcome them?- Alignment Issues: Elements were not properly positioned.
- Solution: Used
grid-template-areasto define explicit placement.
- Solution: Used
- Spacing & Gaps: Some elements had inconsistent spacing.
- Solution: Utilized
gapproperty for uniform spacing.
- Solution: Utilized
Any suggestions for best practices would be appreciated!
@kunal90803Great work, @asia272
I really appreciate the way you've structured your code, especially the use of grid-template-areas for layout—it keeps things clean and well-organized.
One thing I noticed is that some boxes have a lot of empty space. You can improve this by slightly increasing the font size of the text, which will make better use of the available space and enhance readability.
Other than that, it’s looking fantastic—just like your coding skills! I mean perfect.. 😌🔥
Happy Coding, Rockstar! 😊
Marked as helpful - Alignment Issues: Elements were not properly positioned.
- @KuvashneeNaidooWhat are you most proud of, and what would you do differently next time?
I am glad that I used React as the useState hook helped to manage the state and rendering of the calculations, allowing for efficient updates to the UI. I will perhaps explore using other React hooks such as useRef to directly access DOM elements.
What challenges did you encounter, and how did you overcome them?One of the most challenging parts of creating this calculator was ensuring that all elements were styled correctly and responsive to different screen sizes. I made the calculator responsive through a combination of Flexbox for centering, a maximum container width, CSS Grid for button layout and a media query to add a breakpoint in order to adjust a column.
@kunal90803Great work, @KuvashneeNaidoo
I really appreciate the structure and clarity of your code, especially the way you include comments to enhance readability. Your approach makes it easy to understand and maintain.
I did notice a small detail—you've set the type attribute in the input tag as "text". It would be better to use "number" instead. Additionally, to remove the default up and down arrows in the input box, you can add the following CSS:
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }Other than that u done a great job and best of luck of future ahead.
HAPPY CODING 😊.
Marked as helpful - @PaiKai-Lee@kunal90803
Great design, @PaiKai-Lee!
Your website has a clean and well-structured code, making it easy to understand. However, I noticed that accessibility could be improved. You might want to check it using accessibility testing tools. Here are a few suggestions to enhance it:
-
Instead of
<div class="container">, consider using<section>for better semantic structure. -
The
<dialog>element should include aria-labelledby="dialog-title"to improve identification for screen readers. -
The rating buttons should have
aria-label="Rate 1 star"(and so on) to provide better support for visually impaired users. -
The star icon should have an appropriate alt text, such as
alt="Star icon", to ensure accessibility for screen readers.
Other than that, your code is well-written and easy to follow. Keep up the great work! Best of luck for the future—happy coding!
Marked as helpful -
