Social Proof Section Solution [Plain HTML + CSS, Flexbox and Grid]
Design comparison
Solution retrospective
Any feedback or suggestions on this solution are welcome. 😉
Community feedback
- @petritnurediniPosted 10 months ago
First off, congratulations on completing your project, Faruq! Your HTML and CSS skills are clearly demonstrated in this Social Proof Section. Here are some suggestions to further improve your work:
-
HTML Structure and Semantics:
- Use more semantic HTML tags. For instance, replace
<div>
tags with<article>
,<section>
, or<aside>
where appropriate for better readability and SEO. - Avoid using
<div>
for every element. Use<header>
,<footer>
,<nav>
, etc., where applicable.
- Use more semantic HTML tags. For instance, replace
-
CSS Improvements:
- Consistent Naming Convention: Stick to a consistent naming convention for CSS classes to enhance readability. For example, choose between kebab-case (
rating-container
) and camelCase (commentContainer
) and use it consistently.
- Consistent Naming Convention: Stick to a consistent naming convention for CSS classes to enhance readability. For example, choose between kebab-case (
-
Responsive Design:
- Implement responsive design using media queries to ensure your website looks good on all devices. You've done some of this, but ensure all elements scale well.
-
Accessibility:
- Alt Attributes: Good job using alt attributes in images. Make sure they are descriptive.
-
Performance:
- Optimize Images: Ensure images are optimized for the web to improve loading times.
-
Code Organization:
- Consider separating CSS into different files (modular CSS) for each component for better maintainability.
-
Further Learning Resources:
- HTML Semantics: MDN Web Docs
- CSS Best Practices: CSS Tricks Guide
- Responsive Web Design: A List Apart
Keep up the fantastic work! Your dedication is evident, and every project you complete is a step towards mastery. Excited to see your future projects!
Marked as helpful1 -
- @KorneyChervonenkoPosted 10 months ago
You remembered me about "flex-wrap: wrap". I should use it in next challenge. Thanks
0@faruqAbdulHakimPosted 10 months ago@KorneyChervonenko No problem, Keep the spirit!! 💫
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