CSS Showdown: 7 Challenges with Rachit Jain

Key Takeaways

all right so i'm really excited for this video where i am here to challenge somebody to use multiple css challenges um and it's someone who normally doesn't dive so much into the world of front-end development so uh maybe more comfortable with the back end javascript and all of that so we'll see how they can do and this is 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 rachet 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 uh 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 wherein um 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 uh center 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 so like 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 um i i hopefully like hopefully i know the answer to this and i don't think we need this uh 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 beautifying the screen but this is where the main stuff goes i think yeah exactly yeah all right um so can i can i use um dev tools over here yeah you can um it is a bit weird sometimes in um codepen when you open the devtools is because it's an iframe uh 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 dave is taking the full width over here and the class name is center me that makes sense and um so the thing is uh 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 um so one thing that we can do is uh in the content we can say text align center right and hopefully what it would 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 percent is the height right now uh i i feel that the proper way to do that would be um so let's see where is so okay so here is the content diff class and here is the sent to me right um so one thing that we can do is basically you know make this content as a flexbox container so if i do that um i'll quickly explain why i'm doing that but once i make that a flex container uh okay so we lose this thing which was working initially now it's not working and the reason for that is probably you know um 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 row so they kind of stack in the horizontal direction as a row so this can be fixed i think we can do something like let's see we can say flex uh okay so i think i need to write dot center me that's where the next code should go uh 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 uh extra space if it's available and that is working now to fix the alignment probably what i can do is ah so i think we have so in the main access we have justify content in the other access we have something like align items or align 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 uh align content is not working because the height is like really stretched uh because of that it's not working that uh let me see what we can do i think the other way is to actually say that the justify content is also you know we can get rid of the text align we can say justify content as center so that if we even if we have one thing it goes to the center and let me just check what's happening right now so one nice thing with the devtools is we do have some some flex inspectors and stuff now but right so there yeah that's working now yeah yeah because i was saying that you know you have to grow 100 so that's why it was not working um so align content is not working let me see if it's align items yeah there you go so i always get confused between line 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 crossed 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 access so yeah i'm writing i read css all day long every day and i still mix up align items and align content so don't feel bad yeah this one uh yeah it's also been made more comp because align con 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 mean i think i read about the grid uh like i think one year back but at that point of time probably i didn't use it much because i think when i uh viewed can i use dot com at that point it was not widely adapted probably but i i think now it's like really you know it makes life easy and it's like the next thing challenge two all right so we have to create three columns 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 um 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 you can see over here we have uh like this is one div it's having a heading and a paragraph and we have three such divs and what what we want is kind of like a newspaper or magazine kind of thing wherein we have three equal columns on the screen yeah so uh of course the first intuition is to use flex uh flex column actually so that you know um no actually flex row makes sense yeah so if i if i make it of flex all the divs will go side by side and there we go we have something but i think uh they are 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 um another thing over here is yeah so so flex how it works i believe is um 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 bases on your flex items to control that you know or you can use flex group right which basically decides how much you have to grow in this case for example if i have diff and let me just use scss to make a life a bit easier so what i mean to say is inside the content if i uh for each div inside this if i try to make the flex grow as one just take off the star there it's actually going to cause some problems just the oh yeah sorry yeah there you go i didn't i don't know why i did that i i i was kind of saying that every day so kind of everything yeah it's been a while yeah i wanted to say every div inside content and yeah this is the way to do that yeah so 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 that space like how do we want to control the distribution saying flex grow one means each flex item is going to get the extra space equally so because of that we used to have like the equal bit kind of thing but over here i understand why you gave this challenge and uh we are having this longer dip so we don't have actually extra space so this is like not doing anything right uh i think one easy way to fix this is probably give this a width of the 32 percent or 33 if you want right so now we have kind of like we have made sure that the tips are having equal bits and they are having three columns yep um so this is this works perfectly and it to me that's a solution to the problem so that's perfect um just to dive in a little bit deeper and what we're talking about flex gross another property that's actually by default is flex shrink which is what's working right now that's the reason that because you know 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 it's 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 going to work really uh 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 going to 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 okay the reason i like this approach is if you had two columns you would still have two equal columns if you had six columns you'd still have six equal columns yeah um so yeah this is one way that i like to approach it yeah it's actually very good right uh but one thing which i found is like i think there was a certain uh realignment when i changed from 33 to 100 i think that makes sense because initially we were also leaving one percent extra space exactly yeah probably this is more accurate i believe and then if you wanted to you could uh there's another we can also do a gap not on the div itself but on your con like right after display flex uh you'll need gap there's a gap property that is new to flexbox it's been we've had it for grid so you can put whatever number you want say 20 pixels or okay let's put five it's not visible yeah yeah so a bigger number so that's going to create you know it's the spacing between the columns now yeah um 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 yeah yeah so the key is to play with the width property and make sure that it's hundred percent and then let now flexbox like leverage the flex string properties now exactly exactly and you could i mean i know some people i've show i usually do it with width because it's the simplest way to understand it some people prefer using flex basis just because it's a flex property yeah at the end of the day they come out to the same solution so whichever one you prefer this was beautiful uh 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 uh so now this is saying prevent the content from overflowing that small screen size so yeah now if you shrink down the um yeah oh okay wait at one point there we go yeah it's coming this is one of the big problems with using flexbox is is this yeah yeah yeah everything is coming in one row and like at this point you will say oh man this is awesome right but then reach this point it's not good so i think uh you i i think i have to use media queries now um because you know like as soon as this is not making sense probably i think it's not making sense already and um 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 that's 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 um at the rate media we have screen and we have the max fit property over here that i'll write so if the max width is let's say 930 pixels right so i now i can write a bunch of css over here which will only be applied to my dom only if uh max width is up to 9 30 right so just to make sure this works fine i'll just uh sorry i'll just make sure that the body background turns green okay so now as as the width is bigger than that it's wide and as soon as it crosses 930 mark it's um like it's turning green so now at this point of time i actually want to you know uh start doing that decomposition thing uh like breaking this five column layout into three so i think uh let me see so we have content and then again the same thing right we have uh five divs and each div is having a heading h2 and a paragraph p exactly okay so so content is already flexed because obviously they're coming into a row but now i want to do something over here okay so let's see how to do that um probably we can say dot content and again i think i have to use scss so what do we want to do dot content and then i think we want to talk about the divs and over here if we can say that you know now you are going to take 33 percent uh [Music] okay okay so this is um [Music] i i think we also need to uh probably add flex wrap probably that's why it's prank 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 uh wrap i think it's ram yeah there you go so over here we have five and then as soon as the breakpoint 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 7 700 i think so if the mat 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 on like if you want to do it further we can probably do it but yeah that's the oral idea awesome yeah so the main the main thing i wanted with that challenge is just to bring in that flex wrap um which is a bit of a weird property um 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 um but then you run into these situations where things can overflow so uh definitely using the flex wrap is a great way to do it and i do like the for your media queries you're thinking about it like how do we make it look as good as possible at the different sizes right um so that's always a good thing because i think a lot of people just go like oh i need it to you know do this one thing and it's 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 um com combining a flex grow with it as well um 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 um another one is to uh it's a little bit like what you've done actually but just by adding flex grower um in or 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 that's good and we can move to the next one challenge four all right so we are almost halfway uh so this 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 uh 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 uh i think the syntax for doing something on hover is first of all we have something like uh and hover something like this now whatever i write over here that css is applied whenever we have when whenever we are hovering that if so just to make sure it's working uh let's add a cursor pointer right okay so there you go now when i am hovering i i can see that you know and let me just make this a bit bigger so uh 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 uh i i really love this all kind of thing like if you want to change the width you can do something like with 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 i love this thing like all one seconds so this kind of you know uh saves me when i try to do the animation so now what i'm trying to do is my uh idea is i will change the degrees over here but if i decrease probably and now like when i do the over you know yeah exactly so this is uh okay so this is happening like the background is changing but um [Music] 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 uh see this is this is a common thing that people want to do in animating gradients um 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 okay but with backgrounds um 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 uh 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 um but what we can do at the moment because we can't do the gradient itself uh 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 um in not in the hover but in go up to like the regular content yeah and we're gonna do uh so just after all that put in background size and put in like 200 percent okay so guys this is like uh we are doing cheating a little bit the interviewer themselves are helping us uh so okay okay i got it i got it i think now we can play around with this property uh we couldn't play around with this so basically i think what you're saying is uh kind of you know do that uh that drag or something like that it looks like it's kind of moving like that okay so i think we can do something like background size um 100 yeah now 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 um so there's if it's below 40 100 it gets funky yeah this is kevin like do you want to explain what just happened yeah so because the background size is less than a hundred percent it's doing the gradient so when you hover yeah the gradient is going it's going from there to well 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 do don't we have something like background cover stretch or something uh it's background size cover oh okay oh now yeah so you can't go no uh so yeah you wouldn't want to drop below 100 with the background size um 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 oh it's not we can't animate it yeah it's 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 um so what you leave the background size at 200 percent yeah and then in this in the hover don't do background size do background position okay uh no leave that one nope sorry sorry leave that one and then yeah that one change that one to background position and just put it to like um center or left uh right maybe try center and let's see what happens it should work uh okay there we go um 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 around yeah and this looks cool as well all right uh so yeah i i 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 you either don't know it or you know it so it's yeah cool uh let's move to challenge five but i really love this man i'm learning quite a lot of things all right guys uh give the box below multiple borders okay so we have content and uh 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 i i'll have to walk you through it so i think it's like a chemistry question you either know it or you don't yeah exactly yeah let me try some funky things oh i'm a magician um so yeah that's all i could have tried possibly i like to you have to help me over a little bit no problem so there's there are two options so the first one um if we could use the outline property as well so outlines are just like borders um okay so if you go in the big difference 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 um design now it's actually make it like 10 pixels or something i can see it uh there we go so outlines are cool there is another cool thing actually uh that i didn't think about until now but if you go on the next line and do uh outline offset no but can i can i have multiple outlines something like this uh so this is with borders and with outlines the one issue is we can't uh we can only put in one um so we have their properties so this is where we this is it's a bit of we'll call it a hack um i'll see i'll i'll let you try it out i'm just going to say that you need to use a box shadow um 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 uh basically box shadow will go give a shadow to the box but exactly i forgot the syntax i think it's something like black and you have to define the thickness oh exactly the blur how so that there we go yeah so if we do that now the advantage with box shadow unlike borders or outlines is you can have multiple ones okay so you are saying exactly something like this okay um yeah this is cool um what do you think since me okay i'll give you what's happening now is they're all overlapping each other so it's just getting muddy um so there is one when we do the zero zero it's those those first two numbers are the offset so one's horizontal offset and the second one is vertical offset then we have the blur uh so the 10 pixels is your is your blur uh 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 there you go okay okay getting pulled down um 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 um but okay after you're after your blur you can give them um it's called the spread so if you go on there and you put say 10 pixels or whatever you want you'll see what it does oh oh okay so it's kind of like uh 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 it's a way of pulling the shadow okay so i think we can remove this probably and um 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. um and okay so i think we don't want blurriness we can probably remove that and probably as we have more borders we can increase the spread right we can make this area there we go yep that's perfect that awesome okay so uh what did just happen um so this this was the offset and we are keeping that as zero zero and then we decreased uh 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 like why do you know this like who tries to do such text man how did you learn this thing i don't know it's one of those it is one of those things that like you you sort of find out actually there's a website called um css battles cssbattle.dev or cssbattles.dev and there's so many things use box shadows for you just need like it's the easiest way to get so much stuff done is with the using multiple box shadows wow amazing i know that such kind of css will never go to production but amazing this was awesome thanks um so this is the six challenge and i'm already having a bad feeling so it's saying that um recreate the image below without changing the html okay so um so yeah just like we want to make our box at the top look like that thing at the bottom it's basically we want to add the okay add the purple purple right yeah exactly okay so um okay without changing the html over there yeah yeah i think uh like credits to your videos i think i have watched one in which uh like we have pseudo elements right the before and after so the syntax for that is like let me just use scss um i think that's the way to go i'm not sure like i haven't like i never actually used 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 syntax for cd elements um let me just see if it's working first of all so with let's say 100 pixels height let's say 20 pixels and let's give it a background so that we can see it so 100 suit elements are the right way to go um and normally this would work but there is two things that are missing uh to actually get it to render okay uh so the first one is um it's a little bit strange but on pseudoelements they're not because it's it's literally going to inject the element into the dom um and with anything css they're not going to like the dom's already there uh 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 got 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 um the content property uh so it's gonna be content okay okay content okay and then i thought you were saying that add some text kind of thing okay oh no yeah no just content and then for that we just want an empty string oh okay empty string or i mean well if you put ef we actually see that show up [Music] um 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 ha it has content so then it becomes it's actu that's what's forcing it to be injected into the dom i mean this is this is like comparing null in javascript with you know empty strings right yeah exactly um 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 put in there oh so basically this is all so but okay so this is not making sense to me why because if so are you saying that whenever people use pseudo 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 um 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 c um if if you didn't declare it yourself like every every single element has default like route 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 suit elements being injected and that would cause like if you opened your dom then everything would happen in there and it would be nice yeah yeah so yeah that's one of the joys one of the joys of css and and this is one of those things that's definitely different from other languages uh in that sense all right so probably i didn't watch your complete video all right uh so i think um the positioning is still left and well i'm i'm i'm planning to use something like um relative positioning what uh what i'm trying 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 uh positioning like i can say that you know your top uh like something like i think it's margin top i'm not sure uh let me just check actually i think it should be top so if i make it 10 pixels yeah exactly so uh 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 uh 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 pixels but probably i can give it eighty percent okay so of course when it's eighty percent you know there should be ten because you want the ten percent space here and then yeah exactly and the color is not red but it's purple and we have solved this right all right awesome man uh this isn't something that would be useful in production either from what we've looked at uh 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 but by using yeah yeah and 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 pseudoelements or whatever if there's a decorative thing coming with it you don't need to play with to 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 well how many do we have more like last week [Music] all right the last one guys and he made the red box and i mean the problem statement is growing right yes anyway 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 um so keyframes i'm probably like not sure the syntax so you can help me but let me try something on my own so uh let's see add the red keyframes um 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 uh let's call it magic because only magic can save us now and probably give it uh one second of time or probably three seconds and then uh keyframe something magic and i want to basically say that this is zero percent then something happens at 50 and then what happens at hundred percent something like that so now you have to tell me the syntax all right yeah so you got the right idea uh so we're gonna pull the keyframe out of the box selector um keyframes go on their own because they're reusable okay um and we only need one at keyframe uh so you can okay so this can go inside exactly yeah uh this makes sense um and then they close and then it's keyframes with an s just so we don't okay since i noticed it uh so it's zero percent you can open up some curly braces and uh i see okay yeah exactly all right now i can work i don't need this i can just have a with a css so uh so how we are going to play on this uh okay i need to see the html for that so uh just one thing i'll say one thing just so we don't go down too much of a rabbit hole but in the key frames there's no selectors you're only using properties okay cool yeah yeah i was not going to use that okay i just want to make sure yeah okay let's see 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 uh do i need 50 i don't know let's see if i can make it work with hundred percent and then i can say the right is zero so hopefully you know um yeah how do i now for uh so imagine that so three seconds and we do have to give it one more i think just um after three seconds yeah exactly and let's see oh okay so what what's actually try um where it says write zero because maybe i'm gonna get it wrong now change the right zero to left one hundred percent i just wanna see what happens okay i wanna see if that even works uh there we go okay so there's a really weird thing with the top bottom left right properties um if we didn't have a width declared on the box it probably i mean there could have been other issues with it um but because we have a width of 75 when you're saying right zero it's it still has like i it still has the left of zero like the left of zero didn't go away and it knows it's 75 pixels so it you run into this weird situation with the left and the right side sort of fighting with each other a little bit okay oh but uh 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 property yeah yeah yeah okay uh css okay so 100 is actually sending it out right so i think we can use the calc property and probably i will get some some marks just because i know these things uh and the syntax also for calc is amazing and i'll just quickly show that um so this works like this but the thing is if you do not have spaces over here it will not work you can say oh my god i just don't know what's happening for some reason it does that but yeah uh is it working i think we can also do it like uh reverse something like that i'm not sure and infinite i'm not sure i'm just i'm just oh yeah okay so something happened let's wait and see first it's happening or not uh okay so it's just happening in reverse uh is there something like two and four so yeah it's alternate all right exactly and probably this is infinite uh you still want the three seconds but you do want infinite too okay okay exactly basically this controls this controls the duration of the or the speed of the animation awesome man this is awesome and probably we can do some more funky stuff like uh like let's also grow the width to 150 pixels uh yeah okay so here we go it's working it's working oh it's okay okay it's working yep amazing 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 um amazing so 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 uh 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 who are 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 corn on the internet just a little bit more awesome