Skip to content
Submitted 8 months ago

QR Code Component using CSS and HTML

KatherineMarlo•50
@KatherineMarlo
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?

I'm most proud of tackling most of the project independently, solving challenges without external help. Next time, I'd conduct thorough research before diving in, ensuring a stronger foundation for smoother progress.

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

I encountered challenges transitioning padding and design from mobile to desktop. Utilizing Google Inspect tools, I experimented through trial and error until discovering the optimal solution. This process allowed me to fine-tune the layout effectively and achieve the desired results

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

I'd appreciate guidance on ensuring this code adheres to best coding practices. Additionally, any insights or tips to enhance its efficiency and readability would be amazing.

Community feedback

  • Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Marlo, I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. For starters, the card size is the same on the phone and on desktop, there is no need for it to be in %, the width should be in px, and same as on the design, while the height should depend on the height of the content

    2. You should remove the margin on container, they dont do anything because the card is already centered by the body

    3. The figure tag is unnecessary because this image doesnt have a caption below it

    4. The text class should be called text-container, because its not referring to the element holding the text, but its parent

    I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job, and if you want to learn more mind-blowing tips on solving this challenge, I did actually make a blog post that shows how to properly do that, so if you are interested in learning more, here is the link for that:

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    Marked as helpful
    1
  • Moniruzzaman Monir•740
    @ad-monir2001Posted 8 months ago

    Wow you have done a good project with hard work. Keep coding. Have a nice future.

    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