Design comparison
Solution retrospective
My development speed is increasing with every challenge.
What challenges did you encounter, and how did you overcome them?I have not encountered any challenges.
What specific areas of your project would you like help with?Any feedback is highly appreciated
Community feedback
- @burningbeattlePosted 2 months ago
There are a few adjustments that can be made to improve the code's structure, design, and accessibility. Here’s a breakdown of the changes:
- HTML Code Adjustments Semantic Structure: The structure is already mostly semantic, but we can improve it slightly by wrapping the h2, paragraph text, and metadata (like the date) in meaningful semantic elements like article, section, etc.
Alt Text for Images: The alt text for the avatar image is empty. This should describe the image for accessibility purposes.
CSS Code Improvements Box Shadow: The current shadow looks too sharp. Soften the shadow to improve the card’s visual appeal.
Responsive Design Tweaks: Some additional responsive adjustments could be made, especially with the padding and font sizes on smaller screens.
Flexbox Adjustments: Centering the entire body with flexbox works, but to prevent any accidental overflow, it's best to explicitly set margins and widths.
Key Improvement Box-Shadow Soften: The shadow is now less harsh, which gives the card a more modern feel. Hover Effect: Added a subtle hover effect that moves the card up slightly when hovered, making the UI feel more interactive. Responsive Design: Improved the padding and font size for smaller screens to ensure readability and layout don’t break. Improved Avatar Styling: Ensured the avatar is circular and always aligned correctly.
General Suggestions: Accessibility: Consider adding aria-labels to key elements (like the image and buttons), so that screen readers can properly describe them. Lazy Loading: Implement lazy loading on the images (loading="lazy") to improve performance on slower networks
Marked as helpful0
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