Can I Create This Tricky Animated CSS Review Card?

Review widgets are one of the most common elements you will add to any ecommerce page which is why it is important to be able to create them well. In this video I attempt to copy a design for a review widget while also adding fancy animations to the widget. This is my first time attempting to solve this issue so you can see my thought process and how I go about debugging and solving this problem.

📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/advanced-rating-widget-css Reference Design: https://uidesigndaily.com/posts/figma-reviews-day-1573

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

00:00 - Introduction 00:42 - Setup 01:07 - Planning 03:18 - Card CSS 05:32 - Card Header 16:04 - Search Bar 25:59 - Review Section HTML/CSS 37:39 - Review Button 40:34 - JavaScript Review Rendering 59:37 - Animations

#CSS #WDS #LiveCoding ... https://www.youtube.com/watch?v=VPVu1148TU0