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

AlMonther Abdulhafeez

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

  • Responsive Advice Generator App


    AlMonther Abdulhafeez•180
    Submitted 12 months ago

    0 comments
  • Newsletter Sign Up With Success Message


    AlMonther Abdulhafeez•180
    Submitted about 1 year ago

    0 comments
  • Age Calculator App


    AlMonther Abdulhafeez•180
    Submitted about 1 year ago

    0 comments
  • Mortgage Repayment Calculator


    AlMonther Abdulhafeez•180
    Submitted about 1 year ago

    0 comments
  • Mobile First - Testimonials Grid Section


    AlMonther Abdulhafeez•180
    Submitted about 1 year ago

    1 comment
  • Mobile First - Four Card Feature Section


    AlMonther Abdulhafeez•180
    Submitted about 1 year ago

    1 comment
View more solutions

Latest comments

  • Mart•260
    @UnexplainableNo47
    Submitted about 1 year ago

    Responsive Testimonial card sections

    1
    AlMonther Abdulhafeez•180
    @AlMonther9
    Posted about 1 year ago

    Great work Keep it up! try adding the Font, The @media, and the right sizing of the total screen.

  • P
    Anjelica•160
    @Anjie-MF
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Honestly? I’m proud that I didn’t give up. There were so many points this week where I wanted to scrap the whole thing and switch to Flexbox (which would’ve been way easier). But I stuck with CSS Grid even when it made me want to throw my laptop out the window.

    I’m also proud that I learned to trust the grid system. Once I stopped trying to force it and started thinking in rows, columns, and spans, everything started to make more sense. That mindset shift is something I’ll carry into future projects.I’d definitely start with a 12-column grid right away. I originally used 5 columns without knowing why, which just made layout math harder. I also over-nested elements (like wrapping cards inside .content-wrapper), which caused a ton of alignment issues. Next time, I’ll start simpler and avoid adding complexity unless it’s needed.

    And I’d double-check my syntax early—I lost hours to one space in 1 fr (repeat(5, 1 fr) instead of 1fr). Brutal.

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

    Broken layouts with no clear error – I realized that invalid CSS (like repeat(5)) doesn’t throw errors, it just silently fails. I had to dig into DevTools to understand what was going on under the hood.

    Misaligned card widths – The cards weren’t lining up because of mixed grid contexts. Removing the nested .content-wrapper and placing all cards in one unified 12-column grid finally solved it.

    Column stretching – I learned how even small content differences can stretch grid tracks. I used min-width: 0, removed floats, and inspected grid overlays.

    Temptation to quit – This was real. But I asked for help (including Stack Overflow, LinkedIn, and Discord), and that made all the difference.

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

    The mobile layout! I think I got the @media (max-width: 600px) logic right, and I’m stacking cards the way I want, but I’d love a fresh set of eyes to double-check that:

    My grid-column values are clear and consistent

    I’m not overcomplicating the stacking order

    My padding/margins are responsive-friendly

    If anyone spots any refactor opportunities or smarter ways to handle breakpoints, I’d love to hear them!

    fourCardFeature_figmaChallenge

    2
    AlMonther Abdulhafeez•180
    @AlMonther9
    Posted about 1 year ago

    Great Work, Keep it Up! u forgot the border-radius and the box shadow

  • Ecu•220
    @Maflacs
    Submitted about 1 year ago

    Responsive product preview card using GRID and Flexbox

    1
    AlMonther Abdulhafeez•180
    @AlMonther9
    Posted about 1 year ago

    great work, keep it up.

    Marked as helpful
  • BozJR•260
    @BozJR
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I am getting more confident in trying different methods and then looking at my code and then re jigging it around to make it better and not as repetitive.

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

    My only challenges on this task was sorting out the page to get it to be more responsive and look the same as the design in the mobile version. The desktop version was a breeze.

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

    After this challenge I know I need more help with media queries and just figuring it out, but I'm slowly getting the hang of them! just more practise I suppose.

    Basic Recipe Page using simple HTML5 and CSS.

    1
    AlMonther Abdulhafeez•180
    @AlMonther9
    Posted about 1 year ago

    keep up the good work.

  • Charmingdc•60
    @Charmingdc
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how I made the website responsive easily without using any media query.

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

    Hmm, I don't really encounter any challenge. It was a small project for me.

    social Links Profile

    1
    AlMonther Abdulhafeez•180
    @AlMonther9
    Posted about 1 year ago

    great work.

  • Justin Fulkerson•270
    @JF451
    Submitted about 1 year ago

    Blog Card Using Flex-Box

    2
    AlMonther Abdulhafeez•180
    @AlMonther9
    Posted about 1 year ago

    gj

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