Skip to content
Submitted about 2 months ago

Responsive QR Code challenge using HTML & CSS Flexbox

Ibraghim•60
@Soy-Ibrag
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?

Hard to say what I'm most proud of but If I had to choose one thing It would be the way I used Flexbox, It has been one of my biggest struggles so far and I think I did a good Job.

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

My biggest challenge was getting the dimensions and scales right for the different screen resolutions, the way I overcame this challenge was by simply inspecting the page and eyeballing the dimensions.

What specific areas of your project would you like help with?
  • HTML structure;
  • CSS Flexbox;
  • CSS Paddings & Margins.

Community feedback

  • Luqman (Luke)•180
    @luqmanx1998Posted about 2 months ago

    Hey there, great job on your first challenge ! It looks amazing, almost pixel perfect. Here are some suggestions :

    1. Although this is a very small card challenge, it might be a good idea practicing having descriptive class names ! For example, instead of using <div class="container">, you can try maybe using<div class="card">.

    2. I see that you've explicitly set your card's height and width. Perhaps instead of doing that, you should consider using max-height and max-width instead, as these properties allow your card to be responsive, so they can shrink and grow according to the screen size !.

    3. In your container div, there is actually no need to use display: flex and flex-direction: column. This is because both the h2 and p tag are block-level elements, meaning that they occupy the entire width of their container.

    Extra suggestions :

    Perhaps instead of defining margins for every element in your card, it might be easier to simply group them together by putting them in a div, for example, your h2 and p tag can go together in one div. After that, you can apply styling on this container, such as your margin-inline, and other margins. Also it might be a good idea to add padding to the card. This way you can define padding for all four corners of the card, and reduce the need to re-define margins repeatedly.

    Consider using rem and em units instead, as this also helps with responsiveness. Here's a video by Kevin Powell that's worth checking out on this !

    If you found this feedback helpful, feel free to leave me helpful remark and thumbs up ! Good luck on your next challenge !

    Marked as helpful
    0
    Ibraghim•60
    @Soy-IbragPosted about 2 months ago

    @luqmanx1998 Thanks for the useful tips and for taking your time to help me!

    0
  • Cristian-Souza•40
    @cristian-souzaPosted about 2 months ago

    Nesse trecho deixaria somente o height e não colocaria align-items: center; main{ width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }

    deixando o código assim main{ height: 100vh; display: flex; justify-content: center; flex-direction: column; }

    Marked as helpful
    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