Skip to content
Submitted about 2 years ago

QR Code HTML & CSS

Cupang5•90
@Cupskrrt
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

how to make the screen responsive when reducing the size of screen? what is the best practice to making a responsive webpage?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi! 👋

    Congratulations on finishing this challenge! 👏 The HTML is good! 👍

    You have received some incredible feedback from the others. So, I am just gonna give you some resources.

    I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

    I hope this helps! Happy coding!

    (Salam kenal! Saya dari Lampung. 🙂)

    0
    Cupang5•90
    @CupskrrtPosted about 2 years ago

    @vanzasetia Hi! vanza thank your for your feedback, especially the youtube resource for me to learn (Salam dari Jakarta)

    1
  • Ouattara•200
    @Kaji17Posted about 2 years ago

    Hi @Cupskrrt congratulation for your first submit, i give some advice for you improve your improve your code :)

    • you can nesting your class="content" of the card qr code in the tag main
    <main class='content'>
     ...
</main>

    • please rename your file .css to style.css because we use the name index to refer to the main html page

    • for display your card qr code center you can use the poperty in your css

    body{
   position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.content{
   background-color: white;
    width: 250px;
    height: 430px;
    border-radius: 15px;
    margin: 10px auto;
}

    Good luck

    0
    Cupang5•90
    @CupskrrtPosted about 2 years ago

    @Kaji17 Hi! kaji, thank you for your advice, i'm going to try your advice on reworking this code

    0
  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hello Cupang5,

    Congratulation on finishing your first frontend mentor challenge. Excellent work! I have some suggestions regarding your solution:

    • The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. The alternate text should never be hyphenated , it should be human readable.
    • Consider using rem for font size , it' not recommended to use px for font size as absolute units don’t scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.
    • In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser. Then remove the large margins.
    • height: 430px; It's not recommended to set fixed height to component, you almost never want to set it. let the content of the component define the height.
    • width: 250px; an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.
    • you should never change the root font size because it harms accessibility.

    Hopefully this feedback helps.

    0
    Cupang5•90
    @CupskrrtPosted about 2 years ago

    @PhoenixDev22 Hi! Phoenix, thank you for your advice, i'm going to try your advice on reworking this code

    1
    Ouattara•200
    @Kaji17Posted about 2 years ago

    @PhoenixDev22 thanks To completed my feedback i follow your advice and i try to give them that i know

    1
    PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    @Cupskrrt Happy coding!

    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