Skip to content
OverviewSolutions
11
Comments
5
Ahmed AbdElAal
@xCordeva

All comments

  • Leo-Code-CA•60
    @Leo-Code-CASubmitted about 1 year ago

    Hi guys!

    I have a question about best practices. I know it's usually recommended to use a CSS class selector .myclass instead of an id selector #myelement or an element selector div.

    However, I was wondering, is it better to create a class even if we won't reuse it? For example:

    <body>
  <section>
    <p class="myparagraph"></p>
  </section>
  <section></section>
  <section></section>
  <section></section>
</body>

    If I want to style the paragraph, is it best practice to delete its class in the html and do:

    p {
  color: blue;
}

    OR this:

    section p {
  color: blue;
}

    OR do I keep the class of the paragraph (even if it won't be reused) and do:

    .myparagraph {
  color: blue;
}

    Thanks and happy coding :)

    NFT preview card component challenge - Solution using CSS Grid

    1
    Ahmed AbdElAal•320
    @xCordevaPosted about 1 year 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
    1
  • Alex•60
    @GrowingHermit44Submitted about 1 year ago

    An issue I'm noticing is the background image not sticking or showing as it does when I preview it locally, compared to github pages.

    Any suggestions on best ways to live preview with vscode would be great.

    Responsive order summary page

    1
    Ahmed AbdElAal•320
    @xCordevaPosted about 1 year 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
    0
  • gabymarchingo•120
    @gabymarchingoSubmitted about 1 year ago

    background shows on my editor but doesn't on here as GitHub doesn't like leading /'s it's also centered properly on my editor/browser

    order summary component

    2
    Ahmed AbdElAal•320
    @xCordevaPosted about 1 year 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">

    0
  • Patience Baker•20
    @IampbakerSubmitted about 1 year ago

    I decided to make the QR code image a background image however I noticed that it shows up in every browser except Safari. Is there a reason for this or a work around? And how often does this happen in other projects?

    I also think that the original design has some shadowing on the card component and I made an attempt to add this design effect but I'm just not there yet. Any resources to help with adding shadows / effects to images would be much appreciated. Also I welcome any other feedback so that I can continue to improve my HTML and CSS. Thanks!

    Frontend Mentor | QR-code-component solution

    2
    Ahmed AbdElAal•320
    @xCordevaPosted about 1 year 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
    0
  • Ahmed AbdElAal•320
    @xCordevaPosted about 1 year 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.

    0