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