Skip to content
OverviewSolutions
2
Comments
2

Satyaki Pal

@Versatile2820 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

  • Blog preview card using HTML and CSS

    Satyaki Pal•20
    Submitted 10 months ago
    2 comments

  • Static webpage using HTML and Basic CSS properties

    Satyaki Pal•20
    Submitted 10 months ago

    While I’m satisfied with the progress on this project, there are a few areas where I could use further guidance:

    Cross-browser Compatibility: Ensuring the project looks and functions consistently across all browsers, especially on older versions of Internet Explorer and mobile browsers, remains a challenge. Any tips on handling browser-specific bugs or testing methodologies would be greatly appreciated.

    Responsive Design: Although the layout adapts well to most screen sizes, I’d appreciate feedback on how to further refine the responsiveness, especially on very small or very large devices.

    Accessibility: I’m striving to make this project more accessible for users with disabilities. Any recommendations for improving accessibility, would be helpful.

    1 comment

Latest comments

  • Satyaki Pal•20
    @Versatile28
    1. Google Fonts Not Imported: The font-family: 'Figtree' is defined but the Google Fonts import is missing. You need to add this in the <head> section:
    <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;500;700;900&display=swap" rel="stylesheet">

    1. Image Border Radius Not Round Enough: The image's border-radius property needs adjustment to make it fully round.

    2. Alt Text Missing for Avatar Image: The image for the avatar has no alt attribute, which is important for accessibility. Add a descriptive alt tag:

    <img src="assets/images/image-avatar.webp" alt="Profile picture of Greg Hooper">
    1. Missing <main> Element: For better accessibility, wrap the card in a <main> tag:
    <main class="container"> <!-- Card content --> </main>
  • Satyaki Pal•20
    @Versatile28

    Semantic HTML Use of Semantic Elements: The code uses <div> elements for the main structure, but it could be improved by incorporating more semantic HTML elements. For instance: Use a <main> tag to wrap the main content. Consider using <section> or <article> for the content that describes the QR code.