@vanzasetia
Posted
Hi, Abirami! 👋
Alternative text should not be hyphenated like class names. It will be read by screen readers to humans. So, it should be in a readable format.
I recommend improving the alternative text by describing the destination or the purpose of the QR code.
I recommend adding width and height attributes to each image element. This way, browsers will know how much space the images require before they are loaded. As a result, it will prevent the layout shift.
You should use flexbox to position the card to the middle of the page instead of setting padding-top on the <body> element.
You don't need to specify width to the <h1> and <p>. You should control the line break by adjusting the padding of the card.
The card doesn't need width and height. It only needs max-width to prevent it from getting too large. For the height of it, let the content controls it.
I strongly recommend using a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell
I hope you find this useful. Happy coding! 😄
Marked as helpful
