Skip to content
OverviewSolutions
10
Comments
8
Acme Gamers
@AcmeGamers

All comments

  • Kariman Medhat•170
    @KarimanMedhatSubmitted over 2 years ago

    I did a lot of research while working on this project and this is my first time enjoying that =D so I'm happy with it and used every piece of advice I took in the last projects.

    Stats preview challenge

    1
    Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Hey there 👋,

    Congratulations 🥳! To be honest, you really did superbly 😃! I liked the way how you used the ::before pseudo-element to give the image a purple overlay, which itself was a great idea, hats off on that 👏. I'm glad you enjoyed doing the project the most as enjoying while making your own portfolio/design as it also matters 😊.

    Here are small recommendations which can further improve your code and make it easier for you to work with the code.

    Centering Elements

    Since your container class is a flexbox (that is using display:flex), you can use it to center your elements

    .container {
    /*   Your Code   */
    display: flex;
		
    /*   New Addition   */
    align-items: center;      // Centers horizontally
    justify-content: center;  // Centers Vertically
    min-height: 100vh;        // Captures full-screen height

    // Note: it is recommended to use min-height since it is a good practice
}

    Now you can remove the below code from your CSS file without any worries and it will show the same result!

    body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

    Check this video out on how to use Flexbox Editor on chrome directly: https://github.com/AcmeGamers/stats-view-Kariman/blob/main/Flexbox.mkv

    Media Queries CSS Duplicity

    I noticed that you are using the same properties in media queries. Although you really don't need to specify the properties again, you can just define them once and it will show the result you want 🙂. Let me explain you this through an example:

    /*  This is a normal H1 heading with a color and a background   */
h1 {
    color: red;
    background: blue;
    font-size: 40px;
}

/*  Now if you do this  */
@media screen and (max-width: 425px) {

    h1 {
        font-size: 26px;
        // This way, only font-size will change.
        // And the color and background will remain the same.
        // Also works with ::before and ::after pseudo elements 😀
    }
		
}

    Commenting

    In addition, I would recommend making comments in your code, it will help you recognize the part of your code faster when you are working with larger projects. Here's an example:

    HTML

    https://github.com/AcmeGamers/sunnyside-shihab/blob/main/Screenshot_2778.png

    CSS

    https://github.com/AcmeGamers/sunnyside-shihab/blob/main/Screenshot_3560.png

    I hope these few tips help you to make your code better and make you more productive. Hoping to see your future success and amazing work as always, best of luck 😃!

    Marked as helpful
    1
  • Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Hey there 👋,

    Congratulations on completing the challenge 🥳! You really did amazing, especially to use semantic HTML which is a good idea to improve your SEO scores! For feedback, I have a recommendation which you can use later if needed.

    In HTML, you have given each button a class as btn-section-1, btn-section-2, and btn-section-3, however, in CSS, we can actually use selectors which helps us to select elements without specifying each element a class like btn-section-1.

    You can select elements in CSS like this:

    // Try This
.section-1 > button {   // This apply changes to all the child buttons in Section-1
    background: red;
}

    // More Cases

.section-2 > button:nth-child(1) {    // This will select only the first button in Section 2 (Suppose you have 10 buttons, it will only apply changes to the first button)
    background: blue;
}

.section-3 button {    // This will select all the buttons in Section 3, and when I meant all, I meant even grandchild buttons.
    background: blue;
}

    I noticed it since your hovering of each button was orange, you might want to fix that. Although, I really loved the way how you slid the attribute to the right side and made it vertically straight.

    Looking forward to seeing your amazing work in the future and hope this helps 😊

    Marked as helpful
    1
  • adolfusdelmar•20
    @adolfusdelmarSubmitted over 2 years ago

    i had some difficulties fitting the image into the div this is my first attempt and any feedback is appreciated

    QR-Code-Component

    2
    Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Hey there 👋,

    Congratulations on completing your first challenge 🥳! This is really amazing considering your first attempt, hats off on that 😀.

    Here are a few recommendations which can help you to further improve your code:

    Semantic HTML

    Semantic HTML improves the SEO of the website by giving more meaning to your HTML code, and it is a good practice to wrap all of your frontend code inside a <main> tag. In your case, it will go as:

    <body>
    <main> 
           ...
    </main>
</body>

    Flexbox Centering

    I am amazed that you are also using flexbox to center your whole project, and a good fact is, you can actually center it vertically as well!

    .body {
    /*  Your Code  */
    background-color: hsl(212, 45%, 89%);
    display: flex;
    justify-content: center;

    /*  New Addition  */
    align-items: center;     // This aligns your code center vertically
    min-height: 100vh;       // Captures full screen height (Thanks to Vanza)
}

    That way, it will be center horizontally and vertically without any issues.

    Google Fonts

    Now, you can also import fonts from Google Fonts to stylize the text further, here is a 1 min video to help you understand how it works:

    https://www.youtube.com/watch?v=YVnYFeYbv_Q

    Hoping to look for your amazing work and designs in the future, best of luck! 😀

    Marked as helpful
    2
  • Kariman Medhat•170
    @KarimanMedhatSubmitted over 2 years ago

    In the active mood, I couldn't do the overlay with the icon inactive mood, I searched for a way but it didn't work. Does anyone have a way that will work?

    NFT preview challenge

    1
    Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Hey there 👋,

    Congratulations on nearly completing the challenge 🥳! You did great on centring the whole <main> tag using transform 😊.

    I would recommend changing the paragraph color to a bit lighter tone so people with eye issues can read it with ease. As far for the issue of hovering on the image that you were having, we use pseudo elements for that, things like ::before, ::after, :first-child, etc. However, pseudo elements does not work on <img> elements, so to cover that issue, we use the <div> tag.

    Solution (Spoiler Alert)

    HTML

    • Change your <img class='main-img'> element to <div class='main-img'> element
    • Yup, that's all for HTML! :D

    CSS

    Add a background image to the div

    .main-img {
    background: url("images/image-equilibrium.jpg");
    background-size: contain;

    min-height: 268px;    
    width: inherit;   // Inherits the available width

    border-radius: 20px;
}

    Let's add the pseudo :before state on the div element

    .main-img::before {
    content: "";       // This is important, it won't work without it
    display: block;

    height: inherit;   // Inherits the div height
    width: inherit;    // Inherits the div width

    background: red;
    opacity: 0.6
}

    If you reach here, it means you may have got a complete red square on your NF T image. But the question is, we want it to appear when it hovers, so try doing some research on how to add hover on ::before, if you figure it out, congrats, you are moving at a fast pace! :DDD

    If it still confuses you, drop a reply and I will be here to explain it with an easier method 😊. Hope to see your future success and designs, until then, best of luck!

    Marked as helpful
    1
  • Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Hey there 👋,

    Congratulations on completing the challenge 🎉! I really liked the way how you used width: min(30rem, 100%); to size the card's background 😀.

    Also, here are some ways through which you can improve your code more:

    Semantic HTML

    Semantic HTML improves the SEO of the website by giving more meaning to your HTML code, and it is a good practice to wrap all of your frontend code inside a <main> tag. In your case, it will go as:

    <main>
     <div class="contenedor">  ... </div>
     <p class="attribution">  ... </p>
</main>

    Centering Elements

    For centring elements on the screen, there are 3 ways from which we can do so with ease, and for this one, I will go with flexbox. Now considering you have added the <main> tag into your code, we normally do this:

    .main {
     min-height: 100vh; // Catches full screen-height and can expand when more content is added
     display: flex;     // Flexbox

     flex-direction: column;     // Aligns your elements vertically [ div and p tag ]
     align-items: center;        // Center Elements Horizontally
     justify-content: center;    // Center Elements Vertically
}

    This way, you won't need to use margin: 12.5% auto; on the contenedor class, helping you to align other elements more properly. You can try adding each line at a time from the above CSS code to understand how the flexbox works.

    Looking forward to seeing your amazing work in the future and hope this helps 😊

    Marked as helpful
    0
  • Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Hey there 👋,

    You actually did pretty good to make this with semantic HTML, to be honest, 😊. I would recommend using <main> ... </main> tag instead of <div class='main'> ... <div> since div is a non-semantic HTML tag. The rest is pretty cool!

    As far for the image element problem that you are having, here are a few fixes that you can use:

    Example Egg div:

    HTML Part:

    • Convert the div having egg image into an img element
    • Yea, that's all! :D

    CSS Part:

    Select your image element and give it the following values:

    .bgimg { 
    order: 1;   // This will help in arranging your elements
    width: 100% // This will give full display in mobile
}

    Now, select your text

    #section-1 > div > div {
    order: 2;    // Now the text will be below the image
    width: 100%  // This again will give full screen width
}

    Lastly, wrap your elements so they become responsive

    #about .card {
     flex-wrap: wrap;  // It won't work without this guy so do remember to add it.
}

    When you do this, it will automatically resolve the issue and will give a proper display. You can check it out in the forked area here:

    https://github.com/AcmeGamers/sunnyside-shihab

    Hope this helps you figure out how to solve it 😊

    0
  • Acme Gamers•295
    @AcmeGamersPosted over 2 years ago

    Congratulations on completing it :D! I really liked the way how you kept the whole code clean and easier for other developers to understand.

    In terms of feedback, if you ever wanted to remove the large gap between the button and the divider:

    One way is to:

    • on container class, try padding-bottom: 0;

    Alternative way:

    • Get the button element below the div element

    Best of luck on your future challenges 🙂

    Marked as helpful
    1
  • Acme Gamers•295
    @AcmeGamersPosted almost 4 years ago

    Looks pretty awesome!

    1