Skip to content
OverviewSolutions
13
Comments
14
Pai-Kai Lee
@PaiKai-Lee

All comments

  • Pai-Kai Lee•250
    @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:

    1. Adding a tabindex attribute to the SingleQuestion component would enable better keyboard navigation, making it more accessible to users who rely on keyboards.

    2. Incorporating keyboard event listeners could enhance interactivity, allowing users to engage with the interface more seamlessly using key commands.

    0
  • Pai-Kai Lee•250
    @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 helpful
    1
  • P
    Momonkuei•180
    @MomonkueiSubmitted 15 days ago
    What 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?

    frontendmentor-Tip-calculator-app

    #tailwind-css#vue#vee-validate
    1
    Pai-Kai Lee•250
    @PaiKai-LeePosted 10 days ago

    You 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
  • Dirk•250
    @dirkvankriekenSubmitted 13 days ago
    What 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.

    Time Tracking Dashboard using TailwindCSS and Vite

    #tailwind-css#vite#fetch
    1
    Pai-Kai Lee•250
    @PaiKai-LeePosted 13 days ago

    It 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
  • Pai-Kai Lee•250
    @PaiKai-LeePosted 18 days ago

    The design looks great overall, but there are a couple of areas that could be improved:

    1. There’s no mobile layout for responsive web design (RWD), which might affect the user experience on smaller screens.
    2. When clicking the 'Dismiss Message' button, it would be better to redirect users back to the main page for a smoother navigation flow.
    0
  • Pai-Kai Lee•250
    @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 helpful
    1
  • Pai-Kai Lee•250
    @PaiKai-LeePosted about 1 month ago

    looks great ! I don't have any suggestion... It's better than what I image

    0
  • Pai-Kai Lee•250
    @PaiKai-LeePosted about 1 month ago

    Looks great! Here are two suggestions you might consider:

    1. The alt attribute in the <img> tag can be more descriptive to serve its intended purpose.
    2. You could try using CSS Grid to manage the card layout.
    0
  • davilucas•80
    @Davilucca22Submitted 2 months ago
    What 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

    pagina responsiva

    1
    Pai-Kai Lee•250
    @PaiKai-LeePosted 2 months ago

    You 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 helpful
    0
  • Pai-Kai Lee•250
    @PaiKai-LeePosted 2 months ago
    1. This is Newbie's final practice. You can try completing the RWD using @media or @container.
    2. 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.
    3. 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
  • Pai-Kai Lee•250
    @PaiKai-LeePosted 2 months ago

    You should reset anchor tag default style or use inherent for removing underline and proper text color

    0
  • Pai-Kai Lee•250
    @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
  • Pai-Kai Lee•250
    @PaiKai-LeePosted 2 months ago

    You can put hover effect in you solution

    Marked as helpful
    0
  • Pai-Kai Lee•250
    @PaiKai-LeePosted 2 months ago

    Nice

    0