Skip to content
OverviewSolutions
3
Comments
3

Ardian Fazri

@aredeanIndonesia30 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

Latest comments

  • Stefan Mohenski•30
    @stefanelli990
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how efficiently I was able to do it using Tailwind. Its utility-first approach allowed me to quickly apply styles and maintain consistency without writing a lot of custom CSS.

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

    One of the main challenges I faced during this project was the lack of access to the Figma design file. Without a detailed design reference, achieving pixel-perfect accuracy was more difficult. To overcome this, I relied heavily on the design preview provided and meticulously measured visual elements using browser developer tools. I focused on closely matching typography, spacing, and layout, paying attention to small details like padding, margins, and alignment.

    Social links profile

    #tailwind-css
    1
    Ardian Fazri•30
    @aredean

    Hi, I experienced the same thing when I couldn't access the Figma file. I had to open the design image sample into Figma and re-measure it.

    Initially I also immediately used the tailwind-css class to create components, but indeed tailwindcss will not be completely the same because as far as I know they work with rem sizes, while design uses px design; Similar to what you designed.

    Finally, I made it with a custom class and custom style to get the closest pixel-perfect.

    But, overall we have similar challenges and similar solutions. Keep up the spirit.

  • Vishal•170
    @vishalyv252
    What are you most proud of, and what would you do differently next time?

    I created this website using Angular framework. I styled the layout using Tailwind CSS framework.

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

    I didn't faced any challenges.

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

    Angular framework builds complex projects and Tailwind CSS framework provides more customization for styling the layout.

    Responsive Blog Preview Card

    #angular#tailwind-css
    1
    Ardian Fazri•30
    @aredean

    Hei, kudos to you. I create this challenge with angular and tailwind-css too.

    I think there is a slight difference with what I did, I create the animation when the card is hovered and not just the title, like in Figma design.

    And I see you made 3 types of card sizes, very cool. Maybe in the future I can follow your way using tailwindcss.

  • Ardian Fazri•30
    @aredean

    The preview site and view code are not available anymore. So, some questions cannot be answered.

    • Does the solution include semantic HTML? N/A
    • Is it accessible, and what improvements could be made? N/A
    • Does the layout look good on a range of screen sizes? I think quite good, but it differs from the design.
    • Is the code well-structured, readable, and reusable? N/A
    • Does the solution differ considerably from the design? Yes, quite different from the design. I think you need to check the design specification / Figma file. I think there are some differences between the design and the component such as subtitles/descriptions different font sizes, content, or even different font family.