@Lescano713
Posted
Hi, your code looks great, but there are some areas where you can improve:
- HTML Structure: Consider using different semantic tags to group content based on its importance. For example:
<body>
<main> <!-- For important content -->
<section class="info-1"></section>
<section class="info-2"></section>
</main>
</body>
You can take a look at this article for more information on semantic HTML.
-
Responsive: You can use both min-width and max-width properties to adapt your container to different screen sizes. Consider that some devices have widths as small as 320px, so your container should adapt accordingly to ensure a good user experience on various devices.
-
Consolidated Vendor Prefixes: Removed redundant vendor prefixes for border-radius and filter properties. Modern browsers generally don’t need these prefixes.
-
Used Shorthand Properties: Simplified border-radius properties and other CSS rules.
-
Consistent Units: Made sure units like px and rem are used consistently for sizing and spacing.
-
Improved Readability: Organized and formatted the CSS for better readability and consistency.
These changes help keep your CSS more manageable and easier to maintain.
@AbdelmonemMarei
Posted
@Lescano713 I appreciate your feedback.
-
For HTML : I will read more about use of section and main instead of DIVs.
-
For CSS : I consider almost of your feedback but I don't recognize that there are devices that their screen width is less than 375 px.
