[ad_1]
https://i.ytimg.com/vi/VPVu1148TU0/hqdefault.jpg
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
Original source
46 responses to “Can I Create This Tricky Animated CSS Review Card?”
Thank you so much !
Very Nice ❤
I thought I'm the only one in this world who randomly type "asdfasdf" @20:05 😂
I'm not used to this kind of content on your channel bro, honestly didn't like the video at all. But thank u for your effort.
NICE!!
May I make a request?
I came across a webflow parallax effect (using cursor) and it STUMPED me.
34:49 "border: var(–border-width) solid #EFB153;"
did you just say hate for height 🙂
You are late. I needed this two months back.
Bro this is the process I need to follow to follow a design do u have any figma tutorial too. Love this vid
To remember the order for the padding and margin think of a clock: it stars at the top 🕛, right🕒, bottom🕕, left🕘.
Sir Can you Make a video about Caching data in mongodb?
You can fix the jankiness by giving the number a predefined width to work with, and even better, with a predefined width and a monospace font.
This is when using a Framework like Svelte makes things easier for us.
May I ask why you add SVGs like that instead of using the img tag?
Lmao he just switched to css-grid in the review instead of just creating a last div with a fixed width. Respect.
Nice. Isn't there a progress element for the bar?
Your videos are awesome. As a beginner, I believe i will one day get to your level of understanding and logical thought. That said I dont think i will ever be as fast as you. You fly through this code. Damn.
Just thank you
Font family should be Monospace so the animation will look cool and stable
Not so long ago I had to do something pretty similar on a project. My only regret being that I didn't use the <progress> html element for it since I feared I wouldn't be able to style it on every browser but I'm pretty sure this is no longer an issue if you use the right selectors.
Great job. FYI, medium is 500, semi bold is 600, and bold is 700
i think to make animation just set width by default 0%, and use setTimeOut for 1ms to change real width %
How do you get the ‘x’ in the input to clear the text? Is it there by default?
@web_dev_simplified please a short course on how to make image responsive. When I use background size cover when I compute for a small screens thé image doesn't fit well . WE dont see all thé image but juste à side.
It will be really helpful to me.
Also a course on how to integrate PayPal cart chekout with PHP.
@web dev simplified please a short course on how to make image responsive. When I use background size cover when I compute for a small screens thé image doesn't fit well . WE dont see all thé image but juste à side.
It will be really helpful to me.
Also a course on how to integrate PayPal cart chekout with PHP.
@webdevsimplified please a short course on how to make image responsive. When I use background size cover when I compute for a small screens thé image doesn't fit well . WE dont see all thé image but juste à side.
It will be really helpful to me.
Also a course on how to integrate PayPal cart chekout with PHP.
waiting for you to post a coupon so i can buy all of your courses at once and support a great YTuber😂🤓
click on "inspect" on Figma and you'll have all the css corresponding to your selection
Thanks for this when i really need it
Speed is commendable when you write js. I am a front-end developer and I have learned CSS and JavaScript but I think I need to update my JavaScript knowledge again. For CSS I think I'm ok thanks to CSS battle dev. Is there anything to practice JavaScript daily to learn more on optimization/best practices etc.??
Nice one kyle, will you do a live build one day, will love it 😁👍
You could have done the animation in the CSS using:
transform: scaleX(whatever);
transition: transform 500ms ease-in-out;
Good to see the whole process.
For the search bar, I'd probably use a CSS style on the input element itself that adds the icon through something like this: background: url('magnifying-glass.svg') no-repeat left; padding-left: 16px;
That way you'd have it inside of the actual input. I guess you could also work with absolute positions and some fancy selectors.
.search-bar { position: relative; }
.search-input-icon { position: absolute; left: 10px; }
.search-input-icon + .search-input { padding-left: 16px; }
The specific padding can be determined with calc and some variables if necessary.
40:15 nice
Please make another video on full stack application with MERN stack
very nice!
What extension are you using?
Just amazing. Thank you. Really shows I am oblivious to JavaScript
every project thumbnail "Can i create This…?" then he ended up making like a champ 😄😄
Damn, you are really creating a ton of stuff at the moment!
Are you planning on making a full stack React project with prisma anytime soon?
great
Big thumbs up bro. For right time exactly what I want now..
Bruhhh!!! Please make a video "admin panel" In React js.
first comment 😛