Skip to content
Submitted 3 months ago

QR Code Page using HTML and CSS including Flexbox

Shane William Miller•10
@TheOmegaFett
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 feel proud to accomplish my first project based on someone else's design. I feel I did a good job.

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

I couldn't get my card to appear in the centre of the screen at first until I set the body to nearly maximum viewport height.

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

If there is something I missed or could improve on, any redundant code or simpler method of achieving things would be helpful or any general feedback is also welcome.

Community feedback

  • Denisa Orlikova•80
    @denisaorlikova91Posted 3 months ago

    Even though placing your styles within a `` tag for the main content, however the <article> tag is not semantically correct. A better solution would be to use <div class="card"> and using .card selector in your CSS for styling. This makes both your HTML and CSS easier to understand, maintain and reuse.

    Although at first glance your solution might seem visually correct, at the closer look your paddings within the card are off. It's important to inspect the design in detail and calculate correct dimensions for all white space. Example: the card width is 320px, the QR img width is 288px. (320-288)/2=16 So the correct padding for your card is 16px. From here you can work out the white space between the rest of the elements within the card which is usually in multiples of the same number, in this case 16px. Don't forget to double check your font-sizes too. In this case the correct h1 size would be 22px.

    Overall a good job for a first project, though! It takes time to train your eye for all the details and to take up the habits that promote well readable and reausable code. Hope this feedback helps & good luck!

    Marked as helpful
    0
  • Kelvin Ariedi•80
    @Kelvin-AriediPosted 3 months ago

    Your design looks Perfect

    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