Skip to content
OverviewSolutions
4
Comments
4

ahmed4234

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

  • ahmed4234•40
    @ahmed4234Posted 29 days ago

    great job, your solution is close to the design

    0
  • P
    Andrew A Lee•280
    @drewleeSubmitted 29 days ago
    What are you most proud of, and what would you do differently next time?

    I built this solution fairly quickly and true to the design without having access to the Figma file. I don't think I would do anything different for handling this simple feature.

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

    I was exploring whether it's possible to reduce the profile's top and bottom padding for mobile without resorting to media queries. I got this working using clamp with vh units, but the viewport had to be fairly high to force the padding to its maximum size. Ultimately, I resorted to a combination of media queries and a very subtle transition effect to smooth out the transition between the mobile and desktop layouts.

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

    Making sure I'm following best practices and using modern frontend web development conventions.

    Social Links Profile

    1
    ahmed4234•40
    @ahmed4234Posted 29 days ago

    great work, close to the design

    0
  • ahmed4234•40
    @ahmed4234Posted 29 days ago

    good job keep practising and you will improve

    0
  • Nikhil Sundaraneedi•10
    @Nikhil-coder390Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing a clean and responsive design using Tailwind CSS. Ensuring the QR code component was centered properly and achieving a visually appealing layout with precise spacing and typography was a great learning experience.

    Next time, I would focus on:

    • Enhancing accessibility by adding ARIA labels and improving color contrast.
    • Experimenting with animations to make the UI more engaging.
    • Exploring alternative styling approaches, such as CSS Grid or utility classes, to refine layout flexibility.
    What challenges did you encounter, and how did you overcome them?

    One of the main challenges I faced was centering the QR code component perfectly on the page while ensuring proper spacing between elements. Initially, I struggled with extra space between the image and text, but I resolved it by adjusting margin, padding, and flex properties in Tailwind CSS.

    Another challenge was fine-tuning typography and spacing, especially combining letter-spacing and line-height while keeping the design visually balanced. I overcame this by experimenting with Tailwind’s text and spacing utilities, making small adjustments until I achieved the desired look.

    I also faced minor issues with vertical alignment due to h-screen, which pushed elements down unexpectedly. By restructuring my layout and removing unnecessary height properties, I ensured the card was centered properly.

    A huge thanks to ChatGPT for providing quick guidance and helping me debug layout issues efficiently! 🚀

    Qr Code Component using Tailwind CSS

    #tailwind-css
    1
    ahmed4234•40
    @ahmed4234Posted 29 days ago

    good job keep improving

    0