Frontend Mentor | Mobile-first-Qr-code-Scanner-Page coding challenge solution

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year ago

Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

I have some recommendations regarding your code that I believe will be of great interest to you.

Metadata 🗃️:

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. ⚠️

HTML 🏷️:

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

Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

Alt text 📷:

The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

If you want to learn more about the alt attribute, you can read this article. 📘.

CSS 🎨:

Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

The width: 100vw property in the body tag is not necessary. This will create a horizontal scrollbar on some devices.

Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

Avoid using position: absolute to center an element as it may result in overflow on some screen sizes. Instead, use the flexbox or grid layout for centering.

Using flexbox layout:
```
body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
```
Using grid layout:
```
body {
   min-height: 100vh;
   display: grid;
   place-content: center;
}
```
Get more insights on centering in CSS here here 📘.

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:
- Reset CSS
- "My Custom CSS Reset" by JoshWComeau

Please don't worry if the suggestions are long, they are only details. Above all, the project is done well👏. I hope those tips will help you! 👍

Happy coding!

Marked as helpful

Ankit Rajuji Waware• 150

@ankitwaware

Posted over 1 year ago

@MelvinAguilar Thanks For Your Suggestion , I will Use it.

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.
If your code has different sections that have a specific purpose like a navigation, article, sections or footer, it’s a good practice to enclose those parts with HTML5 landmarks. For example, you could use a <footer> tag to wrap a footer section.
The heading order is important in the html structure so try to always start your headings with an <h1> tag and then you can decrease by one if you need to use more heading in your html code.

CSS 🎨:

You can use grid or flexbox to center the content no matter the viewport size. Since I use grid to achieve such purpose, you can do the following:

body {
	min-height: 100vh;
        display: grid;
	align-items: center;
	justify-content: center;
}

As I said, you can use flexbox to center the content and it will work as well.

body {
	min-height: 100vh;
        display: flex;
	align-items: center;
	justify-content: center;
}

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

Happy <coding /> 😎!

Ankit Rajuji Waware• 150

@ankitwaware

Posted over 1 year ago

@frank-itachi Thanks for Suggestion , it will use it .

Jamel Issaoui• 100

@jamel123a

Posted over 1 year ago

u have so mush scrolll in mobile version

Ankit Rajuji Waware• 150

@ankitwaware

Posted over 1 year ago

oh , I forgot to make it responsive. Thanks for feedback @jamel123a .

Mobile-first-Qr-code-Scanner-Page

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community