Skip to content
Submitted 9 months ago

Html Css

kltsunetsukiā€¢10
@kltsunetsuki
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

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,310
    @danielmrz-devPosted 9 months ago

    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
    @osmanbay90Posted 9 months ago

    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

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