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

Ahmed AbdElAal

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

  • Launch Countdown Timer

    #sass/scss

    Ahmed AbdElAal•320
    Submitted about 1 year ago

    0 comments
  • React App - Interactive Comments Section

    #react#tanstack-query

    Ahmed AbdElAal•320
    Submitted almost 2 years ago

    0 comments
  • Rest Countries API with Dark Mode Switch


    Ahmed AbdElAal•320
    Submitted almost 2 years ago

    1 comment
  • E-commerce Product Page


    Ahmed AbdElAal•320
    Submitted almost 2 years ago

    0 comments
  • Responsive Multi Step Form


    Ahmed AbdElAal•320
    Submitted almost 2 years ago

    0 comments
  • Responsive Age Calculator App


    Ahmed AbdElAal•320
    Submitted almost 2 years ago

    0 comments
View more solutions

Latest comments

  • Leo-Code-CA•60
    @Leo-Code-CA
    Submitted almost 2 years ago

    NFT preview card component challenge - Solution using CSS Grid

    #animation
    1
    Ahmed AbdElAal•320
    @xCordeva
    Posted almost 2 years ago

    Hey Leo,

    As you mentioned, it's generally better to use classes instead of IDs because they are reusable.

    And for your question, I wouldn't recommend using the first approach:

    p { color: blue; }

    This would apply to all the paragraphs on the page, which might not be what you want.

    The second approach:

    section p { color: blue; }

    is better and can work fine for smaller projects. However, in larger projects, it can be harder to manage and understand which p you are styling since a section could contain more than one p

    That's why it's always better to use a class, even if you are not going to reuse it. Giving a class is a cleaner and more efficient way to apply styles, especially when dealing with bigger and more complex layouts where you want to be specific about which element that you're targeting.

    Hope this helps

    Marked as helpful
  • Alex•60
    @GrowingHermit44
    Submitted almost 2 years ago

    Responsive order summary page

    1
    Ahmed AbdElAal•320
    @xCordeva
    Posted almost 2 years ago

    Hey Alex,

    I just checked your code and the line with the path needs to be adjusted to this instead of what its now

    background-image: url(../images/pattern-background-desktop.svg);

    I think this will solve the problem

    Marked as helpful
  • gabymarchingo•120
    @gabymarchingo
    Submitted almost 2 years ago

    order summary component

    2
    Ahmed AbdElAal•320
    @xCordeva
    Posted almost 2 years ago

    I checked your code the reason the styles are not working correctly is that you didnt link the path correctly it should be this instead, after the edit it should work properly

    <link rel="stylesheet" href="./CSS/style.css">

  • Patience Baker•20
    @Iampbaker
    Submitted almost 2 years ago

    Frontend Mentor | QR-code-component solution

    #styled-components
    2
    Ahmed AbdElAal•320
    @xCordeva
    Posted almost 2 years ago

    To add the shadow effect use the box-shadow style

    box-shadow: 0px 0px 5px grey;

    1. The first value is for the horizontal alignment.
    2. Second value is for vertical alignment.
    3. The third value sets the blur radius.
    4. Fourth value is the color you want your shadow to be.
    Marked as helpful
  • Brian•140
    @Noxlobin
    Submitted almost 2 years ago

    QR Code app using vanilla HTML and CSS

    1
    Ahmed AbdElAal•320
    @xCordeva
    Posted almost 2 years ago

    Using IDs to select elements is one way to do it. However, it's generally preferred to use classes for the styling purposes. Classes offer reusability so you can apply the same class to multiple items to achieve the same styling. While an Id is often used to select a singular item and not to be reused so it kinda limits the styling process. So in terms of styling I'd say use classes.

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