Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Html Css

kltsunetsukiā€¢ 10

@kltsunetsuki

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

QR code component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

Should I did something different? I feel that on the <p> tags there should be a easier solution. Thanks in advance

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @kltsunetsuki!

Your project looks great!

I have one suggestion for you to improve it even more:

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

šŸ“Œ Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

0
Osman Bayā€¢ 690

@osmanbay90

Posted

Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

Your HTML and CSS code look well-structured and organized. However, if you're looking to simplify the styling of the <p> tags within the .qr-code class, you can leverage CSS inheritance and avoid repeating the font-family and other properties for each <p> tag.

Consistency in Naming: Ensure consistency in naming conventions throughout your code. For example, you use both qr-wrapper and qr-code, which might confuse someone reading your code. Stick to one convention to keep things clear.

Optimize Font Loading: Instead of loading the font directly from Google Fonts within the CSS, consider importing it in the <head> section of your HTML using a <link> tag. This can improve page loading performance.

Accessibility: Always ensure your website is accessible to everyone, including those with disabilities. Make sure to add appropriate alt text to your images for screen reader users.

Responsive Design: While your CSS seems well-structured, ensure your design is fully responsive across different screen sizes and devices. Test your layout on various devices to ensure it looks good and functions properly everywhere.

Semantic HTML: While your HTML structure is generally good, always strive to use semantic HTML elements where appropriate. For instance, consider using <header>, <footer>, <main>, etc., if applicable to your content structure.

Comments: Adding comments to your code can help others (and yourself in the future) understand your thought process and the purpose of specific sections of code.

Validation: Validate your HTML and CSS to ensure they meet the standards set by the W3C. This can help catch any syntax errors or potential issues that might arise.

Modular CSS: Consider breaking down your CSS into smaller, reusable modules or using a preprocessor like Sass to keep your codebase more maintainable and scalable.

Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! šŸš€

0

Please log in to post a comment

Log in with GitHub
Discord logo

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