Submitted about 2 years ago

Using SASS for pre-procesor

Obhasa Tanto Yangkasa Putra• 200

@obhasa12

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

I'm very enthusiastic learning HTML and CSS today. 😤😤

Community feedback

Travolgi 🍕• 31,420

@denielden

Posted about 2 years ago

Hi Obhasa, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

add main tag and wrap the card for improve the Accessibility
also you can use article tag instead of a simple div to the container card for improve the Accessibility
use img element for the qr image instead of a styled div
remove all margin from .container and object classes
use flexbox to the body to center the card. Read here -> best flex guide
after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

Hope this help! Happy coding 😉

Marked as helpful

Obhasa Tanto Yangkasa Putra• 200

@obhasa12

Posted about 2 years ago

@denielden Hallo Deniel. Thank you for the feedback, I will improve my Accessibilty for the further. thank u for the flex reference. I will trying my best in the future 😁.....

Travolgi 🍕• 31,420

@denielden

Posted about 2 years ago

@obhasa12 you are welcome and keep it up :)

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hi Obhasa, congrats on completing this challenge!

You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code to improve the html markup/semantic:

The html structure is fine and works, but you can reduce at least 20% of your code 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 Image" >
 <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>

✌️ I hope this helps you and happy coding!

Marked as helpful

Obhasa Tanto Yangkasa Putra• 200

@obhasa12

Posted about 2 years ago

@correlucas Hallo Lucas. thank u for the feedback. I'll trying improve my simatic element skill in the future to become better. I'll try my best for using div and another components. Thankss I'll try my best....😁

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