Skip to content
Submitted about 1 year ago

QR code component challenge with Html & Css

Houssame•20
@houssamedev
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?

it was the first time to write code , i was happy , but i will improve the code.

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

responsiveness , learning responsive design techniques.

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

improve Accessibility

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • Use min-height instead of height for flexibility across devices and screen orientations. Fixed heights may cause issues, especially on mobile devices in landscape mode, try checking your solution on a mobile device in landscape mode, and you'll notice how the component height is constrained, and the background might not apply correctly.
    • Consider using max-width instead of width for your component's width. This way, it will resize when the screen is smaller.
    • In larger projects, adopting a mobile-first approach when working with media queries can be beneficial.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    1

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