Skip to content
Submitted 8 months ago

QR code

Apharaohh•70
@Apharaohh
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 was super excited to be able to tackle this myself and really be able to understand using the least amount of code in html. No unnecessary here. I was super hyped to know that I completed this during my lunch break.

I would allocate a bit more time, maybe rewrite all the HTML myself so that I can figure it out quicker in terms of placement and tags being used.

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

My biggest issue I encountered was sizing, and the box model. I was unable to get the actual img to center perfect and had to google how to line it up in the center.

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

I would love to figure out how my code can be optimized and how I can do something better. For example, using % instead of px so that the ability to make it responsive would be great.

Community feedback

  • Harsh Kumar Dwivedi•740
    @Harsh-Kumar-DwivediPosted 8 months ago

    Hi @Apharaohh ,

    I think you can make markup more semantic by using <main> element for <div class="card"> and <footer> element for <div class="attribution">. This way you can style them without giving them class, if you want. This will improve accessibility.

    Marked as helpful
    0
  • Harsh Kumar Dwivedi•740
    @Harsh-Kumar-DwivediPosted 8 months ago

    For <body>, It may be better to set height property to 100vh.

    For card class, you can use Flexbox Layout. It will make things easier.

    You may refer following:-

    1.Flexbox - https://www.w3schools.com/css/css3_flexbox.asp 2.CSS Units - https://www.w3schools.com/cssref/css_units.php

    Hope, all my suggestions were helpful !

    Happy Coding !

    0
  • Harsh Kumar Dwivedi•740
    @Harsh-Kumar-DwivediPosted 8 months ago

    Also, In place of <h2> you can use <h1> and resize the font using CSS. This will further enhance accessibility.

    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