Design comparison
SolutionDesign
Community feedback
- @mofadaPosted 4 months ago
Your code is generally well-structured and follows good practices. Here are some specific points of feedback:
Positives:
- Semantic HTML: Use of semantic tags like
<main>
,<h1>
, and<p>
helps improve readability and accessibility. - Responsive Design: The layout adapts to different screen sizes using CSS classes and conditional rendering (
custom:hidden
,custom1:block
). - External Resources: Properly linked external stylesheets and fonts, enhancing the visual appeal.
- Consistent Styling: Utilizes consistent styling for different components, making the design cohesive.
- Alt Attributes: Provides
alt
attributes for images, which is good for accessibility.
Improvements:
- Class Naming: While Tailwind CSS class names are used effectively, custom class names like
custom1
,custom2
, etc., are not descriptive. More meaningful names would improve maintainability. - Grid Layout: Inline styles for grid placement (
style="grid-column: 1; grid-row: 2"
) could be moved to CSS classes for better separation of concerns. - Typography Scaling: The text sizes are hardcoded (
text-15
,text-20
, etc.). Consider using responsive text sizing classes from Tailwind CSS (text-sm
,text-lg
, etc.) for better scalability across devices. - Repetitive Code: There is some repetition in the structure of the cards. Consider using a template system or a JavaScript framework to reduce redundancy.
- Accessibility Enhancements: Adding ARIA roles and properties where necessary can further enhance accessibility.
- Performance Optimization: Preconnecting to Google Fonts is good, but loading fonts asynchronously (
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" media="print" onload="this.onload=null;this.removeAttribute('media');">
) can improve page load performance.
0 - Semantic HTML: Use of semantic tags like
Please log in to post a comment
Log in with GitHubJoin 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