Skip to content
OverviewSolutions
5
Comments
3
Regina
@regina-cht

All comments

  • Jeremiah Dunphy•10
    @JeremiahDunphySubmitted over 1 year ago

    Hi! Thanks for checking out my QR code. I was wondering if someone could point me in the right direction for best practices with my code overall?

    QR Code Solution

    2
    Regina•90
    @regina-chtPosted over 1 year ago

    Hey!! Congratulations on finishing this challenge😊, you did a great job😉. I reviewed your code and here are a couple of suggestions I can give you:

    I noticed that you added padding to your main .Qrcode__container I find that it isn't necessary so you can remove it.

    The challenge states that the card layout doesn't shift, and when you rescale the card in your design, the layout becomes a bit odd. To fix this, in this particular situation, I'll suggest sizing the card in pixels:

    .QRcode__sm--box {
width: 320px;
height: 495px;
}

    Since your box shadow is the same color as your background, it doesn't make a visible difference, you can remove it or perhaps change the color so it has a bit more contrast with the background.

    Remember that the padding property includes the four attributes in this order: top, right, bottom, and left. In this situation, the padding-top is overridden by the padding attribute and is not applied correctly, you should only use one property to define your padding.

    img {
padding-top: 20px;
padding: 16px;
}

    And to place the image more accurately to the design you can instead try removing the padding from your image and adding a margin top and bottom instead:

    img {
border-radius: 15px;
width: 290px;
max-width: 100%;
margin: 15px auto;
}

    I changed the width value to adjust the size better and the border-radius.

    With these changes, you won't need the media query for this solution . Remember, this is only because the challenge said that the card layout doesn't shift, but if you chose so, you can improve the responsive version!!!

    😅Finally, an extra suggestion, to have more control over your color pallet, you could use CSS variables for this they are stated at the beginning of your stylesheet like this:

    :root {
--blue: hsl(179, 62%, 43%);
--light_gray: hsl(179, 47%, 52%);
}

    And to use them, you declare the variable this way: background-color: var(--light_gray);

    I know it may seem like a lot😩, but hopfully it's helpful. If you have any questions let me know!!!🤔 And keep going, only practice makes perfect. You're doing great!!🥳🥳

    Marked as helpful
    2
  • jjlim27•10
    @jjlim27Submitted over 1 year ago

    My first challenge in frontendmentor.io as a beginner in Frontend Development!

    Managed to create something that looks similar to the actual design. Most importantly, I will like pieces of advice if there are any improvements that can be made, thanks!

    My first challenge - QR code

    1
    Regina•90
    @regina-chtPosted over 1 year ago

    Hi!😀You did a great job. Your solution resembles the design!!🥳 But I noticed that your text is not aligned at the center. So if you'll like to fix that minor problem, you could change in your stylesheet this part:

    .qr-text {
padding: 0 1.1rem 1.1rem 2rem;

    And instead, change the padding to this, and you could even add some margin :

    .qr-text {
padding: 0 22px;
margin: 10px 0px 15px 0px;
}

    Hope this helps. For this being your first challenge, you are doing amazing!!!✨✨

    Marked as helpful
    0
  • Clinto Bean•130
    @clinto-beanSubmitted over 1 year ago

    My process

    Built with

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • Mobile-first workflow

    What I learned

    This was used mostly as practice for two things: semantic HTML and CSS positioning. I was able to create the layout I wanted without using pseudo-elements which I had been doing in the past.

    Continued development

    One thing I did not attempt with this challenge was to use Javascript to impact active states. Since I wanted to focus mostly on honing my CSS skills, this inherently left me at a disadvantage when it comes to getting more Javascript practice. One thing that I struggled with for the CSS portion of the project was creating the overlay on the main card image. I was not able to get it color-perfect because I used opacity properties on the element behind it (which became above it on hover), thus was unable to set the opacity in the child image (eyeball) even using the !important declaration.

    Useful resources

    For this I used the CSS documentation on MDN.

    NFT Preview Card Solution

    2
    Regina•90
    @regina-chtPosted over 1 year ago

    Hi!!! I think overall your solution is great, I'm not 100% sure I can give you the best solution to the hover opacity problem, but the way I solved it was by creating a variable color in my :root with the cyan in rgba and using that to apply the opacity value.

    I hope that helps!!! :)

    1