Frontend Mentor | Sample Qr Design coding challenge solution

Community feedback

@MelvinAguilar

Posted over 1 year ago

Hi @varunjvk 👋, good job on completing this challenge! 🎉

I have some suggestions you might consider to improve your code:

Your page is broken on mobile devices, Add these lines in the <head> to display the site properly based on the user's device:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Use the <main> tag to wrap all the main content in your solution rather than <div>.
To make alternative texts more useful, add descriptive text to the alt attribute of the QR image to explain what the QR image does.
Try to use more descriptive names for your classes. I suggest you learn the BEM naming convention standard for CSS class names because increases the readability of front-end code and provides a modular structure. For example, the classes "p1" and "p2" do not say what they are.
Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
Use an h1 tag for your solution. The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page.

<h1>Improve your front-end skills by building projects</h1>

I hope those tips will help you! 👍

Good job, and happy coding! 😁

Marked as helpful

@VCarames

Posted over 1 year ago

Hey there! 👋 Here are some suggestions to help improve your code:

To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

Change width to max-width in your component’s container to make it responsive.

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

Sample Qr Design