 All right, so I'm really excited for this video where I am here to challenge somebody to a multiple CSS challenges. And it's someone who normally doesn't dive so much into the world of front end development. So maybe more comfortable with the backend, JavaScript and all of that. So we'll see how they can do it. And this is where that's it right here. Why don't you let us know a little bit about yourself before we jump into the challenges. Sure, thanks Kevin. Happy to be here. A really big fan of your channel, first of all. Kudos to the awesome CSS videos that you have. So my name is Rajat. I'm from India and I'm a software developer. I'm a full stack software developer. I had been working with Microsoft in the past and now right now I am in a high frequency trading firm. I have been running a YouTube channel of about like data structures, algorithms, coding, interviews, you know, because I had been doing these problem solving kind of things for almost, you can say eight years. So yeah, I have, I really love this and I have a lot of stuff related to that. So yeah. And we actually have a video on my channel where in Kevin kind of build or, you know, learn those problem solving skills for me. And the link to the channel is just down below. So make sure you go and check it out. If you want any content pretty much other than CSS. So it's a great channel. Definitely recommend you go and check it out. And yeah, I'm really excited for this. I think it'd be a lot of fun. So let's go and jump in and see those challenges. So let's see. So we have centered the smiley face below both vertically and horizontally. Okay, I can see that we have this smiley face over here and we have to do select. I think this is the CSS 101 question, right? If you want to test if someone knows CSS, this is the first thing that you will ask. Yeah. I, I hopefully like, hopefully I know the answer to this and I don't think we need this JavaScript. So I'm, I'll basically just close this down. So I think we have a bunch of things I don't have to write over here. That is like, you have added for probably you define the screen, but this is where the main stuff goes, I think. Yeah, exactly. Yeah. So can I, can I use DevTools over here? Yeah, you can. It is a bit weird sometimes in CodePen when you open the DevTools is cause it's an iframe, but you can get into and find what you need. Yeah. Okay. Yeah. I basically just wanted to know how it's looking. So, okay. So we can see that Dev is taking the full width over here and the class name is center me. That makes sense. And so the thing is the width is already taking 100% because that's how they work. They fill in the full parent. If you explicitly do not mention the width. So yeah, that's fine, but the text over here, it's starting from the left hand side and because that is the default behavior. So one thing that we can do is in the content, we can say text align center, right? And hopefully what it would be, yeah, exactly. So this takes care that the text inside the Dev is at the center. Now we have done the problem 50%. The next 50% is the height, right? Now I feel that the proper way to do that would be, so let's see where is, it's okay. So here is the content Dev class and here is the center me, right? So one thing that we can do is basically, you know, make this content as a Flexbox container. So if I do that, I'll quickly explain why I'm doing that. But once I make that a Flex container, okay, so we lose this thing, which was working initially, now it's not working. And the reason for that is probably, you know, because now this is a Flex item, now it's taking the complete height, but now the width is limited to whatever the content is because Flex item, that's how they work. They start on, you know, because the default direction is 0, so they kind of stack in the horizontal direction as a rule. So this can be fixed. I think we can do something like, let's see, we can say, Flex, okay. So I think I need to write dot center me, that's where the next code should go. What I can do is basically say that the Flex basis is 100%, right? And now that is working. Now I'm saying that you have to take extra space if it's available. And that is working. Now to fix the alignment, probably what I can do is, so I think we have, so in the main axis, we have justify content in the other axis, we have something like align items or aligned content. I'm always confused between that. So I'll use one and if it doesn't work, I will quickly change. So I think the align content is not working because the height is like really stressed because of that it's not working. That, let me see what we can do. I think the other way is to actually say that the justify content is also, we can get rid of the text line. We can say justify content as center. So that even if we have one thing, it goes to the center and let me just say what's happening right now. So one nice thing with the DevTools is we do have some Flex inspectors and stuff now, but so there, yeah, that's working now. Yeah, yeah, because I was saying that, you have to grow 100% so that's why it was not working. So align content is not working. Let me see if it's align items. Yeah, there you go. So I always get confused between align items and align content, but I think the good thing is, if you want to center anything, these two lines always make it work. Like this is basically saying that whatever items you have, you have to place them center in your main axis since it was flex row, it's basically horizontally putting the smiley face into the center. And this is like in the cross diagonal axis, like what do you, where do you want to align your items in that axis? So yeah. I'm writing, I write CSS all day long every day and I still mix up align items and align content. So don't feel bad. Yeah, this happens. Yeah, it's also been made more, because align content with flex you don't use very often. It's only if you have a flex wrap and there's other stuff happening. Yeah, you have multiple rows kind of thing. Yeah. Then exactly, yeah. Then use it, but then we also have grid now and with grid, you'll probably use align content a lot. So it just makes it even more confusing a little bit there, but yeah. Awesome. Yeah, I think I read about the grid, like I think one year back, but at that point of time probably, I didn't use it much because I think when I, you can I use.com at that point of time, it was not widely adapted probably, but I think now it's like really, it makes life easy and it's like the next thing. Challenge two. All right, so we have to create three equal columns inside the dot content class and I think the dot content is the parent. Yeah, so basically it's holding. Okay, what does it have? It has a div. Can I make this a bit bigger and this a bit? Yeah, probably this is better. All right, so I have to create three columns inside the content class. And as we can see over here, we have like this is one div. It's having a heading and a paragraph and we have three such divs and what we want is kind of like a newspaper or magazine kind of thing wherein we have three equal columns on the screen. So of course, the first intuition is to use flex, flex column actually, so that, you know, no, actually flex row makes sense. Yeah, so if I make it a flex, all the divs will go side by side and there we go, we have something but I think they're not of equal width. As you can see the middle div, you have I think put a larger text as compared to the other two. So this is taking extra space. Another thing over here is, yeah, so flex how it works I believe is it has one row and then it has flex items and it is placing those items in the row. If the items are not taking a lot of space and you have extra space left after the rendering, you can control the extra space distribution using justify content and all those things. You can also use flex spaces on your flex items to control that, you know, or you can use flex grow, right? Which basically decides how much you have to grow. In this case, for example, if I have div and let me just use SCSS to make life a bit easier. So what I mean to say is inside the content, if I, for each div inside this, if I try to make the flex grow as one. Just take off the star there, it's actually gonna cause some problems. Just the... Oh, yeah, sorry. Yeah, there you go. I didn't, I don't know why I did that. I was kind of saying that every div. So kind of... Everything, yeah. Yeah, I wanted to say every div inside content and yeah, this is the way to do that. Yeah, so right now it's not going to work out because you know, this works if we had extra space and we wanted to control how much is that space? Like how do we want to control the distribution? Saying flex grow one means, hey man, each flex item is going to get the extra space equally. So because of that, we used to have like the equal width kind of thing. But over here, I understand why you gave this talents and we are having this longer div. So we don't have actually extra space. So this is like not doing anything, right? I think one easy way to fix this is probably give this a width of 32% or 33 if you want, right? So now we have kind of like, we have made sure that the divs are having equal width and they are having three columns. Yep. So this works perfectly. And to me, that's a solution to the problem. So that's perfect. Just to dive in a little bit deeper and we were talking about flex grow. So another property that's actually by default is flex shrink, which is what's working right now. That's the reason that, because you did display flex and they all just sort of fit in. But the middle one, as you said, was a lot bigger and it's because there's more content. So flex is doing its algorithm stuff. It's trying to see how big it wants everything. And then they're all really big and then it's shrinking them down. But as soon as we declare a width on it, now we're saying like be this size. But what's really interesting here is you could actually say width 100% and it's still gonna work. Really? Or it could be 200, any size you want. And the reason it's working is because now we're saying be 100% so it's gonna try and be the size of the parent. But then because there's a flex shrink on they're all shrinking and they're all shrinking by the same amount. So they all have the flex shrink of one. So they all have the same default size and then they're all shrinking by the same amount. So they all become equal columns. The reason I like this approach is if you had two columns, you would still have two columns. If you had six columns, you'd still have six equal columns. So yeah, this is one way that I like to approach it. Yeah, it's actually very good, right? But one thing which I found is like, I think there was a certain realignment when I changed from 33 to 100%. And I think that makes sense because initially we were also leaving 1% extra space. So yeah, probably this is more accurate, I believe. And then if you wanted to, there's another, we can also do a gap, not on the div itself, but on your, like right after display flex. You mean gap? There's a gap property that is new to Flexbox. It's been, we've had it for grids. So you can put whatever number you want, say 20 pixels or... Okay, let's put five. It's not visible, yeah, 20. Yeah, so a bigger number. So that's gonna create, you know, it's the spacing between the columns now, yeah. This is, it's been around for a little while with Flexbox, but Safari just got support for it. So it's pretty exciting. It makes life really easy. So the key is to play with the width property and make sure that it's 100%. And then let now Flexbox, like leverage the flex frame properties now. Exactly, exactly. And you could, I mean, I know some people, I've shown, I usually do it with width because it's the simplest way to understand it. Some people prefer using Flexbasis just because it's a flex property. At the end of the day, they come out to the same solution. So it's whichever one you prefer. This was beautiful. I really love that it's not dependent on how many columns you have. For example, in my approach, it was like 100 divided by three. If you have four, it would be 100 by four. Yeah, awesome, thanks. So now this is saying prevent the content from overflowing that small screen sizes, yeah. Now, if you shrink down the, yeah, one point, there we go. Yeah. It's coming up. So this is one of the big problems with using Flexbox is this. Yeah, yeah, yeah. Everything is coming in one row. And like at this point, you would say, oh man, this is awesome, right? But then as you reach this point, it's lovely. So I think I have to use media queries now because, you know, like as soon as this is not making sense, probably I think it's not making sense already. And so right now the width is close to 930, right? 930 pixels and it's not looking good. So at this point of time, probably we want a three-column layout. And then as we go down, probably three columns is also not going to look good. But let's actually fix it for 930 pixels. So how the syntax works for media query and I think I remember this is at the rate media, we have screen and we have the max width property over here that I'll write. So if the max width is let's say 930 pixels, right? So now I can write a bunch of CSS over here, which will only be applied to my DOM, only if max width is up to 930, right? Yeah. So just to make sure this works fine, I'll just, sorry, I'll just make sure that the body background turns green. Okay. So now as the width is bigger than that, it's white. And as soon as it crosses 930 mark, it's turning green. So now at this point of time, I actually want to, you know, start doing that decomposition thing, like breaking this five column layout into three. So I think let me see. So we have content and then again, the same thing, right? We have five devs and each dev is having a heading H2 and a paragraph B. Exactly. Okay. So content is already flexed because of their coming into a row, but now I want to do something over here. Okay. So let's see how to do that. Probably we can say dot content. And again, I think I have to use CSS. So what do we want to do dot content? And then I think we want to talk about the devs. And over here, if we can say that, you know, now you are going to take 33%. Okay. Okay. So this is, I think we also need to probably add flex wrap. Probably that's why it's trying. Basically it's saying that I can't take more than one rose. So how to do that? Well, we can do something like for dot content, we can say flex wrap. I think it's a wrap. Yeah, there you go. So over here, we have five. And then as soon as the break point triggers, we have like three columns over here. Now it's looking better than before, I think. And then I think at 700 pixels, it's a good time to actually break it further into two. So how that's going to work is similar to this one. We can just copy paste this and say that when the width is, and I think I forgot the, it was seven 700, I think. So if the max max width is 700 pixels, what we want is we again want the wrapping property, but now the width should be 50%. So yeah. It's looking much better. Probably like we have something like this, then three columns and two columns and so on. Like if you want to do it further, we can probably do it. But yeah, that's the overall idea. Awesome. Yeah. So the main thing I wanted with that challenge is just to bring in that flex wrap, which is a bit of a weird property, but it's a really important one and it is off by default. So normally it's no wrap and the idea is, because if not, you wouldn't get columns. It wouldn't, you know, you'd have to do a lot more work, but then you run into these situations where things can overflow. So definitely using the flex wrap is a great way to do it. And I do like that for your media queries, you're thinking about it, like how do we make it look as good as possible at the different sizes. So that's always a good thing. Cause I think a lot of people just go like, oh, I need it to, you know, do this one thing. And so like, I sort of like how you broke it down and when is it, when are the columns getting too narrow? It's the right way to be thinking about it. Yeah. Yeah. So I mean, there are ways with using combining a flex grow with it as well. And or you could, I mean, you could use one media query that changes the flex direction and then you would just go from columns and then they would just go to rows. So that is one option. Another one is to it. It's a little bit like what you've done actually, but just by adding flex grower in it, we're setting like min and max widths. You can sort of play around with it a little bit too. All right. So I think I have passed this one as well. And we can move to the next one. Challenge four. All right. So we are almost halfway. So this one's a little trickier. I'll just let you know, there's a trick to this one. I mean, when it's when it's coming to animations like I already, I think we'll get zero numbers. I'm not that good with animations. So we have to animate the gradient on over. Okay. And what do we have? We have a diff class content. And then it's having margin border height and background. Okay. So here's the background and we want to animate it on hover. Right. So let me first use SCSS. Okay. So what I think the syntax for doing something on hover is first of all, we have something like an hover, something like this. Now, whatever I wrote right over here, that CSS applied whenever we have, whenever we are hovering the diff. So just to make sure it's working, let's add a cursor pointer. Right. Okay. So there you go. Now when I am hovering, I can see that, you know, and let me just make this a bit bigger. So now you can see that this is functioning fine, but how do I animate it? I'm not that good, but I think there is a good property like transition in CSS. And if you don't know, like, I really love this all kind of thing. Like if you want to change the width, you can do something like width one second and, you know, some other property two seconds, and you can control the timings of the animations. But like when you really don't know what property, like I love this thing, like all one seconds. So this kind of, you know, saves me when I try to do the animation. So now what I'm trying to do is my ideas, I will change the degrees over here, 45 degrees probably. And now like when I do the hover, you know, yeah, exactly. So this is, okay. So this is happening like the background is changing, so I was expecting. You're expecting it to transition. I can see this evil smile. I can see this evil smile on your face. So this is a common thing that people want to do in animating gradients. And from, you can animate or transition almost anything with CSS. You do want to be careful just really quickly that there's a lot of things that you can, but it doesn't mean you should just because there are performance issues that can come up. But with backgrounds, you can do a background color. So if you just had red into green, no problem, but linear gradients and gradients in CSS, they're actually part of the background image syntax. So we're using the shorthand background, but they're actually background images. Okay. And because it doesn't know it's a gradient versus just like an actual picture. So say you had an image, you couldn't like CSS wouldn't be able to animate a picture. So it can't animate. It just, they just said background image can't be animated. So linear gradient itself can't be animated. So I was mean with this one. This one is a mean one on my part. All right. So basically the question is to animate the gradient. And then Kevin is saying, hopefully CSS does not know how to animate gradients. Right. So there is a way in the future that's not, we can't use it yet, but it's coming where we'll be able to animate the colors within a gradient, but right now we still can't do it. But what we can do at the moment, because we can't do the gradient itself, sorry, we can't animate the background image property, but we can animate other parts of the background property. So the first thing I want you to do is after in, not in the hover, but in go up to like the regular content. Yeah. And we're going to do, so just after all that, put in background size and put in like 200%. Okay. So guys, this is like we are doing cheating a little bit. The interviewer themselves are helping us. So, okay. Okay. I got it. I got it. I think now we can play around with this property. We couldn't play around with this. So basically I think what you're saying is kind of, you know, do that, that drag or something like that. It looks like it's kind of moving. Exactly. Okay. So I think we can do something like background size, 100%. Yeah. So now it looks really cool. Yeah. So there's pretty much any background property can be animated. So you can do background position. You can slide things around. You can do the background size and get it to change too. So there's, if it's below 40, 100% it gets funky. Yeah. This is given like, do you want to explain what just happened? Yeah. So because the background size is less than 100%, it's doing the gradient. So when you hover. Yeah. The gradient is going, it's going from there to now 90%. So, and then it's going to start the gradient over again because by default background, backgrounds also repeat. So it's doing it 40% and then it's repeating the background over and over again or now 90%. So then it starts it over again. But don't, don't we have something like background cover stretch or something? It's background size cover. Oh, okay. Oh, damn. I can't do it. No. So yeah, you wouldn't want to drop below 100% with the background size. It's covered background size cover. I don't know if that works with gradient. I've never done it with a gradient. I don't know how that works. Let's see. I can't animate it. Yeah. Yeah. Because you're changing the value from 200% to something else. So it should be the same thing. Okay. I think we can change probably this to center or something. So you leave the background size at 200%. And then in the, in the hover, don't do background size. Do background position. Okay. No, leave that one. Nope. Sorry. Sorry. Leave that one. Yeah. That one changed that one to background position and just put it to like center or left, right. Maybe try center and let's see what happens. It should work. Okay. There we go. So what it's doing now is by default, the back, the default background position is your top left. So we're seeing the top left of the gradient or the left side of the gradient. And then it's animating it to the middle of the gradient now. So the gradient, we have the big gradient that's sort of off to the side and then it's sliding. Yeah, exactly. Yeah. And this looks cool as well. All right. So yeah, I knew that I didn't know that much about animations. First of all, and thanks to Kevin for making this more hard. So this one was a little bit mean though. This one, this one's one of those ones. We either don't know it or you know it. So it's. Yeah. Cool. Let's move to challenge fire. But I really love this man. I'm learning quite a lot of things. All right, guys. Give the box below multiple borders. Okay. So we have content and yeah. Yeah. This is another one of the ones that is maybe a little bit mean either you're going to know it and you're going to get this one in like three seconds or I will have to walk you through. I think it's like a chemistry question. Yeah. Yeah. Yeah, exactly. Yeah. Let me try some funky things. Oh, I'm a magician. So yeah, that's all I could have tried. Possibly. Like you have to help me over here. No problem. So there's there are two options. So the first one, if we could use the outline property as well. So outlines are just like borders. Okay. So if you go in the big different, a border is part of the box model. So it will take up space whereas an outline isn't. So it's visual only. It doesn't actually take up space on your, on your design. Now it's actually make it like 10 pixels or something. I can see it. There we go. So outlines are cool. There is another cool thing actually. That I didn't think about until now, but if you go on the next line and do outline. Offset. So this is what with borders and with outlines, the one issue is we can't. We can only put in one. So this is where we, this is where we, this is a bit of a, we'll call it a hack. And I'll see. I'll let you try it out. I'm just going to say that you need to use a box shadow. Box shadow. Okay. I won't let you know how to do it, but I'm assuming you know how to like so. So yeah, box shadow, like basically box shadow will go give a shadow to the box, but. Exactly. I forward the syntax. I think it's something like black and you have to define the thickness of. Exactly. The blur. How. So that should, there we go. Yeah. So if we do that now. The advantage with box shadow on like borders or outlines is you can have multiple. So you are saying exactly. Something like this. Okay. Yeah. This is cool. I'll give you what's happening now is they're all overlapping each other. So it's just getting muddy. So there is one, when we do this zero, zero, it's those, those first two numbers are the offset. So one's horizontal offset. Yeah. Okay. Okay. I'll give you what's happening now is they're all overlapping each other. So it's just getting muddy. So there is one, when we do this zero, zero, one is horizontal offset and the second one is vertical offset. Then we have the blur. So the 10 pixels is your, is your blur. Just make sure you put PX on those. Oh yeah. Yeah. Like for zero, you don't need anything, right? Yeah, exactly. So that should, we should see that one's going to be. Okay. Getting pulled down. There is a fourth value that you can put, but it's an optional one. And that's why it's working, even though we're not setting anything. But after your, after your blur, you can give them, it's called the spread. So if you go in there and you put say 10 pixels or whatever you want. You'll see what it does. Oh, okay. So it's kind of like, like the width of the shadow, something like that. Yeah. So it's saying go that many pixels, then start the blur. Okay. So it's, it's a way of pulling the shadow. Okay. So I think we can remove this probably. And so we have 10 pixels, 10 pixels black, then we have 20 pixels, 10 pixels. So this is like how much blurry we want, right? So we can keep this also as 10. And okay. So I think we don't want blurriness. We can probably remove that. And probably as we have more borders, you can increase the spread. Right. We can make this. There we go. Yeah. Perfect. That's awesome. Okay. So what did this happen? So this, this was the offset and we are keeping that as zero, zero. And then we decreased the blurriness because, oh, okay. So this is why it's like acting like exactly how border works. Right. Yeah. Exactly. Because there's no blur on it. It just becomes a solid block pretty much. Why do you know this? Like who tries to do such things, man? How did you learn this thing? I don't know. It's one of those things that like you sort of find out. Actually, there's a website called CSS battles. CSS battle.dev or CSS battles.dev. And there's so many things to use box shadows for. You just need like, it's the easiest way to get so much stuff done is with using multiple box shadows. Wow. Amazing. I know that such kind of CSS will never go to production, but amazing. This was awesome. Thanks. So this is the six talents and I'm already having a bad feeling. So it's saying that recreate the image below without changing the HTML. Okay. So. So yeah, just like we want to make our box at the top look like that thing at the bottom. We want to add the purple purple right. Yeah. Exactly. Okay. So. Okay. Without changing the HTML. Oh, there you go. Yeah. Yeah. I think like credits to your videos. I think I have watched one in which like we have pseudo elements, right? The before and after. So the syntax for that is like, let me just use CSS. I think that's the way to go. I'm not sure. Like I haven't like I never actually use this so far. So I just know that we have something like that. And like what I'm planning to do is something like and after and I think this is the same text for pseudo elements. Let me just see if it's working first. So it's. Let's say a hundred pixels. Hi. Let's say 20 pixels and let's give it a background. So that we can see it. So 100% pseudo elements to the right way to go. And normally this would work, but there is two things that are missing to actually get it to render. Okay. So the first one is it's a little bit strange, but on pseudo elements, they're not, because it's literally going to inject the element into the DOM. And with anything CSS, they're not going to. Like the DOM's already there. And if everything already, if CSS won't inject it, we have to sort of give it the properties so then it can come into existence. Because if not, everything would have a pseudo element by default and the DOM would just be a mess. Okay. I think I heard what you're saying. I think it was something like display block. So we need that. And there's one more thing. And this is the weird one where it's the content property. So it's going to be content. Okay. Okay. Content. Okay. I thought you were saying that add some text kind of thing. Okay. Oh, no, yeah. Just content. And then it for that, we just want an empty string. Okay. Empty string. Or I mean, well, if you put EF, we actually see that show up semi. The reason, so now we can see it. And the reason we want an empty string is we just have to say that this by, by putting content and then an empty string there, it's just saying that this has content and the content is nothing, but we have, it has content. So then it becomes, it's actually, that's what's forcing it to be injected into the DOM. I mean, this is, this is like comparing none in JavaScript with, you know, empty strings, right? Yeah, exactly. So, I mean, you can use the content property for other stuff, but it won't inject it into the DOM until it actually has content to print in there. Oh, so basically this is, so, but. Okay. So this is not making sense to me. Why? Because if, so are you saying that whenever people use, you know, elements like after they, so this always has to come, right? Otherwise it's not going to make any sense. So exactly. So can it like, if it always has to be there, probably. I think even if you do not have it, it should automatically have that, you know, empty. Yeah. And it's just because again, like the, if, if you didn't declare it yourself, like every, every single element has default, like brought the user agent styles. And if we didn't declare the content to populate it, it means that that would have to be a default on all, every element pseudo element. So if that was the default value, then every element on our page would automatically have the pseudo elements being injected. And that would cause like, if you opened your DOM, then everything went in there and it would be a nice. Yeah. So yeah. That's one of the joys, one of the joys of CSS. And this is one of those things that's definitely different from other languages in that sense. Yeah. All right. So probably I didn't watch your complete video. All right. So I think the positioning is still left and. Well, I'm, I'm, I'm planning to use something like relative positioning. What, what I'm planning to say is, like, it give it a top margin, like now since it's relative, like right now we can see it over here. And now I can play around with its positioning. Like I can say that, you know, your top, like something like, I think it's margin top. I'm not sure. Let me just take actually, I think it should be top. So if I make it 10 pixels. Yeah, exactly. So since it's relative now, whatever I put over here, it's moving relative to its original position. Now what I want to do is I can give it a top of probably 100% something like, because I want exactly, I want to move it to the parent side and probably a bit more something like 105%. Exactly. And similarly for the left, I can give something like now the 50% will take it all the way. But I wanted not 50% but something like 40%. So that it kind of goes in the center and it also has a width. It's not 100 pixels for probably I can give it 80%. Okay. So of course when it's 80% you know, this should be 10 because we want the 10% space here and then exactly. And the color is not red, but it's purple and we have solved this, right? Perfect. All right, awesome man. This isn't something that would be useful in production either from what we've looked at. But pseudo elements are really useful and I think they're underused because what they, what they do is like, what I see people doing is putting in like empty spans and then styling the span up to try and get like decorative elements or something. Yeah. Yeah. But the advantage with it being a pseudo element is like, say you have a block quote and you have like a design that comes with your block quote, you don't want to have to put in your block quote and then put an empty span every time. It's a little bit like we were talking about before with like reproducing the code. You just want to put a block quote there and everything comes with your block quote. So pseudo elements or whatever, if there's a decorative thing coming with it, you don't need to play with two, you're not doing the HTML and the CSS. You can just put in your content and everything is styled. Yeah. Yeah. It's easy to maintain also. I believe like. Exactly. I think it makes life a lot easier. Yeah. Yeah. Wow. How many do we have more like? Last one. Last one. All right. The last one guys. And he made the red box and I mean the problem statement is growing. Right. Yes. I couldn't do this one too short. So that it goes to the right side of its parent. And then back to the left, the animation should keep looping and never end. Just like how this interview feels to me. So keyframes. I'm probably like not sure the syntax or you can help me, but let me try something on my own. So let's see. Add the rate keyframes. What do I remember? I think we have something like animation and we can pass in the name of our keyframe. We can say something like. Let's call it magic. Because only magic can save us now. And probably give it one second of time or probably three seconds. And then keyframe something magic. And I want to basically say that this is 0%. Then something happens at 50%. And then what happens at 100% something like that. So now you have to tell me the syntax. All right. Yeah. So you got the right idea. So we're going to pull the keyframe out of the box selector. Keyframes go on their own because they're reasonable. Okay. And we only need one at keyframe. So you can. Okay. So this can go inside. Exactly. Yeah. This makes sense. And then it closed. And then it's keyframes with an S just so we don't. Okay. Since I noticed it. So it's 0%. You can open up some curly braces and. I see. Okay. Yeah. Exactly. All right. Now I can look. I don't need this. I can just work with the CSS. So. So how we are going to play on this. Okay. I need to see the estimate for that. So just one thing. I'll say one thing, just so we don't go down too much of a rabbit hole, but in the keyframes, there's no selectors. You're only using properties. Okay. Cool. Yeah. Yeah. I was not going to use that. I just wanted to make sure. Yeah. Okay. Let's see. So. Okay. I think we can. Okay. So. Okay. I think we can. Okay. So you already have a position relative on the content. And I think. I can also make this. Relative. Probably. I'm not sure. Just give me a minute. So I'm planning that it starts with. It sticks to the left side. Initially. Then. Do I need 50% I don't know. Let's see if I can make it work with 100%. And then I can say the right is zero. So hopefully, you know. Yeah. How do I. Now for. So. Three seconds. We do have to give it one more. I think just. Three seconds. Yeah. Exactly. And let's see. That way. Oh, okay. So what, what's actually. Try. Where it says right zero. Cause maybe I'm going to get it wrong now. Change the right zero to left 100%. I just want to see what happens. Okay. I want to see if that even works. There we go. Okay. So there's a really weird thing with the top, bottom left, right properties. If we didn't have a width declared on the box, it probably, I mean, there could have been other issues with it. But because we have a width of 75, when you're saying right zero, it's, it's still had like, it still has the left of zero, like the left of zero didn't go away and it knows it's 75 pixels. So you run into this weird situation with the left and the right side sort of fighting with each other. Okay. Oh, but what if I do something like right zero and left. Okay. That doesn't make sense. Yeah. I mean, doing something like this. I was thinking something like 50% or something like what happens now. So yeah, it's still, it's basing it pretty much just on that left. Left. Yeah. Yeah. Okay. CSS. Okay. Okay. Okay. 100% is actually sending it out. Right. So I think we can use the Cal property and probably I will get some, some marks just because I know this things. And the syntax also for Cal is amazing and I just quickly show that. So this works like this, but the thing is if you do not have spaces over here, it will not work. Oh my God. I just don't know what's happening. For some reason it does that. But yeah. Is it working? I think we can also do it like reverse something like, I'm just, okay. So something happened. Let's wait and see first it's happening or not. Okay. So it's just happening in reverse. Is there something to went through? So yeah, it's, it's alternate. Exactly. And probably this is infinite. You still want the three seconds, but you do want infinite too. Okay. Okay. Yeah. Basically this controls, this controls the duration of the, this controls the duration of the animation. Awesome man. This is awesome. And probably we can do some more funky stuff like, let's, like let's also grow the width to 150. Okay. So it's working. It's working. It's working. Yup. Amazing. And change the background. Yeah. I know that because I make that, the amount of times I've set a color on something and been going, like why isn't it working? And I couldn't figure it out. And it's like, Oh, it was a background color that I wanted. Yup. Amazing. So a really big thank you to Russia for coming onto my channel and trying these challenges out. I think you did really, really good. It was a lot of fun. And if you'd like to see me take on some algorithm challenges and see how I do with those, you can check out the video where I did that over on his channel, the link to that one and his channel is down below. And with that, a really big thank you to both Zach and Randy, my supporters of awesome over on Patreon, as well as all my other patrons for their support each and every month. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.