Design comparison
Community feedback
- @cristi-20Posted 6 months ago
Great job, it looks great! One thing I would suggest doing different on this is instead of putting so many star images in the html you could do it like I did it with before pseudo class.
Marked as helpful1@xStephxPosted 6 months ago@cristi-20 thank you for your feedback! It looks good suggestion, but I did with that method, because it was easier for me. In future projects I'll try that method. If you have any other suggestions feel free to text me!
1 - @petritnurediniPosted 9 months ago
Congratulations on completing the Social Proof Section project! 🌟 Your dedication to enhancing your web development skills is impressive. Here are some best practices and suggestions to refine your project:
HTML Best Practices:
- Semantic HTML: Good job on structuring your HTML. Consider using
<section>
tags for different parts of your page for better semantic structure and accessibility. - Alt Attributes for Images: Ensure all images have descriptive alt attributes. This is crucial for accessibility and SEO. For example,
alt="Star icon for rating"
. - Heading Structure: Make sure your heading levels descend in order from
<h1>
to<h2>
,<h3>
, etc., to maintain a logical structure.
CSS Best Practices:
- Responsive Design: Great use of media queries for responsiveness. Continuously test on various devices for consistency.
- CSS Variables: You’ve used CSS variables effectively for colors and fonts. This is excellent for maintainability.
- Selector Specificity: Be mindful of overly specific selectors that can make your CSS difficult to override later. Keep it simple and scalable.
General Suggestions:
- Accessibility: Follow WCAG guidelines to ensure your site is accessible. Tools like axe Accessibility Checker can be helpful.
- Performance Optimization: Compress images and minify CSS to improve load times. TinyPNG and CSS Minifier are useful tools.
- Cross-Browser Testing: Test your site across different browsers to ensure compatibility and a consistent user experience.
Keep up the great work, and remember, each project is a step closer to mastering front-end development. Stay curious and keep experimenting! 💪
To learn more, you can visit:
- MDN Web Docs for comprehensive guides on HTML and CSS.
- W3Schools for more learning resources.
- Web Accessibility Initiative (WAI) for guidelines on web accessibility.
Marked as helpful1 - Semantic HTML: Good job on structuring your HTML. Consider using
- @Juan122113Posted 5 months ago
It look good! I liked because you stick to the design. But i found that in the mobile view, the feedback containers has a different margin top, that its not like in the design, maybe you do it for a purpose?
1@xStephxPosted 5 months ago@Juan122113 thank you for your feedback! Yeah I am doing like a design, about that margin top in the mobile view, I do it because it looks better for me, but maybe I will change. Thanks for suggestion. If you have any other suggestions feel free to text me!
1 - @BadGuitarist07Posted 10 months ago
Looks great, well done!
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