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

Aghla Abdo

@AghlaAbdo340 points

Greetings, fellow humans! I'm Abdellatif Aghla, a frontend explorer who just discovered the magical realms of HTML, CSS, and JavaScript. Armed with a sense of curiosity and a never-ending supply of coffee, I'm diving headfirst into the pixelated universe of web development.

I’m currently learning...

🔹 C && 🔹C++

Latest solutions

  • My News Homepage solution


    Aghla Abdo•340
    Submitted about 1 year ago

    0 comments
  • Age Calculator App


    Aghla Abdo•340
    Submitted over 1 year ago

    0 comments
  • FAQ accordion card


    Aghla Abdo•340
    Submitted over 1 year ago

    0 comments
  • Huddle landing page with alternating feature blocks


    Aghla Abdo•340
    Submitted about 2 years ago

    0 comments
  • Huddle landing page with single introductory section


    Aghla Abdo•340
    Submitted about 2 years ago

    2 comments
  • Single Price Grid Component


    Aghla Abdo•340
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • YahyobekRahimov•60
    @YahyobekRahimov
    Submitted over 1 year ago

    Responsive age Calculator

    #sass/scss
    1
    Aghla Abdo•340
    @AghlaAbdo
    Posted over 1 year ago

    Great job

    Hey, I just have some notes for you to consider, I noticed that you're trying to handle the dates yourself, setting the current dates, checking how many days in the month and if its a leap year or not.

    You don't have to do all of that, you can just use the Date object to access the current date and validate whether the date is valid or not and much more, search for the Date object in Javascript to learn more.

    Another thing, you need to remove the error when the user correct their input.

    You can check my solution if you want to know how I handled that. Happy coding ;)

    Marked as helpful
  • JustMe__Dev•140
    @Olagunju9148
    Submitted about 2 years ago

    chat-app-css-illustration-master

    2
    Aghla Abdo•340
    @AghlaAbdo
    Posted about 2 years ago

    Hi, great job, you did excellent work.

    However, there are few things to note on your code. First of all, you used Fontawesome to import some icons, and the challenge is focused to create everything only with CSS.

    You could create those arrow using:

    .arrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    }
    .left-arrow {
    transform: rotate(135deg);
    }
    .right-arrow {
    transform: rotate(-45deg);
    }
    

    And you could create those 3 dots menu by creating 3 divs inside a another div container:

    <div class="dots">
    <div></div>
    <div></div>
    <div></div>
    </div>
    
    .dots {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    .dots div {
    background-color: rgba(255, 255, 255, 0.76);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    }
    

    Another thing to note in the .msg-input section; there is no need to add any input, it supposed to be just like a screenshot but made with CSS, shouldn't interact with it. And also for the radio input, it should be just like an icon.

    In general you did great work by finishing this intermediate challenge. I also went through this challenge you can see my solution on my profile. I wish you happy coding ;-)

    Marked as helpful
  • Marvel Victor•390
    @Mharvel13
    Submitted over 2 years ago

    Article Preview Component Solution

    1
    Aghla Abdo•340
    @AghlaAbdo
    Posted over 2 years ago

    Great job, you did very nice

    I have some notes for you to consider to further improve your design:

    • You forgot to set the background color as in the image, colors are very important in web design.
    • You need to make the shadow more blur and more transparent to reach the same effect.
    • To center <main> on the page, you can use flexbox or grid instead of margin. T use flexbox you need to set body desplay:flex:
    body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    

    But also .attribution will be set as flex, to avoid that you can set it's position to absolute and position it at the bottom of the page, Like so:

    .attribution {
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        margin: 0 auto;  
    }
    

    I hope you got something from this. Good luck on your journey

  • Riley•260
    @rileydevdzn
    Submitted over 2 years ago

    Flexbox and responsive images with picture element

    2
    Aghla Abdo•340
    @AghlaAbdo
    Posted over 2 years ago

    That's awesome, you really did a great job

    I cannot differentiate between you solution and the origin image. If you could just make some small changes to the font size and match it with origin image so you can't see the small dance of the text when you scroll between your solution and the design😅.

    There is nothing else to say. Good Luck for your coding Journey 😊

  • ahmbarreiros•20
    @ahmbarreiros
    Submitted over 2 years ago

    Responsive results summary component

    1
    Aghla Abdo•340
    @AghlaAbdo
    Posted over 2 years ago

    Very nice, you did great job

    The only thing I will mention though is that you need to make the colored divs background color more transparent as in the image because those shining colors don't really look great.

    And another thing for the drop shadow you also need to make it less visible to reach the same effect as in the image. But overall, you did great job I wish you happy coding 😊.

  • João Victor•180
    @VictorDEV1301
    Submitted over 2 years ago

    Results summary component

    1
    Aghla Abdo•340
    @AghlaAbdo
    Posted over 2 years ago

    Great job, you did very well.

    The only thing I will mention is that you didn't use the same colors given in the style-guide.md

    And for the div that contains 76 of 100, you should make the background linear-gradient from color to transparent to reach the same effect like this:

    background: linear-gradient(180deg, rgb(77,34,200), rgba(77,34,200, .05));

    And also you need to make the drop shadow less visible and use the color as in the image because its not a dark shadow, and add more padding to the text to make it go to 3 lines. Good Luck for your coding Journey 😊

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