Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
7
P

Abuzer Emre Osmanoğlu

@aeosmanogluTurkey190 points

Abuzer E. Osmanoğlu is a freelance developer specializing in user interface/experience and frontend of web and mobile applications. He has experience creating atomic designs and exporting these designs to component-based web applications.

Latest solutions

  • Recipe Page


    P
    Abuzer Emre Osmanoğlu•190
    Submitted 10 months ago

    2 comments
  • Social Links Profile

    #tailwind-css

    P
    Abuzer Emre Osmanoğlu•190
    Submitted 10 months ago

    1 comment
  • Blog Preview Card


    P
    Abuzer Emre Osmanoğlu•190
    Submitted 10 months ago

    2 comments
  • Advice Generator App


    P
    Abuzer Emre Osmanoğlu•190
    Submitted over 2 years ago

    0 comments
  • Huddle landing page with grid


    P
    Abuzer Emre Osmanoğlu•190
    Submitted over 2 years ago

    0 comments
  • Four card feature section with Bootstrap

    #tailwind-css

    P
    Abuzer Emre Osmanoğlu•190
    Submitted over 2 years ago

    1 comment
View more solutions

Latest comments

  • Ehsan Tatasadi•1,800
    @tatasadi
    Submitted over 1 year ago

    Built with Remix and Tailwind

    #react#remix#tailwind-css
    1
    P
    Abuzer Emre Osmanoğlu•190
    @aeosmanoglu
    Posted 10 months ago

    Great job well done

  • Umar Mubeen•80
    @UmarMubeeen
    Submitted 10 months ago
    What challenges did you encounter, and how did you overcome them?

    had tough time fixing the fixed width issue for image and text area.

    Product Card

    #tailwind-css
    1
    P
    Abuzer Emre Osmanoğlu•190
    @aeosmanoglu
    Posted 10 months ago

    You've done a great job with the design! Managing the image transitions for mobile and desktop using two different img tags is a solid approach, but I have a few suggestions to make it even better:

    One more efficient and modern way to handle this is by using the srcset attribute. This allows the browser to automatically select the most appropriate image based on the screen size. With your current solution, you're loading both mobile and desktop images, but only one is visible at any given time. This can negatively impact page performance since you're downloading an extra image unnecessarily. By using srcset, the browser will only load the image it needs, which boosts performance and keeps things running smoothly.

    Also, using a single img tag instead of two helps simplify the HTML and prevents potential accessibility issues. You only need to define one alt text, which improves both SEO and accessibility. It also means less CSS management with visibility classes like md:block and md:hidden.

    In summary, srcset will be a more maintainable and performance-optimized solution in the long run. Your design is already looking great—this will just take it to the next level! 🌟

    <img src="./images/image-product-mobile.jpg"
                 srcset="./images/image-product-mobile.jpg 375w,
                 ./images/image-product-desktop.jpg 768w"
                 sizes="(max-width: 768px) 375px, 768px"
                 alt="Gabrielle Essence Eau De Perfume"
                 class="object-cover w-full max-h-60 md:max-h-none">
    
    Marked as helpful
  • Irfan•160
    @codebyMM
    Submitted 10 months ago

    RECIPE PAGE - HTML & CSS

    1
    P
    Abuzer Emre Osmanoğlu•190
    @aeosmanoglu
    Posted 10 months ago

    Great work

  • P
    Josh Boys•180
    @jboys
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    It resembles the target design, so I guess that's good 🙃

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

    Not having the design files (Figma) made it more challenging when it came to sizing things outs. There was a lot of estimating and fiddling!

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

    Any semantics or accessibility suggestions to improve my solution. Also, any improvements in my use of tailwind classes?

    Social Links Profile

    #tailwind-css
    1
    P
    Abuzer Emre Osmanoğlu•190
    @aeosmanoglu
    Posted 10 months ago

    Hi Josh! You've done a solid job on this solution, and I'd like to provide a feedback on a key area to help you refine it even further.

    Your code is clean, but consider grouping common styles for the buttons (or other repeated elements) into reusable classes or components. This reduces duplication and makes future updates easier. For example, create a .btn class for buttons:

    <a class="btn" href="https://www.github.com/">GitHub</a>
    

    And in your CSS:

    .btn {
      @apply bg-gray-700 hover:bg-green hover:text-gray-700 rounded-md py-2.5 text-xs font-semibold;
    }
    
    Marked as helpful
  • Ahmed Elshamy•70
    @ahmed-elshamy23
    Submitted 11 months ago

    Blog Preview Card

    1
    P
    Abuzer Emre Osmanoğlu•190
    @aeosmanoglu
    Posted 10 months ago

    Great work. Best of luck.

  • Raphael Elias•160
    @raphaeleliass
    Submitted over 1 year ago

    QR Code Component

    #tailwind-css
    1
    P
    Abuzer Emre Osmanoğlu•190
    @aeosmanoglu
    Posted 10 months ago

    Best of luck

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub