Skip to content
OverviewSolutions
14
Comments
5
OmarRefaee
@OmarRefaee

All comments

  • mohammedreddah•50
    @mohammedreddahSubmitted 5 months ago
    What specific areas of your project would you like help with?

    hi everyone!!

    1\ I faced a problem in positioning the marker of " li " elements, although i searched a lot still i didn't find a solution .

    2\ In active state exactly in the picture , i have positioned the eye picture using
    position : fixed ; & top : 14%;
    my question is: is there a better way & more Professional ?

    nft-card

    2
    OmarRefaee•200
    @OmarRefaeePosted 5 months ago

    Hi Mohammed,

    The solution for the first problem which is positioning of marker of li elements you should use list-style-position css property, but it will still not well positioned, so what i did in my solution is to use the icon as svg or img and give the parent container display flex so i can position them well.

    The solution for the active state eye picture is to use it in ::before selector with opacity 0 when hover change the opacity.

    and that's it good luck in the next project.

    Marked as helpful
    1
  • OmarRefaee•200
    @OmarRefaeePosted 10 months ago

    Well Done 👏 You Did Great, i have some suggestion for you that can make the project better:

    • border-radius for the image.
    • instead of using card-wrapper and container just center the card using body element:
    body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
    • since you made media queries you need to make it more responsive add some work on mobile and medium screens and it will be perfect.
    • better than using padding inside the card use:
    .card {
    height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    and that's the feedback good luck in your career.

    Marked as helpful
    1
  • OmarRefaee•200
    @OmarRefaeePosted 10 months ago

    Well Done Great Job 👏.

    • I noticed that the website is not mobile friendly you can do that using "Media queries".
    /* Small devices */
@media (max-width: 576px) { 
    .container {
        width: 300px;
    }
}

@media (min-width: 576px) {
    .container {
        width: auto;
    }
}

    Other Than That Perfect.👌

    Marked as helpful
    0
  • Mennatallah Hesham•1,490
    @Mennatallah-HishamSubmitted about 1 year ago

    Hello, Frontend Mentor community. This is my solution for the NFT Preview Card challenge 👋

    This is challenge 3 where I provide comprehensive guidance to fellow developers by adhering to industry best practices. By focusing on key areas such as

    • Semantic HTML
    • Clean web page structure
    • CSS enhancements
    • Accessibility
    • Performance Optimization

    Today I want to share with you the advantages of using utility css class

    • utility class are css classes that applies a single rule or a very simple pattern.

    Benefits

    1. dryness & consistency

      • help you reduce repetition and unintentional inconsistency in your styling

      • you can alter the value in one place instead

    2. file size

      • by reducing repetition, you reduce the file size which results in improving your page performance.

    3- specificity

    • they also make it possible to creawte element specific overrides without writing high specificity varients.

    Utility classes i used in this challenge

    

.clr-white{
   color:white;
}

.clr-cyan{
   color:var( --color-primary-cyan);

}
.fw-2{
   font-weight:var(--weight-2);
}
.fw-3{
   font-weight:var(--weight-3);
}
.ml-2{
   margin-left:0.2rem;
}
.my-2{
   margin-block:2rem;
}
.my-1{
   margin-block:1rem;
}

    I aim to address common mistakes observed in the challenges submitted by other participants. Through this initiative, I hope to not only solve newbie-level projects but also share valuable insights and tips to aid in their learning journey. As a part of this initiative, I started a series Frontend Mentor - Learning from mistakes on Linkedin where I share common mistakes I found in newbies / junior challenges to assist all fellow newcomers in avoiding these pitfalls

    Kindly note that I increased the font size and font weight for better readability

    NFT Preview Card

    1
    OmarRefaee•200
    @OmarRefaeePosted about 1 year ago

    Hi Mennatallah

    Well done doing the challenge.

    here are some suggestions:

    1 - it will look better if all card padding are 2rem instead of 2rem 1.5rem

    2 - Make the label display flex so the icon aligned with the text

    3 - and icon margin-right 0.5rem

    Good Luck in the next challenge.

    0
  • Mennatallah Hesham•1,490
    @Mennatallah-HishamSubmitted about 1 year ago

    Hello, Frontend Mentor community. This is my solution for the Qr-Code Component challenge

    Today marks the beginning of the Newbie Challenge, a unique opportunity for me to offer solutions for HTML/CSS challenges specifically designed for newcomers. Throughout this challenge, I aim to provide comprehensive guidance to fellow developers by adhering to industry best practices. By focusing on key areas such as

    • Semantic HTML
    • Clean web page structure
    • CSS enhancements
    • Accessibility
    • Performance Optimization,

    I aim to address common mistakes observed in the challenges submitted by other participants. Through this initiative, I hope to not only solve newbie-level projects but also share valuable insights and tips to aid in their learning journey.

    In this challenge, I focused on reducing the load time of Google fonts to improve page performance by 880ms. you can check this article

    This solution is tested by

    if you want me to review your code, just comment (the challenge name + the areas you want me to focus on) and I will provide a review as soon as possible.

    QR Code Component

    2
    OmarRefaee•200
    @OmarRefaeePosted about 1 year ago

    Hi Mennatallah

    Great Work you did amazing

    Suggestion:

    • Use Github Pages as a hosting and add the URL in Github README file or in Github "About" section
    0