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

Ahmed

@AhmedLebdaEgypt430 points

I am a full stack web developer. I am still getting familiar with all the different technologies and tools out there. However, I am excited to learn more and build my skills so that I can create amazing websites and web applications.

I’m currently learning...

c# and .net

Latest solutions

  • Room homepage

    #react#typescript#tailwind-css

    Ahmed•430
    Submitted 8 months ago

    I'd love to hear your thoughts! Your feedback is greatly appreciated and helps me improve.


    1 comment
  • Space tourism website

    #react#react-router#typescript#tailwind-css

    Ahmed•430
    Submitted 8 months ago

    I'd love to hear your thoughts! Your feedback is greatly appreciated and helps me improve.


    1 comment
  • Interactive comments section

    #react#tailwind-css#typescript#react-router

    Ahmed•430
    Submitted 10 months ago

    Hey everyone!

    I’m excited to share my solution! 🎉

    I’ve implemented some extra cool features, and I’d love for you to explore it and share your thoughts. Your feedback would be invaluable in helping me improve!

    Thanks so much for your time, and I hope you enjoy checking it out! Looking forward to hearing what you think!


    0 comments
  • REST Countries API with color theme switcher

    #react#react-router#tailwind-css#typescript#shadcn

    Ahmed•430
    Submitted 10 months ago

    0 comments
  • E-commerce product page


    Ahmed•430
    Submitted over 2 years ago

    0 comments
  • Social media dashboard with theme switcher


    Ahmed•430
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Dawid Matras•20
    @Davee89
    Submitted over 2 years ago

    Tip calculator app uding GRID and JS

    3
    Ahmed•430
    @AhmedLebda
    Posted over 2 years ago

    Hi @Davee89 Great Code !

    You just need to add some validations for input fields , for example:

    • users shouldn't be able to enter negative values (since you use a number type input this can be easily done with a min="0" attribute to the input element).
    • users shouldn't be able to enter anything but numbers in the input fields.
    • just a plus point you can make result calculated whenever user changes any setting ( input values - or button clicks )

    This is my Solution To this challenge, a review is really appreciated.

    Happy Coding

    Marked as helpful
  • Parth Tiwari•50
    @Bingolast
    Submitted over 2 years ago

    This is my Solution for Testimonial webpage challenge

    2
    Ahmed•430
    @AhmedLebda
    Posted over 2 years ago

    Hi @Bingolast Congratulations on solving this challenge.

    You just need some modifications for your CSS file:

    1. You need to put your media queries at the end of your CSS files (after the main styles) because by putting them before your main styles you overwrite them again with the main styles that is the main reason your media styles don't work.

    2. Your .card:nth-of-type(3) have a grid-column: 4; you only want 1 column with 100% width but you tell the browser you want this card to be on the 4th column so the browser will translate this as if there were 4 columns even if you already defined the grid-template-columns: 1fr in the parent element, so by changing that to grid-column: 1; you will get your wanted result.

    • Worth mentioning resource : Kevin Powell video on CSS grid , he teaches grid easily with this same challenge example , I really recommend to watch it, you will definitely learn a lot from it.

    Happy Coding

  • wander•20
    @wanderstweek
    Submitted over 2 years ago

    Basic HTML & CSS

    3
    Ahmed•430
    @AhmedLebda
    Posted over 2 years ago

    Hi @wanderstweek great start, congrats on completing the challenge

    To get the heading like the preview you just need some simple modifications to your code:

    1. you don't need to break the line with <br> tag the text will automatically wrap when the heading exceeds it's container width.
    2. you don't need the margin:15px on the h3 it adds unnecessary 15px on left and write of the heading
    3. you will just need to decrease the h3 to font-size:1.2rem.

    Now you have the heading just like the preview

    • Last tip you need to add a space after (front-end) in the heading 😉

    Good job , and Happy Coding

    Marked as helpful
  • payalpagaria•70
    @payalpagaria
    Submitted over 2 years ago

    tip-calculator-app

    1
    Ahmed•430
    @AhmedLebda
    Posted over 2 years ago

    Hi @payalpagaria Great job,

    I am still working on this challenge too,

    just a little thing that I have noticed the total/person doesn't add the tip amount , and the tip/total only gets calculated when user enters the (number of people) field, I think it will be more convenient to calculate when user selects a tip%

  • Abdullah•340
    @ASH2001prince
    Submitted over 2 years ago

    Interactive Rating Component

    2
    Ahmed•430
    @AhmedLebda
    Posted over 2 years ago

    to prevent submitting the rate if the user didn't choose a rate, you can simply add a condition in your event handler for the submit button event, for example :

    btn.addEventListener("click", () => { if(!finalValue) { return false } else { valueS.textContent = finalValue; secondCard.style.display = "flex"; firstCard.style.display = "none"; } });

    The condition means if the user didn't choose a rate so the finalValue variable is equal to undefined (undefined values === false) the function will just return false otherwise the button submits the rate (when user choose a rate)

    Marked as helpful
  • Justin•50
    @stwslim83
    Submitted almost 3 years ago

    QR-Code solution

    3
    Ahmed•430
    @AhmedLebda
    Posted almost 3 years ago

    Hi @stwslim83, congrats on completing this one

    • You can use <main> instead of <div> to improve the accessibility of your page.
    • Adding max-width: 1440px and min-width: 375px to the body element won't make the content centered properly in screens larger than 1440px or lower than 375px , you can remove those styles and replace it with a margin: 20px for the wrapper div to avoid card touching screen edges in smaller screens
    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

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