Skip to content
OverviewSolutions
5
Comments
15
vcodey
@v-codey

All comments

  • vcodey•270
    @v-codeyPosted over 2 years ago

    hey @nati-pi ,

    the problem with your solution is not hidden, you can also see there are issues. However I suggest some things that will probably fix it.

    • provide height: 28rem; & width: 13rem; in the .padd so that the button doesn't flow out
    • instead of setting button margin top set the p with a min-height of 11 to 14rem. ( the issue with btn margin-top here is that the button position is dependent on the text length if the text is more then the button will not be aligned with each other).
    • in media queries set body height to 100%
    • remove container height & width and set border-radius with overflow hidden on container. In that way you wont have to set individually for every card

    keep learning happy coding

    Marked as helpful
    0
  • vcodey•270
    @v-codeyPosted over 2 years ago

    hey @BlackSheldt congratulations on completing your first challenge.

    there are some issues with your design.

    • using pc.css i.e. media query for bigger screen was not that necessary for this challenge.
    • however % as units works not that great at times, I suggest using px or rem.

    overall you did good.

    keep learning happy coding 👍

    0
  • vcodey•270
    @v-codeyPosted over 2 years ago

    Hey @vijay0609,

    Great Job on the challenge. Very close to the provided design. kudos

    however there are somethings which i would like to mention

    • although this challenge requires minimum html, but instead of internal css its better practice to have separate css file and link that.
    • also try to use rem instead of px especially in width, heights and font-size.
    • position and transform worked really well in this challenge, you can also try flex-box in body it will give same results
    body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    hope its helpful for you. keep learning happy coding

    Marked as helpful
    0
  • vcodey•270
    @v-codeyPosted over 2 years ago

    Hello @PatelNikhil-08 ! Congratulations on completing this challenge

    There are a few suggestions I would like to give you

    • Add main tag inside body
    • Use padding where needed, instead of every sides(i.e. top, bottom, left, right) you can also use combo like top-bottom or left-right to make it more closer to provided design.
    • Its better not to remove the default code provided by frontend mentor like you have removed the link the a tag . Do not remove it, rather replace the div with footer
    • the body of the html should be like
    <body>
   <main class="container"> 
        <-- Your code -->
   </main>
<footer class="attribution">
   Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
   Coded by <a href="Your profile link"> your name </a>.
 </footer>
</body>

    I hope it was helpful, keep learning happy coding.

    0
  • vcodey•270
    @v-codeyPosted over 2 years ago

    hey @maestroeffect

    I reviewed your code you've done a good job just needed some tweak and use different technique. check your github repo.

    • you need to learn about DRY principle.
    • use root pseudo selector
    • using position with hard coded value of position left: 20rem ,top: 15rem to make card side by side is not very smart choice according to me.

    those were some of my observations, keep learning happy coding.

    Marked as helpful
    0
  • Brian Carlo Birondo•320
    @Briancarlo24Submitted over 2 years ago

    Please check my code. I believe I have improved with coding since I first started. I just want to know what you would have done differently with this challenge?

    QR code component solution

    2
    vcodey•270
    @v-codeyPosted over 2 years ago

    Hi @Briancarlo24, Really good job on the challenge, Just few things you may haven't done right

    • size of the card, font etc. is much bigger then the provided design
    • body background color isn't set
    • main container needs to white too, else its taking body background color.

    that was my few observations. Happy Coding

    Marked as helpful
    0
  • Flori•10
    @FloriMartinSubmitted over 2 years ago

    It was my first time at trying responsive desing. To be honest, I'm not quite sure how I made it worked. And I don't know why in the smallest resolution (using the dev tools of chrome) the image it's not in the middle. But it was fun anyways.

    QR Challenge, responsive card

    3
    vcodey•270
    @v-codeyPosted over 2 years ago

    hey @FloriMartin, Good job on your first challenge. I saw your code, there are few things I would like to mention

    • use main tag inside body see this solution for better understanding
    • instead of padding: 20px 20px 20px 20px - > padding: 20px will give same results. read more

    happy coding.

    Marked as helpful
    1
  • vcodey•270
    @v-codeyPosted over 2 years ago

    hey @SilverWings47, Good job on the challenge. my few observations

    • use of :root would make things easy for you. read more
    • setting width with help of rem or em or px would be better in this fixed sized card, because of % when the width shrinks the the image shrinks with it but not the card.
    • set attribution div to footer

    happy coding 👍

    1
  • darthTh0t•50
    @darthTh0tSubmitted over 2 years ago

    Hi there developers. First time doing this sort of challenge. I would appreciate your feedback and will definitely implement it in my future projects.

    QR Code challenge

    2
    vcodey•270
    @v-codeyPosted over 2 years ago

    hey @arnav-sahoo, Good job on your first challenge. I saw your source code, there are few things I would like to add.

    happy coding. 👍

    0
  • Muhamad Rizky•140
    @bodashideungSubmitted over 2 years ago

    Any feedback from you will help me a lot on my journey to become a web developer.

    qr qode card

    1
    vcodey•270
    @v-codeyPosted over 2 years ago

    hey @bodashideung, Excellent work done there. while submitting solution select tags like sass/scss etc. if you have used it in project.

    Marked as helpful
    0
  • vcodey•270
    @v-codeyPosted over 2 years ago

    hey @callmeog01, good work on this challenge there are some issues with the html , my browser is telling me this site is unsafe. so i reviewed the code and done some important changes . check out your github

    Marked as helpful
    1
  • Leonard Isaac•40
    @leoimeworeSubmitted over 2 years ago

    Feedback always wanted. I to read-up on the behavior of images in flex and went back to this task.

    Stats-Preview-Card

    2
    vcodey•270
    @v-codeyPosted over 2 years ago

    Hey @leoimewore, You did a good job.

    there are few things which you should looking out for e.g.

    • solution's dimensions should be nearby of the provided design. if you are having difficulties then look out for others solution website & compare with your design.
    • stick to the provided boilereplate. Try not to remove anything that's not commented out already.
    • add colors and fonts in the :root and use them with help of var( ).

    Check out this solution for any queries regarding this solution feel free to reach out. That all from my side, happy coding.

    Marked as helpful
    0