Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
32
Comments
21
Abdihafid Adan
@Abdul400

All comments

  • Abdihafid Adan•780
    @Abdul400
    Submitted over 3 years ago

    responsive dark theme page made with bootstrap v5, Saas, and parcel v2

    3
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hey @KaiPereira

    thank you for your feedback. I will be considering them for my next challenge. :)

  • Eman•170
    @Eman-AbdElZaher
    Submitted over 3 years ago

    Base Apparel coming soon page

    #jss
    2
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hello @Eman-AbdElZaher, Generally, your work looks really good and is very responsive. However, here are a few things I noticed.

    1. the link to your GitHub code does not work and there is no way of reviewing the code.
    2. I bypassed that by using the view page source in chrome web dev tools and noticed that you gave the hero-desktop image a width and height of 100% which squishes it when viewing devices with smaller width. I would recommend using the image as a background of the right-side and then positioning it accordingly using background-position.
    3. The form placeholder should also be the same color as that of the paragraph. You can edit the placeholder using ::placeholder property.

    Other than that. Good Job!!

  • Anul•90
    @AnulQr
    Submitted over 3 years ago

    Base Apparel coming soon

    1
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hello @AnulQr. I think your work generally looks really good particularly for the desktop view. However, I noticed a few things.

    1. It is responsive but the pages have not been optimized well for mobile devices and tablets.
    2. The responsive layout transitions to quickly to the mobile view too quickly and according to your code, I can see that you started with mobile-first development, which is not necessarily a bad thing. However, you have to consider other devices too. I believe the transition from desktop view to mobile view should be from around 375px, but I usually start around 500px to cater for 'phablets' because phone screens are getting bigger. There should also be tablet devices maybe starting from 500px to around 800px or so. Then the rest is desktop view. kindly consider such devices in your development.
    3. The background does not match the one outline in the design files. consider incorporating it and adjusting it accordingly.

    Other than that, Great Job!

    Marked as helpful
  • Mhmd•1,250
    @Mhmd-Tarek-Mhmd
    Submitted over 3 years ago

    Base Apparel - coming soon

    #accessibility
    1
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hello @Mhmd-Tarek-Mhmd,

    I noticed that the JavaScript functionality for email validation works only when the email is invalid. as per the design files, I believe you should also have a (green text) notification when the email is valid. I also noticed that the background positioning is a bit off. Use the background-position property to position your background.

    Other than that, excellent work!

    Marked as helpful
  • Sang Le•520
    @sqle157
    Submitted over 3 years ago

    NFT Preview Card Component

    2
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hi, @sqle157.

    Generally, everything looks good and scalable. However, I think you have to work on the hover states for instance, use cursor: pointer on the hover states for the avatar image, and also the name in the NFT component. Also, to allow for accessibility, kindly wrap the primary contents in a main html attribute. On the same note, provide alt descriptions for your images to also allow for accessibility.

    Otherwise, nice Job for having a clean and readable code!

    Marked as helpful
  • Abdihafid Adan•780
    @Abdul400
    Submitted over 3 years ago

    ping coming soon page

    10
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    will definitely do so. Thank you for sharing your resources. I will definitely look into them.

  • P
    David Turner•4,130
    @brodiewebdt
    Submitted over 3 years ago

    HTML, CSS, CSS Variables and Flexbox, Grid and Javascript

    4
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    I'd really like to know what your web dev setup looks like. I like how you develop so quickly and they still look so good.

  • P
    David Turner•4,130
    @brodiewebdt
    Submitted over 3 years ago

    HTML, CSS, CSS Variables and Flexbox, Grid and Javascript

    4
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    I'm not sure how you develop your solutions so rapidly, I see you uploading in quick successions. Do you use bootstrap?

  • Abdihafid Adan•780
    @Abdul400
    Submitted over 3 years ago

    into component with sign up form

    3
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    Thank you so much, this solved my issue. I thought making the color above the picture and giving it a lower opacity was the only way to do so. I'm still not sure how your solution works, but it works. Could you please explain to me? unless the bg-intro-desktop.png itself has a transparent background, I'm not sure how the hsl(0, 100%, 74%) can be seen.

  • P
    David Turner•4,130
    @brodiewebdt
    Submitted over 3 years ago

    HTML, CSS, CSS Variables and Flexbox, Grid and Javascript

    4
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    I have to admit this looks awesome!!

  • Abdihafid Adan•780
    @Abdul400
    Submitted over 3 years ago

    into component with sign up form

    3
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    That solved my issue. Thank you!!

  • Shashank Bhat•40
    @shashankbhat2
    Submitted over 3 years ago

    Pure Flexbox Solution

    1
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hello @shashankbhat2, your solutions looks great and the hover states are exactly as depicted. However, there are some things that I noted:

    1. clear your accessibility report.
    2. the page is not responsive for mobile i.e., 375px. I think you should work on making it responsive for mobile devices.
    3. the avatar does not have a white outline by default. It should have an outline on hover. So add a hover state to the image and give it a white outline.
    Marked as helpful
  • kevin•90
    @estivenson94
    Submitted over 3 years ago

    order summary

    1
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    Hello @estivenson94. I think the solution looks really great and you've tried a lot. At a higher resolution, everything looks good. However, I found an issue when scaling down to 500px and I noticed that's where you used your media query. The issue I found is that the music icon and the annual plan are too close. I would recommend that you use a greater margin between the music icon and the annual plan. So give the music icon a margin-right of about 20px and everything will look good again.

  • Amaka•100
    @amakaogujiofor
    Submitted over 3 years ago

    Profile Card Component

    1
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hello @amakaogujiofor. Nice trial on the project. Here are some things that I noted.

    1. I've had some issues with the responsiveness especially at around 700px and I noticed that is where you used your media queries.
    2. Do not use margin: auto on the body element.
    3. I would encourage you to set the body element as flexbox and center your card using justify-content: center, and align-items: center. Your card will always be centered and you can use this as the basis for making it responsive.
    4. To position your background, use background position property to position it in the x and y axis. Here is a short and concise resource on the background position property on w3Schools
  • P
    David Turner•4,130
    @brodiewebdt
    Submitted over 3 years ago

    Used HTML, CSS, Grid and Javascript

    4
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    No, I don't think that is an issues because I did the same. All my current front-end mentor projects are put in one public repository and I think everyone can clone or download it.

  • P
    David Turner•4,130
    @brodiewebdt
    Submitted over 3 years ago

    Used HTML, CSS, Grid and Javascript

    4
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    This looks awesome! I wish you could make your repository public so that I can look at your code as well.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt
    Submitted over 3 years ago

    HTML CSS Flexbox Form Validation

    3
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hello @brodiewebdt. I think generally the design looks good. However, I think the scale is off. The contents should span to the whole page i.e. it should be full screen and you have shown only a percentage of it (I think you have seen my example). Also I've seen that you have not incorporated tablet layout for your website as the mobile layout starts off too early at 800px. I'd recommend having a desktop layout, a tablet layout, and a mobile layout. I wanted to check out your code but for some reason, I've been unable to clone your code on GitHub. I think you should make your repositories public so that I can clone or download it.

    Marked as helpful
  • Abdihafid Adan•780
    @Abdul400
    Submitted over 3 years ago

    Base Apparel coming soon page

    3
    Abdihafid Adan•780
    @Abdul400
    Posted over 3 years ago

    hello David. Thank you for your feedback. I'm not sure why the page is not responsive on your end. Are you viewing the website on a mobile phone or computer? what is your resolution. On my end, I've tested on every devise and it is very responsive. Is it possible for you to provide like a screenshot to show where it starts breaking? please use https://snipboard.io/ and send a link here. Thanks

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

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