Submitted almost 2 years ago

QR Code HTML & CSS

Cupang5• 90

@Cupskrrt

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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,795

@vanzasetia

Posted almost 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. 🙂)

Cupang5• 90

@Cupskrrt

Posted almost 2 years ago

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

Ouattara• 200

@Kaji17

Posted almost 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

Cupang5• 90

@Cupskrrt

Posted almost 2 years ago

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

PhoenixDev22• 16,950

@PhoenixDev22

Posted almost 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.

Cupang5• 90

@Cupskrrt

Posted almost 2 years ago

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

Ouattara• 200

@Kaji17

Posted almost 2 years ago

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

PhoenixDev22• 16,950

@PhoenixDev22

Posted almost 2 years ago

@Cupskrrt Happy coding!

Please log in to post a comment

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