P
@fawaziwalewa
Latest solutions
Base Apparel Coming Soon Page
Submitted 2 months agoI don't think I managed to recreate the desktop page with exact fidelity. I kindly request for suggestions on the improvement of my code i.e. positioning of elements, particularly the error icon and the desktop site in general.
Bento Grid
Submitted 3 months agoI would appreciate feedback on my solution, in particular areas of improvement
Huddle landing page with single introductory section
Submitted 3 months agoMy main objective going into the challenge was to make it as similar to the design as possible and in a bid to do so, I may have gone overboard i.e. wrote code that is not necessarily the most efficient solution. If so, please lmk.
Latest comments
- @broken555wheel
Amazing job
- @Gwynbleidd222@broken555wheel
Great Job
- P@olaide-hok@broken555wheel
Great job.
I applaud the fidelity
- @carlosdamotaWhat are you most proud of, and what would you do differently next time?
I am most proud of implementing secure DOM manipulation by avoiding innerHTML and instead using document.createElement and append. This approach enhances security and prevents potential XSS vulnerabilities. Additionally, I focused on accessibility improvements, such as using role="alert" and aria-live="assertive" to enhance the user experience for screen readers.
Next time, I would refine focus management even further to ensure a seamless navigation experience, especially for keyboard users. I would also explore implementing a lightweight state management solution to handle form validation and UI updates more efficiently.
What challenges did you encounter, and how did you overcome them?One major challenge was ensuring that the form validation messages were properly announced by screen readers. Initially, they were not being detected, which led me to research ARIA attributes more thoroughly. By adding aria-live="assertive" and structuring the validation messages correctly, I was able to resolve the issue.
Another challenge was managing the dynamic success message while maintaining a smooth user experience. To solve this, I ensured that focus was shifted to the dismiss button when the success message appeared, allowing users to close it easily using the keyboard.
What specific areas of your project would you like help with?I would appreciate feedback on:
Accessibility Enhancements – Are there additional improvements I could make to further enhance the accessibility of the form?
CSS Nesting and Maintainability – I used native CSS nesting to improve readability. Is this approach effective, or would there be a better way to structure my styles?
Performance Optimization – Given that this is a simple form, are there any optimizations I could make to enhance performance, especially regarding JavaScript execution?
Any insights or suggestions on these areas would be greatly appreciated!
@broken555wheelAmazing job.
- P@PetterTSaatvedtWhat are you most proud of, and what would you do differently next time?
Overall I feel very comfortable with the implementation of responsive design and styling in general, and it was great practice to combine this with some basic javascript. Next time, I will do some more research beforehand, to avoid having to change my approach mid-project as I did this time, due to finding the toggle class option in javascript.
What challenges did you encounter, and how did you overcome them?The main challenge for this project was definitely finding a solution for how to handle the changes in design and layout when clicking the share button. Not only should it adapt in terms of screen size and state, but also for resizing of the window, as this could result in a bugged layout. I ended up using the toggle method for the classList property, which allowed me to toggle classes on and off according to specific scenarios.
What specific areas of your project would you like help with?All feedback is welcome, as I'm always looking to learn. Perhaps there is a more efficient way to handle the toggling?
@broken555wheelAmazing solution, Petter.
I'm also hoping to see/learn a more efficient way to handle the toggling. I see you used classList while I directly manipulated CSS. Is it more advantageous to use your approach?
- @Asem-Mamdoh@broken555wheel
Center the content by centering the container where you set display to grid.
