Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social proof section solution

@upovibe

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Social proof section👨🏽‍💻

Technologies used 🚀✨

  • HTML🏗
  • CSS️🎨
  • JavaScript🏢

Features 🎯

  • Semantic Arrangement✨
  • Dynamic Animations🎭
  • Prettier Arrangement🌈

You can check me out

Ready to tag along on my coding escapades? Join my adventure, where I challenge projects here.

🌌 Feel free to add your opinion about any possible improvements to the code and accessibility. 🙃

Community feedback

@petritnuredini

Posted

Congratulations on completing your project! 🎉 It's great to see your dedication to improving your skills. Here are some recommendations for your code:

  1. HTML Structure:

    • Consider organizing your HTML code more semantically. Use appropriate tags like <header>, <footer>, and <article> where applicable to improve accessibility and SEO.
    • Make sure to close all tags properly to ensure valid HTML syntax.
  2. CSS Styling:

    • Utilize CSS preprocessors like Sass or LESS to streamline your styling process and make your code more maintainable.
    • Optimize your CSS by removing unnecessary repetitions and consolidating styles where possible. This will reduce code redundancy and improve performance.
  3. Responsive Design:

    • Test your layout on various devices and screen sizes to ensure consistent and optimal display across different platforms.
    • Consider using CSS Flexbox or Grid for more flexible and responsive layouts, especially for larger screens.
  4. Accessibility:

    • Ensure your website is accessible to all users, including those using assistive technologies. Use semantic HTML elements and provide alternative text for images.
    • Check the color contrast ratios to ensure readability for users with visual impairments.
  5. File Organization:

    • Maintain a clean and organized directory structure for your project files. Group related files together in folders like "css", "img", and "js" for better management.

Remember, continuous learning and improvement are key to becoming a better developer. Keep up the great work, and don't hesitate to explore new techniques and technologies to enhance your skills further! 💪

For more in-depth learning resources, consider checking out:

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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