Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
3

imangali aidarkhan

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

  • Adaptive Layout task 3

    #animation#bem

    imangali aidarkhan•30
    Submitted about 2 months ago

    BEM, the order of the code is probably


    1 comment
  • Adaptive layout

    #animation#bem

    imangali aidarkhan•30
    Submitted about 2 months ago

    I don`t know


    1 comment
  • Adaptive task layout

    #animation#bem

    imangali aidarkhan•30
    Submitted 2 months ago

    Metodology BEM


    1 comment

Latest comments

  • luis Colina•270
    @Silkiercomet
    Submitted over 1 year ago

    Social links card component using vanilla techs HTML | CSS

    #animation#bem#fresh
    1
    imangali aidarkhan•30
    @Imangali18
    Posted about 2 months ago

    Work a little more with the code :)

  • HepinSuthar•30
    @hepinsuthar
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    What I'm proud of

    I'm particularly proud of how I:

    • Implemented responsive design with a mobile-first approach, ensuring the card looks great on all devices.
    • Used Flexbox for the layout, which helped me align elements efficiently and maintain a clean structure.
    • Created interactive hover effects that enhance the user experience and make the card feel dynamic.
    • Focused on accessibility by using semantic HTML tags, which helps with both readability and SEO.

    What I would do differently next time

    Next time, I would:

    • Add smooth transition effects to hover states for more fluid animations and interactions.
    • Use a CSS framework like Tailwind CSS to streamline my styling process and make it more scalable.
    • Implement dark mode and theming support, allowing users to switch between light and dark modes.
    • Test on more devices and screen sizes to ensure a flawless, consistent experience.
    What challenges did you encounter, and how did you overcome them?

    Challenges I encountered and how I overcame them

    While working on this project, I faced a few challenges, but I was able to overcome them:

    1. Responsive Design Issues
    • Challenge: Initially, I struggled with making sure the layout worked well on both mobile and desktop devices. Ensuring that the card's elements resized properly was tricky.
    • Solution: I followed a mobile-first approach and used max-width for the card and percentage-based widths for its child elements. Flexbox also helped in maintaining alignment and spacing across screen sizes.
    2. Hover Effects and Interactivity
    • Challenge: Adding hover states to make the card feel interactive without making it too flashy was difficult at first.
    • Solution: I focused on subtle color changes and transitions to maintain a smooth user experience, using :hover states with color changes and transitions for smoother interactions.
    3. Image Styling
    • Challenge: Ensuring the images maintained their aspect ratio while fitting the card layout was difficult at times.
    • Solution: I used width: 100% and border-radius: 10px on the images to maintain the aspect ratio and give them a consistent look across different screen sizes.
    4. Alignment of Author Information
    • Challenge: Aligning the avatar and name in the author section with Flexbox while maintaining consistent spacing was tricky.
    • Solution: Flexbox made it easier to align the avatar and author name in a row. I also used align-items: center to ensure both elements were vertically aligned correctly.
    What specific areas of your project would you like help with?

    Help Needed

    I would appreciate feedback and help with the following areas:

    1. Optimizing the Card Layout for Larger Screens
    • I’ve made the layout mobile-first, but I’m unsure if it looks as good on larger screens, especially in terms of spacing and scaling. Can anyone provide suggestions on improving its responsiveness for desktop devices?
    2. Hover Effect Transitions
    • While I’ve added hover states to the title and tag, I’d love suggestions on how to make the hover effects smoother and more visually appealing. Specifically, I want to add a transition to the hover state on the card title for a smoother interaction.
    3. Image Handling for Different Devices
    • I’ve tried to ensure the images scale properly on various devices, but I’m wondering if there’s a more efficient way to ensure they don’t get distorted or stretched. Any best practices for responsive image handling?
    4. General Feedback
    • If anyone has any other suggestions or feedback on how to improve my code structure, readability, or any other part of the project, I’d really appreciate it!

    Blog preview card

    #animation
    1
    imangali aidarkhan•30
    @Imangali18
    Posted about 2 months ago

    Good

  • Yemil Rios•90
    @YemilR10s
    Submitted about 2 years ago

    QR-code-component

    #accessibility#animation#bem#bootstrap#emotion
    1
    imangali aidarkhan•30
    @Imangali18
    Posted 2 months ago

    nice

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