Skip to content
Submitted about 2 years ago

Responsive Page built using HTML, CSS

Muralidhara Bhat KS•90
@SlenderShield
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

What are you most proud of, and what would you do differently next time?

First Project in Frontend Mentor

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

CSS was tricky

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

NA

Community feedback

  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @SlenderShield , congratulations on completing this challenge and you did a great job

    its okay if our page is not looking like the exact solution but try to be as close to exact solution as possible , because challenges are designed in a way that you will learn new things with them

    you can set a min-height to your card as if you will test your code on a screen having height < 500 px , your image is getting cropped out you can have a look at my solution

    https://www.frontendmentor.io/solutions/qr-code-component-design-using-tailwind-and-flex-_iNIc3mlyH

    Marked as helpful
    1
    Muralidhara Bhat KS•90
    @SlenderShieldPosted about 2 years ago

    @im-abhijit Thanks Abhijit.

    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hi @SlenderShield, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    Reduce your code by removing unnecessary elements. The HTML structure is working but you can reduce at least 20% of your code by cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    <body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

    ✌️ I hope this helps you and 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