Design comparison
Solution retrospective
Next time, i would made more understandable website with better design
What challenges did you encounter, and how did you overcome them?I encounter challenges while making website responsive and overcome using flexbox and grid in css.
What specific areas of your project would you like help with?I like fully responsiveness in this website
Community feedback
- @burningbeattlePosted about 1 month ago
Semantic HTML:
Use <article> or <figure> for each card to enhance semantics. Provide descriptive alt text for images. Accessibility:
Ensure color contrasts meet WCAG standards. Make sure all interactive elements (if any) are keyboard navigable. Use ARIA roles only when necessary. Responsive Layout:
Adopt a mobile-first approach using min-width media queries. Test across various devices and screen sizes. Ensure consistent spacing and sizing across breakpoints. Code Structure:
Implement BEM naming conventions for better scalability. Consolidate repetitive CSS rules. Organize CSS for readability, possibly using preprocessors. Adherence to Design:
Ensure pixel-perfect accuracy in font sizes, spacing, and element dimensions. Implement design-specific interactivity like hover effects. Correct file path typos (assets instead of assests). Optimize font loading by using <link> instead of @import. Use relative units (rem, em) for better scalability. Add transitions and hover effects to improve user experience. By addressing these areas, your project will not only be more robust and maintainable but also provide a better user experience across different devices and for all users, including those relying on assistive technologies.
0@SunilBaghel002Posted about 1 month ago@burningbeattle thanks for your feedback i will try implement your advice/ideas in future project.
0
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