Skip to content
OverviewSolutions
4
Comments
1
P

Alex

@aseptimu60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • P
    Alex•60
    @aseptimu

    A good solution using relative units of measurement (vh and %). It is also an excellent solution to use adaptive layout for devices with a small screen.

    Remarks

    1. Semantic HTML: Consider using more semantic HTML5 elements to structure your content. For example, the <main> element can be used to wrap the main content of the page.
    2. Using the center tag is not recommended. It is better to set text-align: center for the .main class
    3. Google Fonts Link: You've added a link to Google Fonts for the "Outfit" font but haven't correctly implemented the <link> tag. It should be something like this: <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
    4. Image Alternative Text: It's good practice to include an alt attribute in your <img> tags. This improves accessibility for users who rely on screen readers and also serves as a placeholder if the image fails to load. <img src="image-qr-code.png" alt="QR Code">
    5. Font Family Declaration: Your CSS for the font-family doesn't properly declare fallback font options. It's a good practice to include a generic font family in case the primary font isn't available. For example: font-family: 'Outfit', sans-serif;
    6. Font Weight and Style: You've set font-weight and font-style in a general selector but used values (400, 700) that are not valid in this context. CSS expects a single value or a value per declaration, not a comma-separated list in this case. font-weight: 400; /* Separate declaration for bold text where needed */
    7. CSS Efficiency: The .main img and media query styles for .main img repeat some properties that don't change (border-radius and padding-bottom). It's more efficient to declare such properties once outside the media query if they don't need to be overridden.

    General Suggestions

    Validation: Use a service like the W3C Validator to check your HTML and CSS for errors or warnings that could affect cross-browser compatibility and performance.

    Marked as helpful