Skip to content
OverviewSolutions
4
Comments
4

yyuntzpan

@yyuntzpan40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Tailwind css, vite, Vue

    #vite#vue#tailwind-css
    yyuntzpan•40
    Submitted 6 months ago

    Most of the time, my challenges come from unfamiliar syntax, but I can usually find solutions by referring to documentation. However, I encountered an issue during deployment: image paths that worked locally couldn’t be found after deployment. I resolved this by moving the images from /src/asset/image to the /public folder, but I’m not sure why this happened.

    0 comments

  • Responsive Social Link Card using Next, React, TailwindCSS, HTML5...

    #next#tailwind-css#react
    yyuntzpan•40
    Submitted 10 months ago
    1. There are several ways to set fonts, such as using "Next.js built-in font optimization" or using a global CSS file. I’m not sure which method to choose in different situations, and I’m also unclear on how to implement each method.
    2. Should I use a framework when practicing layout design? Using a framework and TailwindCSS ended up taking more time for me...
    3. When using TailwindCSS with global CSS settings, should I aim to use TailwindCSS as much as possible for the style guide, or is it better to use traditional CSS methods in the global stylesheet? Although both methods can achieve the goal, is there a clear advantage to one over the other? Is there a standard process?
    1 comment

  • Preview-Card（rwd）CSS html

    yyuntzpan•40
    Submitted 10 months ago

    As soon as I received the project, I immediately started coding with HTML and CSS without considering the option of using frameworks or libraries. How should I adjust the project structure next time if I want to use the React framework and Tailwind? Note: I have learned React in class, but I haven't used Tailwind before. I have used Bootstrap.

    1 comment

  • CSS flex page

    yyuntzpan•40
    Submitted about 1 year ago

    I would like to know how I can simplify and improve the logic of my code.

    1 comment

Latest comments

  • yyuntzpan•40
    @yyuntzpan

    Corner Radius Suggestion:

    • I recommend paying attention to the distance between the outer and inner corner radii when handling corner radius. Adjusting the size of the corner radius based on this distance can make the element appear more balanced.

    Ordered List (OL) Display Suggestion:

    • For items in an ordered list, I suggest making the numbers bold to improve readability and make the content stand out. You can set class="marker:font-bold" on the <ol> element

    Component Breakdown and Reusability:

    • You did a great job breaking down each component and assembling them again. This not only improves code reusability but also makes maintenance easier. In the future, you might consider breaking down common components like buttons and cards into smaller functional modules to make them reusable across other pages.
  • yyuntzpan•40
    @yyuntzpan

    Well done!

    There are some areas in the design where the font settings could be fine-tuned.

    The font sizes and weights deviate slightly from the design. I suggest reducing the font size of the titles and increasing the font weight to create a stronger visual hierarchy.

    The spacing between sections is inconsistent and appears to be too narrow. Consider using padding, margin, or flexbox with gap to adjust the spacing and align it more closely with the design. This will create a more visually appealing and user-friendly layout.

  • James•120
    @fivetailsdevelopment
    What are you most proud of, and what would you do differently next time?

    I'm happy with this one being a close reproduction of the original, with some additional tweaks such as using a hover transition rather than an immediate colour switch. Next time I'm going to think a bit more in advance on what custom variables and classes I want to set up in advance to make it easier to keep the code consistent.

    What challenges did you encounter, and how did you overcome them?

    I think there's a better solution for putting the right gaps between the elements other than putting margins under each element (without having to use grid or flex for such a simple design), though it did give me my first use case for the all-children selector, which was a good learning.

    What specific areas of your project would you like help with?

    Nothing specific this time.

    Blog Preview Card

    2
    yyuntzpan•40
    @yyuntzpan

    Your layout matches the design very well, that's impressive!

    Next time, you could try the challenge of adapting font sizes for different devices without using @media queries.

  • yyuntzpan•40
    @yyuntzpan

    You did a great job. If I were to give a suggestion, you might want to consider the font size of the title. A font that is too large can result in automatic line breaks. In terms of design, it might not be ideal for this short paragraph to be split into three lines. You could try adjusting it and see how it looks!