Skip to content
Submitted almost 3 years ago

Mobile-First with CSS Grid

Jill Spencer•30
@jill-spencer
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my first front-end mentor project. In the earlier phases of learning. Any feedback is appreciated. Thank You

Community feedback

  • Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    Hi Jill, I took some time to look at your solution and you did a great job!

    Also I have some tips for improving your code:

    • add main tag and wrap the card for Accessibility
    • add some box-shadow to the container also to show that its a card.

    Hope this help and happy coding!

    Marked as helpful
    1
  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    I hope you find this helpful

    Marked as helpful
    0
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hello Jill Spencer ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Warp your card content around the main tag Ex: 👇
    <body>
<main class="container">
*all you content here*
</main>
</body>

    • Reduce the color for the p tag and the color for that and the title is given in the style-guide pls refer that

    • add box-shadow to the card it is very subtle so check that ,Check my article on accessibility issues

    happy Coding😀

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord