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

Asif M

@asifm37Bangalore200 points

Started My Journey in the Field of Full Stack Development. I'm here to take challenges daily, solve them and learn as much as practical knowledge. #notutorialhellhole #learnbydoing Check Out My Site: https://asifm37.github.io/sites/

I’m currently learning...

MERN Stack Development. By Practicing UI side here.

Latest solutions

  • Responsive Landing Page with Manual Email Validation Form using JS


    Asif M•200
    Submitted over 3 years ago

    1 comment
  • Mobile First Approach Using Grid with Data Read from Data JSON


    Asif M•200
    Submitted over 3 years ago

    1 comment
  • Mobile First SignUp Form Validation using JS


    Asif M•200
    Submitted almost 4 years ago

    0 comments
  • Responsive Article Preview Card Component Using HTML, CSS & bit of JS


    Asif M•200
    Submitted almost 4 years ago

    0 comments
  • Mobile First Approach Testimonial Grid Section using CSS Grid


    Asif M•200
    Submitted almost 4 years ago

    0 comments
  • CSS Grid Single Price Component


    Asif M•200
    Submitted almost 4 years ago

    1 comment
View more solutions

Latest comments

  • Yunus Alif•150
    @yunusanr
    Submitted almost 4 years ago

    Single Price Component with Flexbox

    2
    Asif M•200
    @asifm37
    Posted almost 4 years ago

    If you have a div container as the parent element for your button, you can use 100% The button will always be the full width of the container.

  • Rodrigo Vergara•680
    @UnTalPeluca
    Submitted almost 4 years ago

    Mobile first and flexbox

    1
    Asif M•200
    @asifm37
    Posted almost 4 years ago

    Hi UnTalPeluca,

    Using headings order is actually flexible. It is just standard rules to maintain clean and understandable code. But in practice, you can use multiple h1/h2s, and nothing wrong with them.

    Marked as helpful
  • Thais•255
    @thaiscode
    Submitted almost 4 years ago

    3-column preview card component with html and css.

    2
    Asif M•200
    @asifm37
    Posted almost 4 years ago

    Look into flex: 1 this will help in setting up equal size cards.

  • Srinivas karnati•90
    @karnatisrinivas
    Submitted almost 4 years ago

    Stats card

    2
    Asif M•200
    @asifm37
    Posted almost 4 years ago

    Hi Srinivas karnati,

    Really good job with the desktop version. For the Mobile version, use the media query @media screen and (max-width: 900px) {}.

    I see you are already using flex, so it's just a matter of changing a few direction-related properties in CSS.

    Marked as helpful
  • spyder•315
    @ratan17
    Submitted almost 4 years ago

    Stats-preview-card-component using HTML/CSS and flexbox

    1
    Asif M•200
    @asifm37
    Posted almost 4 years ago

    Hi spyder,

    Yes, the background image section was a bit tricky for me too. I used the image as the foreground with 80% opacity and added a color background, which worked for me.

    Another approach I recently figured out was to use image and add filter option in CSS, this eliminates background logic completely.

    Give these a try maybe.

    Happy Coding. -Asif M

  • asadali209•115
    @asadali209
    Submitted almost 4 years ago

    Mobile First With HTML, SCSS and JS

    2
    Asif M•200
    @asifm37
    Posted almost 4 years ago

    Hi asadali209, Initially, even I struggled with positioning. My suggestion would be to use flex or grid in CSS. And also I learned that it's better to use bg-images in CSS-background. Hope this helps.

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