Solution Social proof section

Community feedback

• 

  DesignJunkie•370

  @cristi-20Posted 8 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 helpful

  1

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 8 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
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 11 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 helpful

  1
• 

  Juan122113•90

  @Juan122113Posted 6 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

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 6 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
• 

  Ricardo Vargas•80

  @BadGuitarist07Posted 12 months ago

  Looks great, well done!

  0

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 12 months ago

  @BadGuitarist07 thanks!

  0