Pai-Kai Lee
@PaiKai-LeeAll comments
- P@HcmwebsSubmitted about 1 year ago@PaiKai-LeePosted 2 days ago
Your project looks great so far! However, there are a couple of enhancements you could consider to improve accessibility and interactivity:
-
Adding a tabindex attribute to the SingleQuestion component would enable better keyboard navigation, making it more accessible to users who rely on keyboards.
-
Incorporating keyboard event listeners could enhance interactivity, allowing users to engage with the interface more seamlessly using key commands.
0 -
- P@HelewudSubmitted 17 days ago@PaiKai-LeePosted 9 days ago
looks nice. In my opinion one thing I will do is that add close button on dialog, this function is not in design but I think is good for UX, event it just a practice project.
Marked as helpful1 - P@MomonkueiSubmitted 15 days agoWhat are you most proud of, and what would you do differently next time?
I have used the third-party package VeeValidate to complete the validation and have a better understanding of Vue's data transfer
What challenges did you encounter, and how did you overcome them?Vue's data transfer And how to choose between props emit and provide inject Using props emit will feel more complicated
What specific areas of your project would you like help with?How to choose between props emit and provide inject Can someone please tell me And how to use VeeValidate If the Form wraps another component Does anyone have relevant experience?
@PaiKai-LeePosted 10 days agoYou can change the 'h-screen' of the outermost layout to 'max-h-screen', or adjust the layout for different screen sizes, so that on very small mobile screens like the iPhone SE, the header won't be pushed out of view by the content
0 - @dirkvankriekenSubmitted 13 days agoWhat are you most proud of, and what would you do differently next time?
I'm happy I was able to use TailwindCSS for the first time. It took a lot of figuring out put I pulled it off. I also was able to use asynchronous functions in javascript to use the Fetch API to obtain data from a json file. This helped me to learn more about 'Promises' in Javascript.
@PaiKai-LeePosted 13 days agoIt looks good, but I would make one adjustment. Since the data size is relatively small, you can fetch everything initially and then handle filtering and rendering on click events.
1 - @timothyho512Submitted 19 days ago@PaiKai-LeePosted 18 days ago
The design looks great overall, but there are a couple of areas that could be improved:
- There’s no mobile layout for responsive web design (RWD), which might affect the user experience on smaller screens.
- When clicking the 'Dismiss Message' button, it would be better to redirect users back to the main page for a smoother navigation flow.
0 - P@AnonymousCoder323Submitted 25 days ago@PaiKai-LeePosted 24 days ago
The position of the ShareToast on the mobile version doesn’t match the design spec.
My approach was to separate the mobile ShareToast and the desktop ShareToast into two different components. I’m not sure if this is the best way to handle it, but if designing them within a single component feels tricky, this method could be something to consider.
Marked as helpful1 - @barcacaSubmitted over 1 year ago@PaiKai-LeePosted about 1 month ago
looks great ! I don't have any suggestion... It's better than what I image
0 - @Kanchana-KaushalSubmitted about 1 month agoWhat specific areas of your project would you like help with?
I need to find a efficient way to deal with repeating classes.
@PaiKai-LeePosted about 1 month agoLooks great! Here are two suggestions you might consider:
- The alt attribute in the <img> tag can be more descriptive to serve its intended purpose.
- You could try using CSS Grid to manage the card layout.
0 - @Davilucca22Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Do que você mais se orgulha? aprendi a usar Media Queries.
o que faria diferente na próxima vez? usaria JavaScript para manipular a troca de imagens
@PaiKai-LeePosted 2 months agoYou can use the <picture> tag with <source> and <img> to load images only at the appropriate size, avoiding the need to load two images when only one is required.
Marked as helpful0 - @HoseinRSubmitted 2 months ago@PaiKai-LeePosted 2 months ago
- This is Newbie's final practice. You can try completing the RWD using @media or @container.
- Some parts are not entirely correct. You can refer to the style-guide.md. Although there's no Figma file, the style guide provides the complete color palette.
- The border-radius for the preparation section is not entirely correct.
These are some of my suggestions, but the overall completion level is still impressive!
0 - @goyma-mittalSubmitted 2 months ago@PaiKai-LeePosted 2 months ago
You should reset anchor tag default style or use inherent for removing underline and proper text color
0 - @JanespotSubmitted 2 months ago@PaiKai-LeePosted 2 months ago
Everything is good, just one thing I think can be better is link items.
Only text with cursor pointer, the anchor tag width can be set 100% for whole link item with cursor pointer style.0 - @elClassico-engSubmitted 2 months ago@PaiKai-LeePosted 2 months ago
You can put hover effect in you solution
Marked as helpful0 - @islem213Submitted 2 months ago