Skip to content
Submitted almost 2 years ago

Mobile-first-Qr-code-Scanner-Page

Ankit Rajuji Waware•150
@ankitwaware
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, everyone! Just completed my first project of frontendmentor.io.

The project was very interesting.

  • Had some difficulties with centering the container.

Any feedback's and suggestions will be appreciated. Thanks.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years 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:

    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
    0
    Ankit Rajuji Waware•150
    @ankitwawarePosted almost 2 years ago

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

    0
  • Francisco Carrillo•5,540
    @frank-itachiPosted almost 2 years 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 /> 😎!

    1
    Ankit Rajuji Waware•150
    @ankitwawarePosted almost 2 years ago

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

    0
  • Jamel Issaoui•100
    @jamel123aPosted almost 2 years ago

    u have so mush scrolll in mobile version

    1
    Ankit Rajuji Waware•150
    @ankitwawarePosted almost 2 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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