Issues in index.html and 404.html file

In index.html (i) Meta Tags for Viewport: It have two tags:

This is redundant. It should be merged :

(ii) Link Tags for External CSS: It is loading the Leaflet CSS twice:

we should remove the redundant one, perhaps keeping only the first one.

(iii) Unnecessary Empty alt Attributes: In these images, you are using empty alt attributes:

Even if the images are decorative, you need to provide more context for accessibility (or use aria-hidden="true" if they are purely decorative). For instance:

(iv) Non-functional Links: You have an empty link reference in this line: Home

It’s better to link it to index.html or use a # placeholder if the page isn’t implemented yet: Home

(v) Incorrect Form Submission Method: Your form has an action="POST":

action should be a URL or endpoint, not a method. Use method="POST" instead: (vi) Map Element Missing Content: The #map div is empty and no script to initialize the Leaflet map is included. Make sure you include the necessary JavaScript to initialize the map after including Leaflet’s script. (vii) Font Preload Optimization: You're preconnecting to Google Fonts but haven’t included any preloading for performance optimization. You might want to preload critical fonts like so: (viii) Incorrect Favicon MIME Type: Your favicon link has a MIME type type="image/x-icon", which is considered outdated for PNG favicons. If your favicon is PNG, change it to: (ix) Improve ARIA Accessibility for Hamburger Menu: Add ARIA attributes for better accessibility when handling the hamburger menu. For example, you can mark it as a button for screen readers:

unfold_more

And update the aria-expanded attribute when the sidebar opens. (x) Inline JavaScript in HTML: You have JavaScript embedded directly in HTML. It’s better to move inline scripts to separate files. For example: The onclick event could be added using JavaScript, separating the structure from behavior. (xi) 404 Link: The Discord link leads to a 404.html page, which might not be the intended functionality: If this is meant to be a placeholder, you can add a comment indicating that it's under construction. Otherwise, direct it to the proper link. (xii) Image File Paths: Some image paths seem to be root-relative, like:

If these images are not located at the root of your project, this might break the image. Either update the paths or ensure the images are in the right location. Inside pages folder 404.html (i) Duplicate Viewport Meta Tags: You have two viewport meta tags: Remove the duplicate and keep only one, like this: (ii) Font Loading Issue The Google Fonts URL you used for "Sometype Mono" may not be valid: Check if the font family name is correctly spelled. "Sometype Mono" might not exist or may need a different URL. Replace it with a valid font like "Roboto Mono" if necessary: (iii) Table Layout for Navigation (Not Responsive) Using a for the navbar layout is not considered good practice, especially for responsive design. You should consider using flexbox or grid to handle the navbar layout. Replace the table layout with something like this: (iv) Missing alt Attribute for Footer Icons The images used in the footer for links do not have proper alt attributes:

Add meaningful alt text for accessibility:

(v) Inconsistent Dark Mode Button Display In your code, you use two buttons for toggling between light and dark themes: If you want to smoothly toggle between light and dark modes, ensure that your JavaScript handles hiding and showing the buttons properly, so users can easily switch between themes. #GSSoC '24 Extended Contributor Kindly assigned this issue to me under 𝗚𝗦𝗦𝗼𝗖 '𝟮𝟰 𝗘𝘅𝘁𝗲𝗻𝗱𝗲𝗱?

github-actions[bot] commented 1 day ago

👋 Thank you for raising an issue! We appreciate your effort in helping us improve. Our CodeIt team will review it shortly. Stay tuned!

Surya-Pratap-Dash commented 1 day ago

@multiverseweb Please assigned this issue to me

multiverseweb / CodeIt

Issues in index.html and 404.html file #228