Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
15

vcodey

@v-codeyIndia270 points

Just a newbie trying to explore possibilities in the world of web development.

Latest solutions

  • Responsive page Using Vanilla CSS & JS


    vcodey•270
    Submitted over 3 years ago

    2 comments
  • FEM-stats-preview-card


    vcodey•270
    Submitted over 3 years ago

    0 comments
  • CSS HTML


    vcodey•270
    Submitted over 3 years ago

    1 comment
  • Desktop-first-workflow Profile card


    vcodey•270
    Submitted over 3 years ago

    0 comments
  • mobile-kit QR code component


    vcodey•270
    Submitted over 3 years ago

    2 comments

Latest comments

  • nati•200
    @nati-pi
    Submitted over 3 years ago

    Responsive 3 column previewcard

    1
    vcodey•270
    @v-codey
    Posted over 3 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
  • Mateo Giraldo•10
    @BlackSheldt
    Submitted over 3 years ago

    Responsive using flex box

    3
    vcodey•270
    @v-codey
    Posted over 3 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 👍

  • vijay0609•90
    @vijay0609
    Submitted over 3 years ago

    qr code

    1
    vcodey•270
    @v-codey
    Posted over 3 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
  • Nikhil Patel•70
    @PatelNikhil-08
    Submitted over 3 years ago

    HTML, CSS, Flex

    2
    vcodey•270
    @v-codey
    Posted over 3 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>
    
    • For better understanding follow this link

    I hope it was helpful, keep learning happy coding.

  • Precious Omoh•30
    @maestroeffect
    Submitted over 3 years ago

    3-column preview card component solution using Html and CSS

    #angular#bootstrap#bulma#mysql#redux
    2
    vcodey•270
    @v-codey
    Posted over 3 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
  • Brian Carlo Birondo•320
    @Briancarlo24
    Submitted over 3 years ago

    QR code component solution

    2
    vcodey•270
    @v-codey
    Posted over 3 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
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub