Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Mentor - QR code component solution

@Brahimboutajbirine

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Bader Idris• 2,900

@Bader-Idris

Posted

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

1

@Brahimboutajbirine

Posted

Thank you, @Bader-Idris, for sharing your thoughts! I'm glad to hear that you find transform properties in CSS interesting and useful. While transform can be a great option for centering elements, I personally prefer using flexbox for its flexibility and responsiveness in creating modern web layouts. Flexbox makes it easy to create dynamic and adaptable designs that can adapt to various screen sizes and orientations. Thank you for your input, and I appreciate your suggestion!

1
Bader Idris• 2,900

@Bader-Idris

Posted

@Brahimboutajbirine if you wanna practice Flexbox, I prefer learning from both flexboxFroggy and flexboxZombies, they're grateful for educational purposes

1

@Brahimboutajbirine

Posted

Hi @Bader-Idris, thank you for your comment! I appreciate your suggestion to practice Flexbox using flexboxFroggy and flexboxZombies. They are indeed great resources for learning and improving my skills with Flexbox. I will definitely check them out. Thanks again for the recommendation!

1
Pablo Alvarado• 60

@paalvarador

Posted

Hi @Brahimboutajbirine

I review your code and I think this is clean and flexible. I think that you must to use main and footer tags for doing your app semantic HTML.

It is accessible and it does the goal,

Also, your code is well-structured, readable and reusable. And congrats for use a JavaScript library in the basic project.

Regards, Pablo

1

@Brahimboutajbirine

Posted

Hi @paalvarador,

Thank you for your review! I appreciate your feedback and I'm glad to hear that you found my code clean, flexible, and accessible. I took your suggestion and added main and footer tags to ensure that the HTML is semantically structured.

I'm also glad to hear that you found my code well-structured, readable, and reusable. I strive to write code that is easy to understand and maintain.

Again, thank you for your review and feedback. I'll keep your suggestions in mind for future projects.

Best regards, Brahim Boutajbirine

0

Please log in to post a comment

Log in with GitHub
Discord logo

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