Submitted almost 2 years ago

Responsive Page built using HTML, CSS

Muralidhara Bhat KS• 90

@SlenderShield

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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?

Community feedback

Abhijit Shankhdhar• 320

@im-abhijit

Posted almost 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

Muralidhara Bhat KS• 90

@SlenderShield

Posted almost 2 years ago

@im-abhijit Thanks Abhijit.

Lucas 👾• 104,420

@correlucas

Posted almost 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

Please log in to post a comment

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