Submitted over 1 year ago

Static page displaying QR code using html and css

ksdhee-dev• 10

@ksdhee-dev

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

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year ago

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

Metadata 🗃️:

The lang attribute is used to declare the language of the webpage. Add the lang attribute to the <html> tag with the value en.

The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

Add a title of the page. The <title> tag is used to specify the title of a web page, which is displayed in the browser's title bar or tab, and is also used by search engines as the title of a page in search results.

HTML 🏷️:

Wrap the page's whole main content in the <main> tag.

Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

I hope you find it useful! 😄

Happy coding!

Francisco Carrillo• 5,540

@frank-itachi

Posted over 1 year ago

Hello there 👋. You did a good job!

I have some suggestions about your code that might interest you.

HTML 📄:

Wrap the page's whole main content in the <main> tag.
The <title> tag is important and must be present on every website. Add the <title> tag to your HTML code. You can learn more about here.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy <coding /> 😎!

loganbriggs08• 210

@loganbriggs08

Posted over 1 year ago

Looks really good however you might want to make the full screen the correct colour instead of the top portion only, you could also then centre the QR code component again to make it even better. You might also want to use the same font provided by frontendmentor to make it even better again but apart from that it looks great!

:^)

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