@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
Metadata 🗃️:
- The
langattribute is used to declare the language of the webpage. Add thelangattribute to the<html>tag with the valueen.
-
The
viewportmeta tag is missing. theviewportmeta tag is used to control the layout of the page on mobile devices. Add theviewportmeta 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. ⚠️
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
altattribute. Thealtattribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS 🎨:
- To center an element vertically, you should use a height to its container. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.:
body { min-height: 100vh; }
- Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
320pxor20remto make sure that the component will have a maximum width of320pxon any device, also remove thewidthproperty with a percentage value.
CSS Reset 🔄:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
