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

Imran Khan

@astr0n0merMumbai, India370 points

Passionate fullstack developer skilled in React, JavaScript, and UI design. Focused on crafting efficient user experiences. Available for collaboration.

I’m currently learning...

React JS, Tailwind CSS, Node JS, Vite

Latest solutions

  • Mobile first solution using vanilla JS


    Imran Khan•370
    Submitted over 1 year ago

    0 comments
  • Mobile first solution using React JS and styled-components

    #react#styled-components#vite#accessibility

    Imran Khan•370
    Submitted about 2 years ago

    0 comments
  • Solution using React and styled-components

    #react#styled-components#vite

    Imran Khan•370
    Submitted about 2 years ago

    0 comments
  • Mobile-first solution using Tailwind CSS

    #tailwind-css#vite

    Imran Khan•370
    Submitted about 2 years ago

    0 comments
  • Solution using React JS components

    #bem#react#sass/scss#vite

    Imran Khan•370
    Submitted about 2 years ago

    0 comments
  • Mobile first responsive solution

    #bem#sass/scss

    Imran Khan•370
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • Yeison Hernandez•10
    @Yeison2017
    Submitted over 2 years ago

    QR code component

    2
    Imran Khan•370
    @astr0n0mer
    Posted over 2 years ago

    Hi @Yeison2017, you're off to a great start

    Some corrections as you're using BEM

    • The <div> with class="cardQR__content" is a block and should have its own name, maybe "content"
    • And then the children will be "content__title" and "content__info"

    You can consider these resources for expanding your knowledge on BEM:

    • 🎥 Why I use the BEM naming convention for my CSS
    • 🗒️ BEM 101 on css-tricks

    Good luck. Happy coding 😁😀

    Marked as helpful
  • Babatunde•20
    @n-uzumaki
    Submitted over 2 years ago

    qr-code challenge attempt

    2
    Imran Khan•370
    @astr0n0mer
    Posted over 2 years ago

    Hey @n-uzumaki, you're off to a great start

    HTML:

    • You can replace the <h5> with an <h1> for better accessibility
    • Do the styling in CSS

    CSS:

    • You can explore CSS naming conventions, namely BEM. This will make your code more readable for yourself and for others. Don't get me wrong, your code is readable even now, but BEM or any other convention for that matter, will definitely be helpful

    Happy coding. Good luck 😁😀

    Marked as helpful
  • Hồ Đắc Minh Quân•110
    @tetinhxuan
    Submitted over 2 years ago

    Advice generator app use basic fetch API

    1
    Imran Khan•370
    @astr0n0mer
    Posted over 2 years ago

    Hi @tetinhxuan, that's a fantastic solution

    Just a small suggestion, you can set the witdh of your <main> element as width: min(90%, 600px);. Reference to min()

    This way, it will get you rid of the media query and will provide more responsiveness to your page

    Happy coding 😁😀

    Marked as helpful
  • Axel Quintana•120
    @Leracius
    Submitted over 2 years ago

    Using css & js

    1
    Imran Khan•370
    @astr0n0mer
    Posted over 2 years ago

    Hello @Leracius, nice work on your solution.

    Here are some areas that you might want to improve upon

    HTML:

    • While it would make sense wrapping the component in a <section> in a bigger project, but for this challenge, you can replace the <section> tag with <main> tag

    CSS:

    • Rather than using width directly, you can set #container's width:min(95%, 570px);. This way, it will always be 95% of the parent's width, and will take 570px as the maximum width.
    • In general, try to avoid giving width to block level elements
    • This course by Kevin Powell would be helpful in clearing out some responsive layout problems

    Well done, it's a great solution 😁😀

    Marked as helpful
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