Skip to content
OverviewSolutions
14
Comments
8

Chriscent Pingol

@KishonShrillPhilippines, Iligan City310 points

Just a student currently studying in programming in the course of Computer Science at MSU-IIT.

I’m currently learning...

Computer Science @MSUIIT - 🖥️ Front End: HTML, CSS, and JavaScript - 📂 Back End: JavaScript, MongoDB - 🤖 Full Stack: React, Vue

Latest solutions

View more solutions

Latest comments

  • Chriscent Pingol•310
    @KishonShrill

    Problems

    1. h1 does not have a bold weight
    2. Please don't put text without a semantic 😭 I am referring to "Coded by"

    My Review

    1. Did you follow the design example? - Yes, although 85% done
    2. Try to lessen the padding so it will look exactly like the design example.
    3. Put a font-weight on your h1. It can either be:
    h1 {
  font-weight: bold;
}
/*OR*/
h1 {
  font-weight: 700
}
    1. Please place your attribute "Coded by Elisheba" outside the card as it is not part of the design.

    You are doing a great job 🎉🎉 Keep up the good work!

  • Chriscent Pingol•310
    @KishonShrill

    Splendid Work 🎉🎉

    Although you forgot a border: 1px solid black on the card but still... Well done!

    Recommendation

    • I think the only recommendation I can give you is that you should follow a CSS naming convention which can save you a LOT of time. I took the time on reviewing your CSS file and there were a LOT of nesting in the code which is usually not recommended but you still achieved the result nevertheless.

    YouTube Tutorials on Naming Convention

    1. Why I use the BEM naming convention for my CSS
    2. BEM in 6 minutes - CSS Methodology 2024

    p.s. - It is my job to nitpick on small mistakes so don't worry about it 🤤✌️

    Marked as helpful
  • Sharique Ahmed Farooqui•10
    @sharique
    What are you most proud of, and what would you do differently next time?

    This is my first attempt to solve a challenge. Update code to fix accessibility warnings and feedback.

    What challenges did you encounter, and how did you overcome them?

    This implementation looks fine, so not sure if I need to optimise for mobile or not.

    QR Code component

    1
    Chriscent Pingol•310
    @KishonShrill

    Problem

    1. font-size and color of your h3 needs to match.
    2. Put the attribution outside the card as it is not part of the design

    My Review

    1. Did you follow the design example? - Yes, you are 90% there
    2. Try adjusting the font-size and color of your h3 to match the design example given.
    3. 😭 Please wrap your "Scan the QR Code..." with a <p> tag, putting a text out without a semantic is a bad habit to do. Also, If you want the sentence to break at Mentor, try using the <br> semantic, as in...
    <p>
Scan the QR code to visit Frontend<br>
Mentor and take your coding skills to<br>
the next level.
</p>

    Another cool trick to adjusting the width without using <br> is with the ch like:

    .paragraph {
width: 30ch;
}

    ch is a character unit which is the width of the character 0.

    You are doing well! Great job on your project 🎉

    Marked as helpful
  • Chriscent Pingol•310
    @KishonShrill

    Problems

    1. Right away I can see that some font-size are not correct to the visual example.

    My Review

    1. Did you follow the design? - Yes, you are 95% there
    2. I see that the .card h1 font-size is already correct but the <p> tag is the one you should adjust inside the card. Try lowering the font-size AND experiment with the color by making it slightly less black.
    3. The top texts on .header-wrapper some font-size work as well.

    You did great following the design, just a little more tweaks and you are good to go 🥳🎉🎉

  • P
    Klevis•420
    @21Kl3v1s21
    What are you most proud of, and what would you do differently next time?

    a

    What challenges did you encounter, and how did you overcome them?

    a

    What specific areas of your project would you like help with?

    a

    FR-Mentor-NFT-Card

    #pure-css
    1
    Chriscent Pingol•310
    @KishonShrill

    Problems

    1. Card - Too sharp, give it more border-radius
    2. NFT Photo - It has no border-radius, give it a border-radius similar to the example photo.

    My review

    1. Did you follow the design? - Yes, you are 89% there
    2. The card is too big, adjust the width and height to its right size.
    3. About the border-radius, usually the inside is 50% compared to the outside so for example:
    .card {
border-radius: 30px;
}

.card__nft-photo {
border-radius: 15px;
}
  • Chriscent Pingol•310
    @KishonShrill

    Clean your CSS class pointers

    In your css code, I believe .container .foot h4 span .oth{} is just the same as .oth{} and .container .foot h4{} is same as .foot h4{}

    Doing so will make it less more confusing and more readable code when working in your css. Let me give you another quick example:

    Let use this HTML Code as an example...

    <div class="container">
    <div class="img-c">
        <div class="image">
            <img class="fir" src="./images/image-equilibrium.jpg" alt="">
        </div>
        <div class="overlay">
            <img class="sec" src="./images/icon-view.svg" alt="">
        </div>
    </div>
</div>
    • Instead of pointing like this .container .img-c .overlay .sec{} you can just shorten it like this .sec
    • and instead of .container .img-c:hover .overlay { opacity: 1; } you can also shorten it into .img-c:hover .overlay{ opacity: 1; }.

    Use HTML semantic code

    There are many semantic code you can use, some of these code include:

    • <article>
    • <aside>
    • <footer>
    • <header>
    • <main>
    • <nav>
    • <section>

    In your case, instead of using another div as a container like what you did here 👇

    <main>
    <div class="container">
        <p></p>
    </div>
</main>

    You can clean it more by making the <main> as your container instead...

    <main>
    <p></p>
</main>

    And whatever was your styles of [container], just point and change it to the <main> element instead which would be something like this...

    main {
    width: 324px;
    padding: 20px;
    background-color: var(--card-back);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

    Overall Feedback and Summary

    All in all, your frontend is okay and great 🥳🎈🎉🎊 and that is all that matters, but soon you will be working with other people too soo having readable code really is a 1++. So all you need to work on is:

    • Clean CSS class pointers
    • Use HTML semantic code if possible

    This is a great start so far 🎉 and I hope you enjoy your road of frontend programming 😄

View more comments