 And let's see if my other camera is on. Amazing. Hi, everybody. Thanks for coming and joining me today. Actually we should be starting over here. There we go. Yeah, thank you for coming to join me today for this special live stream. I haven't done a live stream on YouTube in a really long time. I haven't done a live stream period in a really long time. So kind of excited, a little bit nervous. And but yeah, it'd be a lot of fun. If you don't know, I usually, and when I say usually it's been months and months and months and months. So usually it doesn't really work, but I usually stream on Twitch. It should be linked somewhere down below. I'm eventually going to start weekly streams on Twitch again. I don't know when the starting date will be, but I will be doing probably monthly live streams here on YouTube as well. So we're gonna balance things out a little bit between the two of them because I know not everyone likes Twitch. I know that a lot of, I've been looking at the chat a little bit. It's moving really quick. I know slow modes on so you can only post so often, but it's still moving really, really fast and is going to be hard for me to keep up, but I'll try my best to occasionally keep my eyes on it when I'm gonna be doing some CSS battles. And so I'll be not looking at it too much because I don't want hints while I'm doing it unless I really get stuck on something. But yeah, that will be sort of the thing. I saw a few people asking about if it's gonna be with web dev simplified. I'm just doing this one on my own. I'm definitely not set up to be live battling someone right now anyway. I don't know how I would do that. So it's just gonna be me going through some of the battles on there, number 19. Sorry to disappoint for anyone who was hoping that there'd be a guest on. I do have plans to do some battles with other people again. I've done a bunch with Kyle though. So I might find someone else. I have a few people in mind that I'd like to do these sort of challenges and stuff against. I haven't seen anything. Can I increase the volume? Is my volume low? Cause I can't, I mean, I could, my volume is maxed on my system though I have other ways I could increase it if the volume's too low. Let me know. It's been a while since I've live streamed so I'll let the chat catch up on there. In general, I'm gonna, we'll chat a little bit before we dive into it. I like, if you've never seen a live stream of mine, you know I like to chat just in general, but I'll try not to go too long before we jump into the actual content. I did see some people asking where I'm from. So I'm in Canada and more East Coast. I'm in, I'm just, I'm really close to the city of Montreal. So yeah, that's where I am. And that usually means people will ask me if I'm French so volume's good. Perfect. So yeah, I can speak French, but I'm more of an Anglophone than I am a Francophone. But you do have to be able to speak French if you live here. Oh, some people asking what courses. Okay, I might as well plug my courses a little bit. I have two courses that are current, well, two and a half courses that are currently available. There's my Flexbox course and CSS demystified that are both open right now that you could get. And there's my SAS slash advanced CSS course, I guess. That's currently in production. It's way behind schedule as my courses always are. So no, it's not available yet. Sorry. I will be making sure to let everybody know once that is open for purchase. I'm working on another module right now. When that one is out, I'll probably open the doors permanently. We'll see though. I haven't decided yet. Has it started to snow in Canada yet? It hasn't yet here. I think my parents are about an hour from us and they had snow the other day, but it all melted. We haven't, there's no snow on the ground unless you go far enough up north, but. I could do a CSS battle with my son. I don't think he's quite ready for that yet. Also apologies. I might be coughing and sniffling a little bit. I am getting, I had it like two or three weeks ago I had COVID, I'm feeling much, much better, full of energy, but I definitely, this cough is never gonna go away, I think. Max is asking if you can battle, if people can battle against me. The easiest thing to do is maybe when I start one of them, you just start it at the same time. We're going to be doing battle number 19. Everything should be linked just below the video in the description. I don't have my video open right now, but I think I did put it there. Why is there a time block? I'm guessing you're asking about the chat. It's already hard for me to keep up with the chat, and when I've done YouTube live streams previously, and I didn't have slow mode on, it was impossible to keep up, and there was a lot of people spamming, so this is the unfortunate solution to that. Where can you get my course? Okay, we're gonna go through a few things and I'll drop some links. So let's jump over to my screen right here. Before we get started, I put a video yesterday where I went through the beginning of this, but the doors for the state of CSS survey this year are closing soon. It's a really cool survey. It's mostly modern features this time, so you might go through it and not know a lot of them. That's perfectly fine. Hyper protagonist, thank you very much. That's very generous of you. I do appreciate that. Okay. Sorry guys for the cough. I'll try and mute when I'm coughing, but I might miss sometimes. But yeah, if you don't know about the state of CSS survey, it's just a survey that it goes over sort of the different technologies and stuff that you might be familiar with. Your usage on different things, resources that you use and frameworks, CSS and GIS, sort of the types of stuff that you do. It's really nice. It's a super, I really recommend that you do it. It's useful for people, we can just see trends in CSS usage, but we can also, it does actually, as they say here, it helps the browser vendors prioritize the roadmaps because if they see certain things that people want to be using that we're not currently using, they will prioritize them. And browsers do prioritize things based on what people want and what people are using when the signal is there. So just, yeah, this can help them know about the type of stuff that we want and we're using but isn't supported everywhere, that type of stuff. So that should be linked below, but just in case I forgot, I will put it in chat right there. I'm just looking really quickly at the chat to see if there's anything. Go against Brad Traversey, that could be an interesting one. Mr. Anybody, I am self-taught. Yes. Joshua, no contender, I'm just doing this one on my own. Someone else asked about my courses, so I said we'd take a look. So the easiest way to get my courses is through my site. So I mentioned CSS demystified and is that work? It does, okay. I mentioned CSS demystified and Flexbox simplified. Those are my two opened paid courses. If you want a free courses, I do have conquering responsive layouts, which is all about making responsive layouts. It's more about mindset and stuff. So it's a completely free course, which is sort of why the website's ugly, I never put much time into it. But that one's available. There's an HTML and CSS crash course, which is really the basics. My dog might start barking a bit. There's someone coming into my house, sorry. So the crash course here is on Scrimba. It's free, but yeah, it's free on Scrimba. And this one is also free on Scrimba, which is sort of about like a very simple CSS, vanilla CSS, but design system. And this is a paid course on Scrimba, meaning you need to have a Scrimba membership if you want to take it, but it's all, you can find everything there. It's the easiest way if ever. You do want to grab one of my courses. So let's just jump back here for one second and we're going to jump into the battle in just a minute. I'm just, let's just see. Sorry for my dog barking. I have someone doing some work at my house and they just got here. So there might be a little bit of background noise and other stuff. I do apologize if there is. But yeah, okay. So what are we doing today? Is the CSS battle a few people have asked? So just if you're new here, or you just got here before I start, it's going to just be me. So if you want to go against me, the link should be linked down under the video, but this is, I'm just going to try and get through all of these ones. There's eight in all, and I'm just going to be trying to do them as fast as possible and not trying to get a high score. High scores on CSS battle are very hard and you have to get into the sort of the hacky world of them. And I mean, that's a skill on its own. Could be really interesting if that's the type of thing that you like. But personally, I just like trying to get 100% and do it quickly. So I can use CSS I'm familiar with. If you've never done a CSS battle, they're fun. They're not necessarily real world. It's more about coming up with a creative solutions. Like something like this for any of these, ideally you'd be using an SVG if you had to have something like this on a website. The point of this isn't real world application. It's let's get creative with our CSS and see if we can problem solve things in certain ways. If anybody here is a genius with CSS gradients, these can probably all be done with CSS gradients or partially done. I'm not going to be doing them with gradients because I'm not comfortable with them. And I just would end up wasting more time and it would take me longer. But if you're really good with gradients, you can do a lot, a surprising amount with gradients. And I think often they're actually a good way to get a high score if you know how to do them properly. But we won't be taking that approach. I'm just going to start here and sort of go through them and see what happens. Protopan, my son is at school right now. Mark, there we go. Mark Woodson is working on a no-div gradient one right now. So definitely if you're good with gradients or if you want to learn gradients and the crazy stuff you can actually do with them, trying to build some of these, and not all of these I think would be possible. But seeing what you can do with the gradients, you can go really a long way. My favorite one for gradients is actually one of the older ones. Let's go find it really fast. I have a video on it if you'd want to see, oh look, there's another one. I'm always so far behind on these. We're all the way here. There's one, I don't know if I'm going to find it right away, but there's one with a B in it. And the B one is a really good one for gradients. You can build the whole B with gradients. I don't know where it is. But if ever you find the one with the B, is it, zoom out a little bit, I'm not going to find it. But if you, oh, it's probably in this one, right? There it is. So the body of the B, it's one div, and then you can do the lines and the eye all with gradients on one div. So yeah, for me anyway, that was a fun one to actually be able to do where I could accomplish it. Let's go back and zoom. I'm probably going to have to zoom in a little bit so the text is big enough for you guys to be able to see it properly. I should try to do it. I don't know if any of these would be good for gradients actually. We could use gradients for, I mean this, this one actually, the circle in the middle, maybe I'll use a gradient for that one. You could probably do this only with gradients. I just don't know how. And just before we dive in, TX4G63, I didn't participate in, oh, Devtober or Divtober? Isn't there like the no Divtober or something like that? Or is that November? I don't remember. I didn't do that because I'm not good with that stuff, but there's amazing stuff that is out there. A question about what I do for freelance work, I don't anymore. Luckily, my job now is basically education and content creation. But before that, I did do freelance work. And it was mostly, it went, the early, early days would be a lot of WordPress development. Luckily, I got out of that. And then slowly went from that, transitioned more into like custom solutions and then transitioned more into consulting work. And just like coming in and helping with some CSS stuff. All right, so I'm gonna jump in. While I'm doing the challenges, I won't pay too much attention to the chat because I don't want help on them. But when I'm finished the challenge, we'll jump back to the chat and talk a little bit. Yeah, so here we go, this first one. I didn't set up, okay, before we go in, well, I'll set up a little stopwatch. So if anybody's watching the replay of this or if you just don't have the chance to do it now and you wanna compete with me after, so let's do a stopwatch. I should have put this as a source on the screen, but I'll start this little timer. I'll leave it just off screen and I'll bring it back in. So let's actually open the challenge first. So I'm in there and let's go. I'll bring, I'll pause it and then bring it in. We'll see what my final time was. If you want to play along with me, now's the right time to go. There is a little bit of delay, but yeah, it should be fine. So here we go, one, two, three, start and one, two, three, four. Four by four, four, five, six, seven, eight, nine, 10. Hmm, this one actually takes a bit of thought. I think what we're going to do is do row div class. It's faster, not using divs all the time, but it's just what I'm used to doing. Oh, they have autocomplete on the closing now, which is nice. If I do a row and then I do div class is equal to A just so it's faster. Close A, close A, close div. And again, I'm not going for high score. I'm going for doing this quickly. So I'm just going to work on the first row at the top and then we'll get the other rows put in here. Oh, except I want a parent on this too. We're going to do div class equals box. Let me know if the font size is big enough. All right, I think it's already a bit small so I will make it bigger. We'll do it like that. Hopefully the font size is big enough and we'll close that div there. Whoops, that's not a closing div. Oh, we have, I think we're okay. Okay, off to a terrible start. Body, let's try that again. Body, there we go. Background is going to be that color. Oh no, what's going on? Background is going to be that color. That's good. My A class, let's, I have to scroll down a little. A is going to be a background of this color. Those are going to have a height of like 10. My sizes are all off because I zoomed in so I'm just sort of guessing. Width is going to be, let's say 10 pixels. Oh, it's because I have a bunch of them. So, hmm, we're at 20. Can I select multiple things now? Maybe they've improved stuff. My zoom seems not, okay, whatever. We'll see what happens here. One second.row is going to be a display of flex and a gap of 20 pixels. We'll start there. So these are too big. 30, 40, border radius, border radius, 50%. The size actually doesn't look too bad. Cool, so I give that the box. So my box is sort of the big parent. So we'll just say box margin of 10, 20 pixels all around. So mine, so, okay, top 20, we're going to make top 40 and then the sides, 10 pixels, 30. Actually, I can leave, I always forget. Okay, oh, 20. Oh, that's not bad actually. I think I'm a little bit off, this is like 12. And again, because I'm zoomed in, it's a little bit off. I'm only looking at this top left one and actually the diff is really helpful for that. So you can see the difference, so they're bang on. So those are good, are all of them good? All of them are good, that's amazing. Okay, so then I can just do another row. My next row only has three of them. Oh my God, the selection thing is throwing me off. I need another row, I only have two of them. And then I need another row. I hope I'm closing that at the right place, that only has one of them. And then my box will also be a display of grid and a gap of 20 pixels. That looks really good. So I'm gonna hit submit. 100% match in three minutes, 47 seconds. That was definitely a warm up. Definitely not my best one that I've ever done. But I'm pretty happy with it. I assumed grid from the beginning to space things out. You could probably do the whole thing on one single grid, but it would be hard to move different stuff off. So just trying to go in the fastest way possible. Yeah, I think that made sense to set it up that way. Zero, zero, zero. You can ask a question in about 60 seconds just because of slow mode. But in between rounds, I will be looking at chat. So yeah, 100% match. Again, I'm not going for high scores because that's a lot of characters. If this was, if I did this, couldn't do this one with a gradient, I'm wondering. I know you could, if it was just like a constant pattern of these circles, you could definitely do it with a gradient, but. Trollflex, how do you make PHP work on GitHub pages? You don't. What do I replace PHP with if you can't? You want to use a static site generator. If you've never used any before, Astro might be the easiest to get started with. Otherwise, 11T is also amazing. I use 11T for my personal site. It will take a bit of time. It depends what you're using the PHP for as well. If it's actual dynamic content that you might run into some problems, but if you're just using it as say like a blog and you want to be able to like put articles and it's just like using a template page, then Static's lookups, there's so many, if you goes out there too and there's a lot of other ones. But yeah, Static's site generator is what you want. There are no loops in CSS. If you want to use a loop in CSS, you'd have to use a preprocessor like SAS or less or stylus. Those would let you do something like for I from one to 10 or whatever you want. And then you could use like these as variable, like the I variable to loop through as well. So you could have like box one, box two, box three or whatever you want, but it gets compiled to regular CSS. Can we see the full code? Basically, it's not well-indented, but I have one parent box and then each row is a row with a div in it. And then I wish I could make this, but it's hard to like get the right size on the screen in these. But we're doing all right, I think. The best resource to learn CSS, honestly, obviously I think my courses are pretty good. Dev, it's not Dev2, what's the web.dev.css? That first one. This is a fantastic resource, fantastic resource. The Web Dev Learn tracks in general. I'm very, very high quality stuff. They have quite a bit in here and definitely would recommend it, very high quality. It's by Google, but it's like very smart people that have put them together that I really look up to. So definitely an awesome resource there. I wouldn't drop down navbars with CSS only. I wouldn't recommend because of accessibility issues and some other problems with them. Yeah, can my course, I definitely think my course, I was talking about my courses earlier. So the responsive design bootcamp, they changed the name of it actually, but that one I think is a pretty good, like zero to making layouts and being comfortable with CSS course. I am not familiar with Angular. I have used, no, I haven't, I've looked at it, basically is all. The replay of this will be available in a few hours after this is done. It usually takes them a while to process the video. Can I just explain what I did with Display Grid? So basically I did display Grid on its own. Won't actually, can I comment out stuff here? I can. Display Grid on its own doesn't actually do anything. The reason I wanted to use the grid here was just so I could use the gap property to create the spaces here. I could have just done like a margin bottom on the rows, I guess. But for me, I've moved almost completely away from doing margins on stuff. If I have, if I could use gaps instead, because they're a lot easier. Can, I do have a Discord server. I've had one since, it's been like four years. It should be linked in the description. It's a pretty big one. Style components, I have used them. I'm not a big fan of them, but I have used them. We're gonna jump into the next one. One more question. So, 000 has an associate's degree for computer programming. You're struggling to find a job because you don't have a bachelor's. What do you suggest? You live in Turkey and yeah. Getting jobs can be difficult 100%. It's not my area of expertise at all, at all, at all. So, it's hard for me and especially regional. I don't know a lot about that. I'd suggest there's lots of people out there that actually help people find jobs or early jobs. I have advice, whether it's on Twitter and stuff like that, how to set up your LinkedIn properly. Danny Thompson has a free course on using LinkedIn. It's Danny Thompson. There's Shashi, who I've done some stuff with on Twitter. But it's really not something I have much experience with, so I'm not the right person to be asking there. But there's people, you probably find stuff on YouTube as well, but it's finding people that you can get a bit more of a direct contact with. Or find people that have recently got jobs and find out what they've done and stuff like that. I wish I had more information though. I said that was the last one, but how hard is it to learn PHP? I haven't touched PHP in a long time, so hard for me to say. I wasn't a huge fan of it at the time. I hear it's a lot better now. All right, so, Son of Troy, I'll mention that one after because it's a question I get a lot. I'll remember that one, hopefully. But yeah, I'm gonna jump into the next one now and then we'll answer some more questions. So that one was, that last one again was a 347, so let's reset the timer. Just really quickly before I start, because I always sort of go through it, I look at the picture. So the idea here is pretty simple. I need one of these things, and then I just remake it rotating around a single point. I think the easiest way is going to be based on changing the transform origin. That's about the thought process it goes through with me at the beginning of these. So let's hit start and let's jump in. I'm gonna, let's get the background set up actually. Style, we'll delete that. Body, whoops, I always do that. Background is that. Then, yeah, I think we're just going to do a div class equals AB. My naming on this, it's just to be short. It's really not gonna be the best. How many do we need? One, two, three, four, five, six, seven. Two, three, four, five, six, seven. And then we're gonna do a B, C, D, E, F, G, H. And I don't even know if this is the best approach. But basically A is gonna let me set them all up. And I'm gonna comment all of these out actually. I probably should have put a parent on there, but we might be okay without the parent. So what we're gonna do is say that A is a width of 150 pixels. You can omit pixels actually, height of 10. And then a background. Omitting the pixels is a CSS battle thing only. It's not something you can normally do. Border radius, if you just need a pill shape, 100 VW will always get you the pill shape. It looks a little bit long, so let's try that. Now what we're going to try and do, this might be a mistake, but on my body, just so I don't bother with a parent div, is I'm gonna do margin left is going to be 100 and margin top, this might be a mistake, but 500. Whoops, I forgot my semicolon there. Oh wait, 300, 200, we're working on a four by three. So 180, 190, 195. And then the left is too big as well. So this one should actually be like an 80. Okay, that looks pretty good, but it's way too long, so the width is maybe 90. Or is mine too short? No, now mine's too short, 110. Let's put the diff on here. 120, 150, what's going on? Oh, 100, ha, there we go. Okay, so that one's in the right spot. I wanna base everything sort of around that one. This is where I'm not sure if I'm doing things the way I should. Let's just do a position relative. I wouldn't normally do this with my body, but just because the background, even if you set a width and height on a body, the background color propagates to your canvas, so it doesn't really matter. So that's my A, my B is in the right spot, so now we can go and turn these all on and Steph's gonna look kind of funky, but we're gonna use position absolute. So dot C position, oh no, we're just gonna do a transform. Transform, oh, can I use rotate here? Or is that gonna muck stuff up? Rotate, it's like 30 degrees. Transform, origin, can I do a nape? Cause if I just do left, center, left. Oh, center, right, center, right. That sort of works, if it's not what I wanted. Actually, it's not too bad, and then I could also do a translate. I don't know if it's gonna muck me up on my score though. Translate of negative 10 pixels, negative 30. Oh, no, zero, negative 20 pixels. Negative 30, negative 25. Whoops, it's a little bit off. See, this is where it sucks. My rotation actually looks not too bad. I probably could have done this a better way than what I'm doing now. Oh, that looks, wait, what? Okay, let me just, I have to visualize. Mine needs to go that way more. This one's gonna be harder than I wanted. How do I make it go that way more? Or is it, is mine just too short? Maybe it's just too short with 120. No, it wasn't. I just don't get why, maybe I'm misunderstanding the diff. Oh, it's mine sticking off. Okay, so negative, the 25 looks okay. Is it just, this shouldn't be, should that be five pixels? Oh my God, that's much closer. This is the wrong approach, basically. I'm not gonna get 100% on this one, I might. That's pretty close. Oh my goodness. So this is, I'm using the new, the transform and rotate or new properties. I'm just a little worried. The other problem is my center here, a center right would actually be better if it was here. Can I do that center and then negative 20 pixels? Can I do that? Or would it be, width is 100, negative 120, or would it be 120? And then, if I take that off, sorry guys. If I can get this one, 10, 20. I'm trying to think what the easiest thing to do is. So yeah, let's just say it's 25 pixels for now and then I put this back on and then this can go back. That's going that way, zero on that one and then negative 30, negative 50. That's much closer. Now I actually feel like my rotation is off a little bit. Anybody, okay, we're gonna stick with that for now. Maybe the rotation degrees off, something's off by like one pixel here. We're gonna stick with that. I'm gonna copy that one for C and do that one as D. This one's a disaster. There's probably a much better way to do this one. The rotation on this one's like a 60 degrees, I'm guessing 50 degrees. That looks a bit better. This can go negative, the rotation's still off, but let's get the height a bit more. 60 looks pretty good actually. 20, 30, 25 and then move it up. Close enough, it's not perfect, but we'll stick with that one. That's D, E will be a 90, that makes it easy. And actually, if I get these first three, the next ones will be not too bad. This will be like 100, no, 50, 55, 54. And then this one, negative 120, 110, 25. 20, 22, no, like 18, 17. Oh, 17 was bang, oh, whoops, no, 17 was not bang on. There, yeah, 17's basically bang on. So now I'm actually gonna copy these two. I see the chats moving and I'm hoping people aren't disappointed in me and how badly I'm doing on this one. C, D, E and that one would be F. So this would be a negative and this would become a negative and then hopefully I can just move them over a little bit more. Negative 190, oh no, whoops, wrong way, this one. Negative, oh no, 2200, 100, 120, 110. I think my transform origin's off, which is mucking things up and making my life more difficult. 120, 30, 50, wait, what? What happened to E? Oh, I have two, EF, this isn't E, this is AB. What numbers did I do? One second, E, F, G, H, whoops, A, B, C, D, E. This should be F. Ah, there we go, okay. And then this would be G. I have to do my H still. Okay, oh no, what? On to that, everything's okay. This one's okay. Okay, remove U and U will become G. I don't know what I did there, but whatever. Negative 30, so 100, 150, 130, 40, 85, 87, 88, H. And then the last one is what was called G H. H, luckily, the width of rotation is zero degrees. I don't need the rotation then. Translate origin doesn't really matter. And then the last one is, well, this is called G H. H, luckily, the width of rotation is zero degrees. I don't need the rotation then. Translate origin doesn't really matter. And then this is zero. And then this one just have to move it over 100. Oh no, whoops, that one's zero. This one's 150, 20. Oh, my transfer, whoa, what's happening? Anyway, we'll figure it out. Oh, I know why, okay, so I do need this. Just, they were all stacked because I wasn't using, maybe I should have used position absolute. And it would have made life a lot easier because now some of these movements are kind of really random, 60. Good enough, we're gonna submit that one. 99.9 in 11 minutes and 12 seconds. If ever you get stuck at 99.9, you just took the wrong approach. Part of that might actually be, I've had 99.9 stuck previously because I've used the rotate or used grid instead of doing like the transform translate or transform rotate and stuff like that. So 99.9 for me is close enough. Sometimes it's also because I'm zoomed in since I'm at like 150 zoom, I've had little issues as well. But you know what, close enough, I'm really happy with that. Position absolute probably would have been a lot easier. But say lovey, the problem with racing against the clock with these is once you choose your path, you're stuck with it. So yeah, we're gonna keep on going but I'm gonna switch cameras just for a second because I had the question about how I got in, how this became what I do. So I'll just talk about that quickly because it's a really common question that I get and like how do I learn and how I made it and everything. And one of the reasons that it's hard for me to say like this is how you get your first job or even this is like the best way to learn, say CSS, I started making websites as a hobby in the late 90s. So it's been like 25 years. And so, it was a hobby, it was on again, off again, I might take a break for three years without making one but it was something that I was sort of always playing with for a long, long, long time. And then I've been actually doing it as like a living through different means for over 10 years now. So it's just lots of experience goes a really, really long way. And honestly, the way I got really good at it is once I started teaching it and that really made a big difference because having to teach it, you have to understand it in a bit more of the fundamental way to be able to explain things. As I was, I used to be teaching in the classroom for five or six years. And so that really is what helped me out a lot in I think being able to communicate well and communicate for YouTube and everything else and my courses and the other things that I do. That was a big part of it but it was also a big part of me really understanding getting a lot better at everything. All right, let's jump back to the chat and see what's going on. Throwing darts at a dartboard. That's exactly what that one was. If I had a good transform origin on that last one, I think we could have just done like a nice rotate around and it would have worked, but. Oh, actually the reason the transform or if I'd use position absolute from the beginning and had all of them overlapping each other, the transform origin might have actually worked. But what I didn't think of is because I didn't use position absolute, each one was a bit lower than the next one. So the transform origin was always offset this way but it wasn't actually like in the right place to rotate along. That would have been a nice thing to think about before I was mucking around with those numbers. So that might have really helped. Benad, yes, it is live, we're here live right now. Um, let's see, anything else? Odin, you've heard me talk a lot about accessibility. Have I studied on UX? I have, it's something that I'm always sort of aware of and do try to, you know, try to stay on top of. In general, just as like, I do think like UX, UI are very intertwined and have a big thing when it comes to like the CSS. I haven't got into it in a really deep way in terms of like the way, you know, like really understanding user flows and stuff like that, cause I've never had to. But for the simpler stuff, yes. Sadji, my day's going well, thank you for asking. T20S Grunt, thank you very much. That's super generous of you, I appreciate that. For S&Gs, can I make a Jack O'Lantran in CSS only? That could be something fun, actually. I didn't plan that. When's Halloween this year? Halloween's next Monday, maybe I'll put a video, a bonus video out on Monday where we do, we do that. That could be fun. Patats, Adam, you're welcome. I'm glad that you enjoyed them. Mr. Kryptonian, did I ever, I did work a little bit with Flash websites. I enjoyed Flash, it was, it was a fun, it's fun playing, it was fun to play around with Flash. It was never something, I wasn't big on it, especially cause at the time, like a lot of the fun stuff you were using ActionScript for, which I got a bit puzzled with at the time, but it was fun. All right, Alvaro, nice to see you here. Let us jump into the next one. I'll put it on screen in one second. As usual, just if anybody's just dropping in, if you're, once I start, I won't really be looking at the chat. So if you have questions, just wait until I finish. And then I'll look at the chat again. Before I jump in, I'll just double check really fast. We will jump in. Oh, okay, I'll answer this one. Hitchman's asking, is it possible to make a CSS package to not have to repeat all the code in every project? I have a GitHub template that I use. So I made my own starter file package thing, turned it into a template, and then I start from there. So it is using SAS, and I use that to quickly do, like, modify spacing values and colors and things like that. So I just have a map that maps and sets up a lot of the classes I use. But even if it's just a really simple one, you can set up a really simple one that has all that stuff that you're always doing. It has your reset. It has a container. It has other stuff like that. And then you just use this template and you're starting a project with all of that in place. Segar, the main reason I haven't done stuff with animations is it's not something I'm good at, which is more of a reason that I should do something with them. Time to jump in this one. So I'll look back at the chat in a minute, but let's hit start and dive into this one. As usual, I'll delete that. Let's get this background color and just say body has that background on it. The autocomplete in here, I'm not used to having. Oh, it's the wrong background color. Nice way to slow down at the beginning. Let's set up this one and then an idea for those ones. So I think I'm gonna do this one with just this div. I don't know if this is a good idea, but we're gonna try and use suit elements for this one. So the background on my div is going to be that. The width of it looks like maybe 120, 120. I'm just gonna use aspect ratio of one because now I can make that smaller, much easier. Then we're gonna do a border radius, and I'm gonna muck this up, a border radius of 100, yeah, whatever, 50%, 50% zero. Ah, there we go, perfect. This does look a little bit big, so let's drop it down to like an 80. That looks a little bit better and we're gonna use a position absolute and not muck around this time. We'll rotate by 45 degrees. Oops, negative 45 degrees, there we go. And let's just do the old fashioned way, top of 120, 100, and a left of 80. And turn on diff. The diff is a little bit hard to work with, I find. Oh, there we go. So now that it's black, I know I nailed it and that one's right in place. Awesome, this one's going smoother already. So this might be a mistake. This is definitely, if you're doing CSS battle and you're after high scores, don't use pseudo elements, it's not the right way to go. But we're gonna do a before and an after on here. And on this before and after, let's throw the content property on there because we need to have it. If you want your pseudo element to appear, width will be inherit, height will be inherit, the border radius will be inherit, and we'll throw a position absolute on these as well. Absolute, then we'll just grab the before, maybe this is going to work out better than I expected. We're gonna rotate this one 45 degrees. Why is it not showing up? Content position, width, height, it should be on there. Display block, mm, uh-oh. Okay, let's, I'm a little worried now. Div, I feel like I made a mistake here somewhere now. It should be showing up. Okay, let's just try top 50 pixels, it's not there. Oh, oh, background, background. I have background can be inherit too, background inherit. Oh no, absolute, where's my div? Oh, you know what? Okay, they are there. The problem is, okay, width is inherit, inherit. I was inheriting a height, but I can't inherit aspect ratio, inherit. There was no height to inherit because it was an explicit height. Ha, there we go, perfect. And it's turned, so I actually want to do a negative 45 on that one. No, negative 90, negative 90 degrees. Top is not there, let's just, okay, left of, the background, you can also change on these sometimes, like background is pink, just so you can see what you're doing, except my other one's also covering it, so that doesn't help. That's okay, left 50, just so we can get something on the page. So top 100, 150, why is moving my top also moving my left? Oh, the stupid rotation. They're reversed? Oh, I didn't think of that. Oh, the rotation here on this one is gonna kill me on this. Oh no, I knew I'd made a mistake along the way here. That's gonna make it so much harder. I don't even, okay, 150, negative 150. Okay, negative 100. If I get it for the first one, negative 50, and negative 50, no, 100. Oh my God, Kevin. Is there a solution to mucking around with this? Cause if not, I'm probably screwed. I can, I'm never, I'm just gonna be like randomly putting numbers in here, cause it's moving it that way. Okay, whatever, div, div, div. This will just be div. That can actually all stay there, and then this one's gonna be nth of type two, nth of type three. I don't think I want that there. Content I don't need on there anymore. Position absolute, these won't work anymore though. Copy that, or this is all my divs though. They should all have that with, so I don't need to worry about any of that. And then this is my nth of type two still. Okay, that's gonna be a lot easier. Okay, yeah, that'd be a lot easier. Top is going to be 150, and then the left is 150, let's say. And then the rotation is 125, 175. I can't do math. That's negative 45, 45, 90 plus 45, 135. Ha! 200, 175. My left is off div. My left is too much, I think. Oh, and top is 180. Perfect. Now we just need the other one, so I'm just gonna copy this, do that for my type three. So if it wasn't for the rotation issue, rotate, can I just do 135? No, I can't, of course not. Ha! Negative 135 minus 90. Wouldn't that be just be 45 again, though? Or is it just 45 here? Oh, it is just 45. And then the top is going to be like 50, 75. Whoops. 35. Ah, come on, 40. Perfect, we got it. Submit, submit. 100%, there we go, 745. I knew pseudo elements were the wrong way to go, and I went with it anyway. Oh, well, that was fun. Design course, Gary, thank you very much. You're brave doing these live. Thank you. It's all fun. You missed the one where it was a real disaster, at least, so. Yeah, so there we go. Gary, you already put out the video where you, how did you get that one out so fast? I didn't even see it yet with your daughter. I'll have to check that out once. Oh, I could have used turns, it's true. Half turn would have probably been easier. Oh, it's true. We could have just done a whole grid and just had them set up and then rotated the whole thing. That would have been easier than what I did. Move it first, then rotate it. If you're using the rotate and translate properties, it shouldn't, the order you put things in isn't weird anymore. Why not put position? I did use position up. This div set everything up, so I had position absolute on every div, and then these ones, so I didn't, oh, I didn't have to put it, you're right. And yeah, if you get stuck at 99.9, you basically have to start over again. And it's often like a little silly thing that's just the algorithm that uses to match stuff, doesn't pick it up for some reason. Jonathan, this is why you choose back end. I mean, this isn't real front end either, though. You wouldn't be doing this in real life. John, thank you. It's, yeah, and sometimes talking through it actually makes it easier because you realize what mistake you made. I guess we'll jump into the next one unless I see any new questions come in. Give me one second here. All right, I did see a question that came in on extensions of CSS, such as Tailwind and SAS, so I see why people like most of them. I've been a big fan of SAS. I'm working on a Corsair SAS, so I should be a big fan of it. Tailwind, I know why people like it. It's not really my jam, but yeah, I think there's a reason these tools exist and different depending on what you use them for, your workflow or what your specialty is and all of that that you're obviously gonna gravitate, I think, towards some tools over other tools. If they ever add Amit's stuff to a CSS battle, I give up. Raju, I've been playing around with Silt and I like it quite a bit, actually. Astro asking about a stream schedule. Anytime, I'm probably, I'm gonna be trying to do them on YouTube once a month on probably Tuesdays at 10 a.m. I haven't put anything in stone yet, but that would probably be my schedule. Yeah. Sebastian asking about how often huge CSS updates are rolled out. So we're never gonna have, I doubt we'll ever have the CSS3 update we had where they completely revamped it all or they just added like a ton of new stuff. And one of the reasons for that is they realized when they made CSS3, they actually made a bit of a mistake in, or no, they fixed a mistake that they'd made with the previous incarnations. And if you look at when CSS2 point whatever came out and then the three, there was a huge, huge, huge gap because there was so much new stuff. And so when CSS3 came out and it's the reason, except for marketing purposes, they'll never be a CSS4. There is talk about doing it to make people aware of all the new stuff that's coming. But really CSS3 is the only thing that will exist because what they did is they broke everything. All the different pieces are on their own spec now. So you have like your layout level, I think we're moving on to layout level four now. You have colors are probably in level five with level six being worked on. You have like grid is in level one, sub grid would be part of level two, masonry layout would be part of level three of that. And they can all be come out on their own. We have containment level one now with container queries. So everything is on its own sort of track. And so it's more of a, everything just sort of happens now. That said, this year has been kind of crazy. The last like 12 months and the next 12 months, there seems to be a lot of stuff coming. So we have container queries, we have the has selector, we have is and where sub grid is finally landing and browsers, what else? We have all the new color stuff coming. There's a lot of new things that are either here or just around the corner. So it's a pretty good time. Just seeing, just trying to catch up quickly on the chat. Sorry, and if I miss anything, I do apologize. There's a lot in here. Robert, do I think Apple will ever allow a fixed background on mobile? Probably not. I don't see, maybe I'm wrong, but I'd be surprised at this point if they haven't changed it yet. CSS media features. Tkash, you probably can post again. You wanna be more specific? CSS media features, like regular media queries or like, oh wait, maybe it's this. Yeah, I'm just thinking of media queries. I'm wondering if there's anything other than that that you're talking about. Sierra Lana, do I prefer SAS over CSS? Yes, but not, I do, but not for, I like it because I can set everything up and then not worry about it so much and just it allows me to work a little bit faster. But it's more for like project setup than it is for like just authoring it. I don't mind not using nestedding and stuff like that. I do like it though, but question. If something is possible in both CSS or JavaScript, how do you personally decide which approach to take? If it's something that involves the layout or the styling, I would go CSS. And if it's something for interaction, I would generally use JavaScript, lean into what they're made for. If I can do it with CSS without JavaScript for a lot of things I would, as long as it's not like a hacky solution and try and ship the least amount of JavaScript possible, I think is usually a good philosophy. But then if you're getting into super hacky CSS solutions, at one point you should use, like if it's in, I'm clicking on a button, I don't want to have to set up like a check box hack, if I could just do a simple event listener, so. Okay, last question before we jump back in. Astro, do more CSS battles with YouTubers. Thank you very much for the super chat. And yeah, I do plan to. I don't think I could do them live. I don't know how I would do it, but yeah, I think eventually I have some ideas planned around that. And people overreacting with Adobe buying Figma. I don't think we'll see a big change to Figma in the short term, as in like the next couple of years, I don't know what's gonna happen long term. We'll see, I guess. Yeah, it really was like we can't beat them by them because they tried definitely to beat them and it didn't work. Hopefully, I mean, it's a lot of resources going into a popular product is not a bad thing. If the team's mostly staying there, it's just like, is it gonna get pay walled in a different way or is it gonna stay with the current payment system? I think is what most, well, there's that and just becoming a bit more bloated, I think are the two things people are most worried about. All right, so yeah, I just said that would be the last question. So let's jump in. React live session, please. I'm not the person you want to be watching doing React. Yeah, well, so here we go. Stopwatch for the next one. I'm wondering when I see something like this, I'm wondering if I can use box shadows for this one. So that's where I'm gonna go and we're gonna see what happens. Yeah, I might, I feel like it might be the wrong direction but my first initial thought is box shadows. So that's where we're gonna go. So let's start the timer with three, two, one, go. And we're gonna get the background color and let's try not to muck this one up for the first time today. And I did nice body background is that. We're get our div and our div will have this background on it. The width will be, oh, I need two divs. This just got more complex. No, okay, we're gonna do one div. I hope this works. This just got more complicated than I thought it would be but we're gonna try. 200 pixels, 250 wide maybe. We're just gonna position it, position absolute because it's easier, absolute. And don't generally use position absolute in the wild if you know me but is that lining up? So maybe an 80 or I've gotten in trouble with this before maybe instead of that, I do margin 50 auto. I think I've had trouble with auto margins in the past with CSS battles. I think my two corners are actually not too bad. Now, this is where we're gonna find out if this was the wrong decision where instead of a background, we're gonna make this a border of solid 30, okay? And then if this is only a border left and a border bottom, let's, yeah, border left and a border bottom, I copied and pasted the wrong thing. Smooth, Kevin, smooth. If I do that and then this actually would have to be a square then. So let's do 150 for now. My positioning is gonna be off. No, this doesn't work. My idea was I could do that and then rotate it 9 degrees. The problem is negative 90, whatever, negative 45. You can see like this didn't work properly with that. That was sort of my worry. I mean, the height and stuff, I could squish it down. I could prop, oh no, that wouldn't, all right, I could, anyway, okay, that doesn't work. So do I do two, oh my goodness, okay. This is one where you do reset and you rethink about it a little bit. I could also do that and then this is gonna get, okay. Parent.parent, I have to do it the other way. Div class equals parent. I didn't think of this one properly at the start and when you don't think of them properly at the start, it mucks everything up and then in here we'll just do a class equals C for child and we'll do P for parent. This one will be my .C, P and we're gonna do a, this is not the right way to do it but we're gonna try. Um, close div. And this one will be overlay, so an O for overlay. The chats are, I can see the chat scrolling by. I'm not looking, I know this isn't the best way to do it but my brain's stuck so we're going this approach. Overlay is gonna get the background of this color. There is a better way to do this but actually for now we're gonna give it a pink background and we're gonna change that after just so I can actually see what I'm working on. Height can be like 100 pixels. Position of this will be absolute. The parent is a .P. .P is going to be position relative. Just make sure P, O and C, perfect. Overlay, height, width, 100 pixels. We do 100% percent, there we go. And then just say that it has the Z index of that and then change the background color. Is this the best way to do it? I don't know. My shape is wrong too. Height here, because I'm rotating it, which I'd have to do anyway, but let's change this actually to 20 and 20, 25 probably actually. Because I sort of need to squish it that way. I'm a bit worried I can't with the approach I've taken. Oh, I really mucked up this time. Is there another way I could do that and get that shape here? I'm not, I could use a clip path probably. Just to show you what my original idea was. Oh, my original idea wouldn't have worked at all anyway. It would have had to have been, my box shadow idea would not have worked. So it doesn't really matter. I'm stuck. I don't know what to do. Because I'm thinking here, let's just try transform skew. Why? Of like, does that even change? Oh, Gram release coming in. It doesn't like skew. How do you, I never skew things. What if I just did, how can the skew on the P isn't changing the C? Wouldn't that change it? Let's just try this on the C itself. But is skew not something I can do? The only other thing, let me try and think. Okay, we're gonna do C1. This isn't the right way to do it at all. C2 is this, I'm trying to think. If I do it, okay, let's turn off my rotation because that's gonna make it a little bit easier. Take this off and take the overlay off for a second. I have that. If instead of doing that, is there another way? Okay, wait, wait, wait, height. Yeah, because I'm doing it as a border. So instead of doing it as a border, let's do that back with a background color. This, when I saw this one, I thought this was gonna be the easy one. I have a new idea though. Background is gonna be that. It's going to be a width of 100 pixels. I had it before, 150 maybe, 200, 180 I think I had, 180. And a height of like 120. I think my width is, oh, it's not wide enough. 220. That's just, looks like it should be like 221. But if I do that as my width, I do my box like that, there's probably a way to do this really easy with gradients. Just to get like these lines coming in that would make my life really easy. And this is where my knowledge of gradients completely fails me. So if I do that, see, I'm stuck with the same thing. My idea was I could take my whole box and then rotate like the parent to get what I want, but it's still not gonna give me that squished style. I'm so stuck. This is almost 10 minutes and I've gotten nowhere. I might, if I, I'm gonna have to look at chat and get an answer on this one. And this should be the easiest one. If these were actual like Vs and not squished Vs, I think I'd be okay. But because they're sort of squished, because here what I could do is I could have this as my background, rotate the whole thing, cover it on this side and with the parent rotated and then just have copies of that that are stacked. That's not gonna work though because once I rotate it, I can't do that. Maybe I could skew it and I mucked up my skew, but it's been 10 minutes and I got nowhere. So I'm gonna look at the chat and see if anybody, how about having overflow hidden angle to acute skew should have degrees. Oh no. Okay. So if I did this, oh, see I had the border on there still too. Let's just turn off my background then. If I do this as 220 and 220 just for fun, rotate it again, rotate it. That makes sense too. Rotate negative 45 degrees. Margin zero, just so we can see it. I guess this could be smaller at this point, whatever. And I did my skew here, transform skew 10 degrees. Skew Y. It's not what I wanted. Zed, can I do a skew Zed? No. It's 15 and 15. Goes back to what I had. Does skew not take two values? Cause it's sort of like skewing it that way now. It's not what I want. Let's see skew is degrees. Just copy and waste. Border style inset. Would that take off my skew here? Inset. Oh wait, I see what people are saying. If I did, and then border top is transparent 25 pixels. It's the same thing, right? Border right is transparent 25 pixels. It's not gonna change the style. You get that like the line here is okay. Let's see what else we got. Different colors in adjacent border result in 45 degree angles. The problem is I've rotated the 45 degrees. So that's why it's not working. Use a container to create half the width parent overflow hidden and child box shadow with skew. Box shadow, maybe so was I right with shadows? Zero, zero, let's just say 100 pixels and that and this should be zero. And this is obviously way too big, 20. Oh, could I do, and then I could cover the overlay that gives me that same style. And then I just thought of something that might work. Let me just see. Cover the top part with a rectangle. So yeah, that's what this was for. My O is my overlay that covers the top half. I'd have to change some styling on this obviously to get it to work. This margin zero auto should actually be here. Margin zero auto or not. Nevermind. Let's just, yeah. And then we can say width is min content. The width here being 100% is mucked for whatever reason though. That's okay. We can just do pixels. Width of 400 pixels left of zero. I thought that would work. Okay, nevermind. We'll just take this off of here and put it back here. Anyway, if you get the idea, I was gonna do that. So we were sort of back where we were before. Width, because if I do 150, 200, 200. I had my rotate negative here. If I did the rotate, no, because now if I rotated the parent, it would screw up the overlay. But what I was thinking is, what if I did, so I don't know if I can do it. So I'm just gonna do a transform rotate. Transform, rotate. X, bat. And then this has what's it called, perspective. Do something like that too, no? I'm so stuck. I can't believe I'm so stuck on this. I see Odin say, okay. So you know what I'm gonna do? Let's just make only my seat. Because Odin's saying I don't need anything, but I do. I'm pretty sure. Let's comment that out. Because the problem is, and I see what you're saying, Odin, but the problem is if I do, and I take my rotate off of here, oh, Zed was probably the wrong one. If I do this, I don't, I muck something, oh, here. If I have that and I do border, and I know we can do this with the shorthand, the border left 20 pixels solid. I'll just, I'll leave it like that and we'll change the colors in a second, whoops. Or border is 20 pixels. Whoops, border, border is 20 pixels solid. And then we say border left is transparent. And the border bottom is trans, transparent. We definitely get that going on. So 150, let's just 150 and 150. But then if I rotate that, rotate negative 45 degrees, the problem is the intersection of them, or whatever, the other way. 135 now, because I did the other sides. Like I'm getting them this way instead of having them flat. So then I need an overlay to cover them. Making a triangle and positioning it above the other would be a good idea here. I don't, the triangle on top wouldn't really solve anything either. I really need the overlay, I think, to get those flat parts though, no? So, and then saying, so border left border inset. Does that, that doesn't help me either. Because that's inset on all sides. They all have, every border right now has 20 pixels inset and then I think it wouldn't overwrite that. Oh, maybe, color, did I muck that up? Oh my goodness, okay. It is borders, but then it's still, how do I smush it then? Okay, I was wrong, I apologize. Border, oh, but inset doesn't work because then it changes the color of one of them, because inset's weird, right? And if that goes back to solid, what? Oh, okay, there we go. So I don't need an overlay. I do apologize, but now I still need to squish it and I don't know how to squish it. Can I squish it here? Sq, transform, sq, 10 degrees. See, sq's doing that, sqy, sqx. How do I smush it? Oh, I know, Kevin, I know how to do that. Let's scale, not sq, scale, y, 0.8. There we go. We got the right shape, it's just the wrong size now. That actually looks pretty good. I think it's a little bit too thick. I think I was right with 25. Oh my God. And then if I move this scale to here, does that, can I just do that? Oh, because the rotation, I guess the rotate's mucking that up. So it is useful to do that on the parent. I still feel like the size is wrong. I feel like the easiest thing now is position. Wow, that took me so long and should have been easy. Absolutely, I apologize. It was borders and I just mucked it all up with 100% min content, min content. Margin zero auto should work. Oh, it's margin zero auto would work if I did a left of zero and a right of zero. Or should I just do inset, inset of zero and then auto would get that one there. Position absolute and then I can just use top of, I don't know, I'm so frustrated with myself on that one. I'll go with 30. Yeah, I'm super frustrated. See, we'll just do it, D, E. We got there in the end. Anyone who was saying borders, thank you. Clip path probably could have worked to you, but I would have been mucking around with the clip path for so long. So this is C, I'm just gonna do this really fast, D, E. And then my D and E, I can just change the top. Top of the other one was 52. This one would be like a 70. No, like 120. Whoops, 100 and 30. Problem with this is I never know which way I'm off. Border, color, red, I'm two. There we go, 13. I think my size is actually a little bit off, right? But closer. What's my borders at 30, whatever. I'm so fed up with this one. D, E, 200, 180, probably 178 or something silly. Let's hit submit and see what it gives me. Thank you for your help chat. It does not, oh, there we go. 99.6, I'm gonna take it. I could muck around and probably get it closer, but. I bet you there's also a way to do that one with gradients, and I'm just not good enough to know how to do it with gradients. So this will be the next one. That one should be a little bit easier, but I need a break for a second from that, so we'll keep talking. Thank you everyone. My original idea was to use box shadows for that one and would be to have the problem at the box shadows. I don't think we would have been able to cut it off that way without an overlay div and then we'd still have to squish it. Yeah, this probably, my original solution to a lot of the older ones was using box shadows. They seem, maybe my mind's not in the right spot for those anymore or something, but yeah, gradients with rectangle 45 degree linear gradient, probably a div behind with the same, but 90 degree. I don't think you can use the background images in these. It'd be very disappointing if you could. Adarash, I'm not the right person. I don't know enough about either one to be able to comment on them. Moobin, I won't go into too much detail, but professionally about just a bit over a decade. The, Dana, the link to these should be in the description below, but I'll put this specific one here. This is the next one we'll be working on. Should be easier. Yeah, that's the famous last words, right? That's what I thought about the last one too, so. All right. I think, you have, Gilash has a problem, a variable with an array of an IDs taken from different HTML button. When I change the HTML page through the href, the array IDs just disappear and I don't know why. Hard to say for sure. If you're really stuck, there's a link to my Discord. It should be in the description, I'm hoping. Let me see. Is my description not properly set up? I don't even know. I don't know how that works. And if I can edit it now. If it's not in this video, all my other videos, one of the first links is always for my Discord community. It's a great place to ask questions because you can share your code and stuff. A lot of the modern websites that are over the top distracting on responsive and on intuitive, I mean, it's one of the issues with websites like awards and all of that, I find like they make things look really amazing, but they're not always the friendliest when it comes to accessibility. They're not always the best when it comes to, they're show off sites and they're really, the purpose of a lot of the sites that are really just like mind blowing is to win an award for design agencies to be like, oh, we'll make a website for you. Look, we have awards, right? So if you're a freelancer and you're showing like, oh, I have like, here's my credentials. Like I actually have awards for designing websites. So you need to make it really stand out, make it kind of crazy. Probably not the type of site you're regularly doing, but yeah, I'm gonna jump back into the next one though. I think I'm ready. So if anybody's just jumping in, I think I'm gonna do this. I'm gonna take like a little five minute break after this one so I can refill my water and then we will be back at it right after that. I see, do I do a lot of React for front end or another framework? I don't do a lot of React. I've been playing with Svelte's mostly. I generally try to use static site generators. I'm really in love with Astro lately, which you can use React with if you want to. I see a lot of love for the battles I've been doing or I've done with Kyle, so I'm glad people have been enjoying those. There's definitely more stuff planned on the way, but we're not starting quite yet with them. All right, so let's jump into this next one. We'll hit the start timer. And I think for this one, we need two divs. So we'll just do div and div. Both of those divs will get this background color, so that makes life a little bit easier. They're both gonna have a width of 100. Let's do like, can you have overflow on these? I'm not sure. We're gonna find out margin of body. We'll do a body margin of zero. The height of these I'm not too worried about. That's there. The body also will get this background color, background of that. And then we're just gonna do it. I guess we should give these classes class equals A because it's faster than nth childs. And we'll do a B on the second div. And we'll say that dot A, I'm actually gonna do dot B first dot B. Can I do this? If I do display, it's not worth it. Let's just do position absolute bottom negative 100. No, 100. Zero. Ah, I might have to change that a little bit. And then here on A, let's just do a rotate of like 10 degrees. Three degrees. The other way, negative. And we'll do a, let's do it the old school way. Margin top of negative 10. Actually, my height's gonna have to be bigger on these. Let's just make it really big. And then negative like 100. Oh, that's mucking this one up. Let's just do display none for a second so I can see the one I'm working on. And then a margin, margin left of negative 100 pixels. So I'm not worried about it. And then put my diff on. So three degrees. We're actually gonna try two degrees, try four degrees, 3.5 degrees. That actually looks pretty good. And then my margin top, we can do negative 195. What just happened? Oh, that actually looks pretty good, 194. Perfect. We can put this one back on. Let's even, maybe I just do this all with margins instead. Margin top 50 pixels, rotate 3.5 degrees. Margin left is negative 100. Just, there we go. And then my margin top is just gonna be bigger. This one definitely ended up being easier, 50. Where's my, I can't see what I'm doing. 120. Okay, I can leave my mouse there and just do this, right? Mine's the one on the left or the right? Mine's the one on the left, 80. Oops, 80, 85, 89, 88. Come on. 100%, there we go. Three minutes, 30 seconds. That was easier. I thought it would be. Much more enjoyable that one. There's probably other ways of doing that for sure, but too thick asking why we should focus on CSS styles when there are libraries. Basically, because you can't use those libraries very well if you don't know how to write regular CSS. Like Tailwind, you're not gonna, you're writing CSS just through utility classes instead. So if you don't know CSS, you're not gonna be able to use Tailwind. And you'll make a mess of stuff. Bootstrap, same thing. You might be able with Bootstrap because there's a little bit more, even with like Tailwind UI, maybe you could accomplish a bit more. But as soon as you get outside of like exactly what they provide, you're stuck. So understanding CSS and then using those tools is a much better way, in my opinion. Add our Angular or React. Do I have to pick between those two? Neither? Mark, you're using iconic gradient. Oh yeah, okay, I could see how that would work, but I wouldn't wanna try and do it. Vincent, I'm glad that you enjoy watching me or hear me talking through what I'm doing. Could you do Preserve 3D and Rotate Y? I don't think, on the one I just did, I don't think you need the Preserve 3D. I think you just do the Rotate. Well, that's what I did effectively, right? Do I have videos about app media? I definitely do. I think I have like a really short one that goes into, it doesn't go into everything there is, but it goes into the basics. And I have another one coming next month actually on some of the more accessibility-featured stuff in there. Philosophically speaking, do I worry that CSS Grid is going to lead to monstrosity scary designs like table layouts did? No, I mean, table layouts were hard to do because tables weren't meant for layout. CSS Grid is actually meant for layout, so they'd actually be relatively easy. I also think from a design perspective, we're just not in that same stage that we used to be, so I'm not too worried about it. Could we use a clip path for this one? Probably, my mind doesn't go to clip path first because it's not something I use very often. KP97, I'd learn SAS to learn Tailwind, no, they're very different from one another. Or, I mean, you could create some overlap between the two depending on how you use one or the other, but they're two different tools. I'm gonna mispronounce your name, Clearim. How long did it take me? I've mentioned, we talked about it a bit before, so I'm not gonna go into it now, but let's just say a long time. We'll leave it there. It was a very long time. Okay, we're not going. That's done, that one's done, that one's done. This one I'm not looking forward to based on what we've had so far. Vincent, no, I'm not worried at all about software outputting CSS. It's been something that's been worked on for the past. I started making websites in the late 90s and there was software that would try and output CSS then and it's not really better now. And then when you get into tools like Webflow or something like that, the tools that are actually not bad, like Webflow, you're just writing CSS, but you're using visual sliders and stuff to write it. And that's the reason that those tools are actually output decent code is because you're saying margin left is 100, but instead of typing margin left 100, you're going into a little UI and you're just putting 100 where it says margin left. So no, I'm not concerned at all. Media query is going out because we have container queries. No, I don't think so. They'll be used less for sure. We won't need them for everything, but I mean, media queries do more than just viewport size too. So we're still gonna be using media queries for color scheme, high contrast, prefers reduced motion, print. There's lots of things media queries will still be used for, but even on the viewport, like you still have some things where the viewport is probably the main container. So you're probably doing like your wrapper based on that and you're probably, there's some things that we'll be looking at the viewport and it just depends. Should this component be looking at the viewport or should it be looking at its parent? So we'll have less use of media queries, but we'll still have them. Story book, please. I don't have any experience with it. Maybe one day I'll have a chance to play with it and then if I do, I'd probably make a video on it. What ID do I have in my mind? I think, I mean, I think fast with CSS because I've been writing it for so long. So like, I sort of have like my fallbacks and like the errors and like a lot of things, like, oh, this didn't work. So like this would be the next thing to do just because I've run into the problems a lot of times and like the property, it just comes more naturally to me. Whereas if you saw me writing JavaScript or doing some other language, you'd just be like, what's you doing? Just because I write CSS all day long, pretty much every day. So it, you know, the different, I know the properties and what they do. Most of them, I still, I mean, for this stuff, for sure. If ever you see me doing like a project live, it's not always so smooth or even the other one where I mucked up and I just got stuck. But too thick, I just answered that question before. And Cure for boredom, sites like Squarespace, they're always going to be around. They don't, I think they serve a purpose and in terms of like, oh, they're doing that for this, like it's people that aren't going to be hiring a developer to do something in general. They're using stuff like that. And even you can, if, you know, people get stuck using them, it's like WordPress, like someone will go and get a WordPress theme and try and set stuff up and then either they get something simple and it works. So they get stuck and they end up hiring a dev anyway or a freelancer anyway, or a small agency to help them out. It makes the web more accessible. So more people have websites. If it wasn't there, there'd just be less people with websites. It's not necessarily eating part of the market that's taking jobs away from other people is the way I see it. Obviously there might be a little bit there, but it's not enough to have a big impact on stuff. I do not code for Internet Explorer anymore. If you had a specific client that needed something that had to for some reason and they'd have to have very good reason to support Internet Explorer in my opinion, then sure. And they have to like show me the analytics that show me people are using it. Cause like when the major companies all moved off, that sort of signals that maybe you don't have to either. In my opinion. Now there's, there are exceptions to that. If you're doing something that's like, for a specific, like if you're working with hospitals, you're probably stuck having to support Internet Explorer for a long time. Cause they're on machines running like Windows 98. So like there are certain sectors and certain niche places where that might be the only browser you're worried about still and will be for a long time. But I think for most forward-facing public websites, unless there's a good reason to, which I don't think there's much of anymore. Did you think go for video? You learned full JavaScript? I won't be doing one. I think there's a lot of very good people making JavaScript content out there. So yeah, the fact that Microsoft's websites don't support Internet Explorer is a pretty big signal. Though I will say a lot of the big companies, like the Microsoft with their, a lot of their online tools, they're not supporting Internet Explorer anymore. But the websites as they are now would actually work. It's just any future work they're doing on it, they're not worrying about it anymore. So it's not like, oh, we flipped a switch and no longer support it. It's like going forward, we're never, we're not concerning ourselves with it. But even like if you use Internet Explorer now on a computer and go a computer that's up to date and you go to Netflix or something like that, it actually says like this website doesn't really work here and it opens edge and opens that page in edge automatically. So, you know, brought worst, I am now full time on content creation, YouTube and courses. All right. Let's, yeah, I'm gonna take a little break. I need to fill up on my water. So I'm going to, do I have a break screen? I think I have one. I do. I should have some text on there. Where's my text? Okay, we're just gonna, that's not a good break screen. Where's one second here? Oh, that's weird. Hmm. Give me one second. Why is that my break screen? Da, da, da, da, da, I will not be long, but I don't wanna leave that. So we're gonna go to the starting soon screen. If I can find that one, this one, and let's do this. I'll be right back. There we go. Better than nothing. As you can see, I haven't streamed in a while. So I'm not really properly set up and we can take that one off. Ha, there we go. I'll be right back in just a second everyone. Alrighty. Sorry about that. Let's go back to here. We're back. And we're ready to get started on the next one. Let me get the chat back up. My audio seems to still be working. So that's perfect. The song just finished. So that was good timing. And we can jump back into it. Drinks and sandwiches. Yeah. All right. Just perfect. All right. I see someone mentioning clip path for the next one. So this is the next one we will be doing. I actually saw it. You know what? Clip path probably would be the easiest thing. Just two divs. Okay. I wasn't going to use clip path. I was going to muck around with skews. The skew was weird when I tried it though. It wasn't doing what I thought. This looks to me like it's something that could be skewed because to me a skew is like doing that, right? You have a square or whatever and you're just like skewing it. This is that. I know you can't see it. It's under my face a little bit. But here let's turn off my face for a second. This triangle, if it's a perfect triangle, or if you do that, put my face back on. Oops, wrong face. I think we can do that triangle with the triangle trick though, right? So we don't have to do, oh, we could just do a clip path, one div with a clip path on it though. If that line is straight. Okay, we'll try clip path just to mix things up a little bit. So, but yeah, I think you could do it with a div there that skewed and then use the triangle trick to do that one. Those are sort of my ideas on that. Oh, my skew is weird last time. The rectangle is skewed. Yeah, my skew was mucked up because I had a rotation and then I was skewing so it was kind of weird. When am I planning to create an intermediate and advanced section on CSS battle? What do you mean? Or do you mean with their learning resources? Another question from my son. My son's at school right now. All right, let's get started. So one, I'll put this on. One, two, three. We're gonna try with clip path and we'll see how it goes. I know how clip path work, but I'm not comfortable with them. So this will be my body body. Why do I keep putting my body up there? Body, we'll get background of that. And then my div will get this. And you know what might be the easiest thing is with is a hundred percent and a hundred percent. No, probably not actually. The idea with a clip path is now, this is where, if I just wanna draw a path, I don't, is it just, how do you do a clip path again? All right, CSS clip. See, I'm not good. Clip path is not what I'm comfortable with. I'm not gonna make it here. I just wanna see, oh, it's polygon. That's the word I'm looking for. Polygon, because that lets you set the different points. So I could say I'm going, I'm at my first point to be down like 110 pixels and over, let's say, 10 pixels just for fun. Then my next one is going to be 50%, 50%. I hope I'm doing this right. Then my next one's going to be 50% and 10 pixels. Ah, okay, things are coming together. I know it looks weird, we're gonna get there. Then we're gonna go all the way over 100% and down like, I don't know, 150 pixels. See how we're starting to get this weird shape coming in? So basically I'm just like following the triangles. Anyway, I'll explain this a little bit. The next one's going back to my 50%, 50%. Then we're going down, so we have the 50% and we'll just do 100% for now. Then we're gonna go over. So we're going, I said 10 pixels and let's say 250 pixels. So I'm mixing values up, which is kind of confusing. Why is my first one, oh, whoops, should that be, oh, that should be like that. And then, oh, see, I was mucking things up a little bit along the way. So each one of these is a point. So this is my first point is 10 pixels over 110 down. My next one is dead set in the middle, which actually is exactly where I want it to be. So those are perfect. Oh, look it, I got pretty close. This one could be probably like 20 pixels, 15. So now I'm just looking at the point at like the top of the triangle. 50% is the right this way and now I'm just like how high up or low down do I actually need it to be? It needs to be a little bit higher, slightly higher. So maybe like 12, that looks pretty good actually. Now I'm going to the far tip over here and I just need to move it up. So the 100% here, I think is okay, but I need to move it up. So let's try like 110 or 80. Oh, okay, so 80 might actually be pretty good, but here we're going to do it at 98. I might have to bring pixels into this a little bit. The percentages might muck me up a little bit. And then this could be like a 77. Ooh, it's close. 78, oh, the other way, 98. See, this is where like the 98, I'm two, that's mine, that's theirs. So I need to go that way, 97. Oh, 97, it's like off by nothing. 96.5, 0.9. It's off by like a smidgen and this is where pixels would probably be better. Okay, that looks pretty good. This next point's okay. The next one, I need to move it up slightly. So this one was okay. This one I need to move up slightly. So actually you could do this instead, calc. So you do 100% minus like five pixels. That's probably a better way to do it. So mine's 15 pixels, 12 pixels. Perfect, that looks good. Then we have the next point. Oh, I mucked up my first point again. Anyway, my next point is way too high, 300 and 220. That's mine, that's theirs. Oh, mine's, that's a lot higher, 200. 200, 210, 220. Am I going the wrong way? I am, 190. Mine, theirs. I'm so confused. I hate when I get to these points where I'm just like, I don't know which way I need to move. Two, so if I do 210 and if I make 210 into 220, I'm going down more. So I need like 205. And then this should be like 12 to a seven. That looks pretty good. Now it's my top one. So that should be 12 and 100. If I make the 100 into 120, it's too low. So I need this to be at like 80, 78, 77. Boom, there we go. Submit, yay, 100% in five minutes, 30 seconds. See, I mean, a fun way to learn Clip Path, definitely. And yeah, Clip Path with the polygons is about moving points around basically. And if ever you want to make one, this is like the easiest way to do it. But definitely I think you could have done this also with a div, skewed it, and then like the triangle trick for the triangle over here. But this worked out okay. Clip Path's a fun thing to play around with if you've never used it. Yeah, if I had the box the right size, like the 50% was gonna work cause it is dead middle. If I just had the box off the side, and here too with like this 90, like this, it would have been smarter to use my calc. So you go all the way and then bring it back or you just make the box the actual right size up and down, which probably would have made it a lot easier to start with. Cause then I wouldn't be mucking around like this could be a hundred percent at the top. This could be a hundred percent at the bottom, a hundred percent left, a hundred percent right. Would have made my life a bit easier too. But yeah, so each point like, so the 12 pixels here is I'm saying this first point is 12 pixels in from the left and down 77 from the top. Then I'm going to this point, I'm saying go 50% of the way across and then 50% of the way down makes my next point. Then I'm going 50% of the way across and 12%. It's like you're drawing lines and this is where each point is and then you just connect the lines. So it's almost like I connect the dots. So like you're putting point one here, point two here, point three, point four, point five, point six, point seven, and then you're connecting those dots and it fills in the color inside the shape that you just drew is sort of how it works. If you're this clip path generator, if you go in here and you can like move the points around and you can actually see how it's manipulating things here too, can be a nice way and you can like muck around with different stuff and create different shapes, add new points, delete points and stuff. So yeah, the clippy, whatever, the site's awesome for learning and getting clip paths to start with and then manipulating it a little bit how you need it to be. Yeah, so just, yeah, we could, so Mark said if I do an inset position fixed and then inset of 20 pixels. So what the inset of 20 pixels is doing is just like move everything in 20 from the viewport basically and then here this could be 0%, this could be 0%, this could be 100 and this could be a 0%, that didn't quite work. But anyway, if you had it the actual size you wanted and then you're just going in instead of doing like magic number-y stuff, it's a lot easier to understand. Yeah, oh, I just lost where I was and I can't, can I get my, oh, I can go back to my last solution, okay. Cool, clip path responsive is don't use hard values, use percentages because the percentage, if the parent is moving or that item is moving, then like it will, it's a percentage of whatever is being squished and stuff. So if you're using percentages, it's responsive, if you're using fixed values, even if you're using fixed values, it could be, like if we do code pen just really fast. So if I do a box, let's just do this body, height is 100 VH, display grid, min height 100 VH, place content center, oh, I already did that, delete this one. And then I say my box has a width of 50% and a height, or we'll just say aspect ratio one aspect ratio one. Say the background is blue and I'll just grab a clip path from here. So let's say I take this hexagon and I copy the clip path. Why is that not working? Right, place content center, min width of 200 pixels. If I do that, like, hmm, it's not the best example width, let's just take off the place content center then, it's fine. So if I do this is like 50%, the clip path will respond to what I have, whereas if this was like 100 pixels, it's a hard set value. So it's always 100, so you can see how that, it's like a weird, it's cutting more or less because as it's getting smaller or bigger, that 100 is always the same. So if you're using pixels and things are moving, it's kind of awkward, but if you're using percentages, then it will adapt based on the size of the parent or whatever. Definitely takes some playing around with though, but yeah, there we go. Let's go on over to the next one, which was, we have two left, awesome. So I did say we're gonna use a box shadow, a gradient for one of them. This is the one I'm pretty sure I can figure out how to do this as a gradient on a single div instead of mucking around. I do know that these rounded things like this are not as easy. Rounded shapes and CSS suck, like curved stuff and wavy stuff. I don't know if Alvaro's here, maybe I'm mixing it up, but I think he posted, maybe it wasn't Alvaro, I don't remember. Somebody, I just, I know he posts good CSS content, but there was a recent post on CSS tricks on wavy shapes and stuff that I don't, well, we could probably even use something like that for this, but, and it uses gradients as well, but mess, I don't have any plans on, I'm not working with CSS battle to make any of their educational stuff. So I don't know when the next step is coming up for them, but I do like it. I think they did a nice job with their course. All right, so let's get started, reset, start. And I'm gonna do the body's background as this one. And I actually got it right, except this background. There we go, I finally got it. I'm gonna do that. Then, okay, there's a few different ways we could do this. I could do this as like a div, oh, that's not really gonna help me actually. I'm gonna do the circle at the end. I wanna get this, if I do that as one div like that, and then I have another div here. So if I do div class equals top, see it, marty top, and then I'm gonna have a div class, div class equals bottom. So my initial thinking was I'd be able to have the background, but then because of this shape here, I need to have something that's actually gonna do that. So if I do top is the yellow one, and bottom is this one, and then inside of that, I sort of need to have two divs, if I'm thinking correctly. Because I need one div, I could do one div that's all of this, but then I need this bit that's sticking up here. And I'm actually gonna, let's just do this as a layer. I don't, just for lack of good names, because I might be able to use that. Okay, so if I say, we're gonna do this as div class equals main, and close div, and then a div class equals side. Close div. I'm gonna take layer off of here. I'm not sure, we're gonna, okay, let's see if this works, main and side. Actually, let's put layer back there. Yeah, we'll put layer back for now. Dot layer, height is 50%. This will have to have a margin of zero, or it's gonna muck us up. Height of 50%. If I do background, background, light blue, just, okay. For now, I'm gonna say top is, dot top is going to have a background of black. Oh no, okay, we'll move that down. We'll put that at the bottom. Okay, so we have our top and our bottom. Fantastic, not really what we need yet, but that's gonna work. Maybe my body actually having that background color will help us to do this side, and make the other side a lot easier now that I think about it. So bottom, we'll have a width of 95%, and a margin left of auto, right? And then 90. If you hold shift, you flip this. So 90, I actually want this at 95. Let's bang on. So there, it's perfect. Then we can come on my bottom one. Let's actually put this color on the top. It might be easier to see what's happening. And then I can do a border top left radius, left, left radius of 100 VW. Nope, 50 pixels, 100 pixels. There we go. So that gives us that. Now the harder part is over on this side. Now maybe we could just layer things differently, actually. I was gonna do it where I was gonna add inside, like I was gonna use this side thing to create something else, but I think I'm actually gonna, whoops, what did I push? I'm gonna take side out of there, and I'm gonna make side here, dot side, side div class equals side, and close div. Side is going to get dot side position absolute, because I want it out of the flow. I want it on the right of zero and the top of zero. And let's give that a background of red so we can see it and give it a width of 5%. Position, top right, width, height, 50%. Oh, actually the width is gonna be bigger. The width is gonna be, it doesn't even matter. I just need it to fill up all that space, but it's actually gonna have this background color on it, and we can move that background color onto this light blue one as well. So we're getting that. Then my top layer, top, layer, top. Can I just Zed index this? So position, position relative, Zed index of 10 to move it up, width is 95%. And the border, border radius, a border, bottom, right radius is, was it 100 pixels? That worked there, but now I broke this. Why, I must have hit something that deleted that, and I didn't notice along the way. Top, whoops, top, left. Ah, that went better than I expected. I was gonna try something completely different, which means I don't really need this layer class. Maybe I, oh, the height and the background, whatever. I'm gonna leave it, we probably could clean that up a little bit. Cool, this is going much better. Div class equals circle, close div. And the circle will just come all the way down. Circle, position, oh, you know what, let's try this. Position fixed, inset of zero, margin auto. This is a nice way to center something on the screen. And let's just for now give it a background of red so we can see it, z index of 100, so it's all the way on the top, and then a width of 100 pixels and a height of 100 pixels. I'll explain how this is working in a second. Order radius of 100%, whatever, perfect. And then the background can be a linear gradient of this color to our other color, which is smooth, but then you just come and put 50% here and put 50% here and you get a solid line. Let's submit that, kind of percent match in 727. Awesome, happy with that. I think the most interesting thing I did here before I checked the chat, if you give something a position of fixed or I guess absolute, would this work with absolute too? Absolute, yeah, it would work with absolute as well. What it's doing, so we're saying position fixed and then I'm saying inset of zero. So you're actually saying that the top, bottom, left and right are all zero. So that's why when I first set it up, it took up the entire screen. We had the big red box covering everything. But if something has the inset of zero, what that's basically saying is that the width and the height, that's the space it's allowed to live in. By default, the inset or the top, bottom, left and right, it's all set to auto, which means just use the space of that element. So by doing that, we're stretching it but then I'm actually setting a width and a height. So the width and the height are gonna set the size of it but it's allowed to live in that entire space. And then the margin auto on here, auto margins work in this situation with the top and bottom and on the left and right. So it just takes that thing. If I had the inset of zero here, if I didn't have that, it's actually probably floating around over here or something who knows where it went. It's around, but the inset of zero is what actually allows this to work. And then the gradient here also, we have the 50%. So it's the stops. So we're saying this color goes all the way to 50% and then this color is at 50%. So it just makes a solid line at the 50%. If I move this off to 60, you'd get like a 10% little blur before it's 100% of that other color. There used to be a more complicated way to use the color stops, but you can do it this way now and you could do like a straight pattern with this. So then I could say red at, I don't know, 60% and blue at 60% or whatever. You can start creating like stripes and do other stuff and everything too with those. So yeah, that was fun. Let's see what happened in the chat while I was doing that. Yeah, I think someone said the same thing for the circle there. Is there a convention about Zed index? I tend to think of Zed index as layers. So like I might have a base layer where it's like one, two, three, four, five, where I'm using that if I need to move things around in my base layer. Though generally I don't. It's either one or into the negatives if I need to pull things back. Then I have like my layer 10, then a layer 100, a layer 1,000. And by layering it like that, if you're in, say you're in your layer 1,000 for like a nav and some other thing that's on top. And you go, this one has to be on top of that other one. You just do like a thousand and one, but you're within that sort of realm. And if you did one, two, three, four, five, six, and then all of a sudden you need to take something that's, you know, you need your seven to be behind the three. It becomes, you have to sort of refactor every Zed index. Whereas if you had it as one, 10, 100, 1,000, you go, oh, I can just switch this one to a 99. And I know it's in the right spot. And I don't have to change any of my other ones. Just makes it a little bit easier. What language would be better for this design? I'm not sure what you mean. If I had to make this for an actual website, I would use SVG like Odin said, but the Pokeball hard time on that one making the less than half a circle. A lot of time with these, if you're gonna do less than you just need another div that's on top with the same background color, right? So I could put like another div on top of this that's actually hiding part of it and just makes it look like it's not there. Cool, I think we can move on to the next one, which is the headphones. I think the hardest one was the stupid one I got stuck on earlier. How do we allow scaling a vertical scrollable cards? How do we allow scaling vertical scrollable cards while scrolling over? I'm not quite sure what you mean. Satanu, yeah, it's fun. This website is fun. All right. But do remember that like actual real CSS does get you a lot, you know, make real projects too. This is just for fun. I see a question about making it without PHP. There's probably a lot of different ones. I'd probably use some sort of JS framework to do something like that. Just because they make, I mean, you could probably do it with vanilla JavaScript, but with one of the frameworks that just makes state management a bit easier. So you're just managing state as the user progresses through. What was my idea on the previous one for one div? I don't know how you do it. I just said that it's probably possible. Oh, actually just really fast to jump back to that one. Just so you guys know that centering trick that I used because I just saw someone saying like it was centering it like that was really cool. I actually learned that by when the dialogue element first got added. So when you use the open modal and I was trying to figure out, I was looking at it because they, if you're changing the width, sometimes it's weird because the user agent styles actually have a max width and max height, I think on them or something like that. So they keep it right off the edges, but that's actually how they centered it and I'd never seen that before. So yeah, by looking at the user agent styles on how something was done is how I discovered that trick on centering stuff with position fixed or absolute. And the inset of zero. Alrighty, so let's get this one started. I'll be back in the chat in just a second. Hit start, background on my body. Let's see, I can actually add body and do background and for the last challenge, I think is the first time we actually nailed it. How are we gonna do this? This is, I was thinking every time I see one that I think is gonna be easy, then I regret thinking it. These two parts are easy. This is fine. It's this part and this part. Okay, I'm gonna do div class is equal to head and for lack of a better term and then we'll come and do the earphones after. Headband is going to be width of 100 pixels, height of 200, the height in this case doesn't matter too much. It just needs to be big. So maybe I'll even do three. And I'm gonna go with a border on this. A border of this color, solid and we need it to be kind of thick. So let's go with 30 pixels, 25. That looks okay-ish. And then I'm gonna do a border radius of 100 VW to give me that shape. The width of this definitely needs to be a bit bigger. We'll do 140, 130. We'll try that. We'll just go with a position absolute because it's easy, absolute top is going to be, and see we can actually use this trick here. So top is going to be say 50 pixels, which doesn't look too bad. And then I can say left is zero, right is zero. So this is the same trick I did because then I can do a margin of auto and it will center it because we have the left and the right and a width. So position absolute left and right plus a width and it will let you center stuff. So my top is a little bit off. So let's top should be 40. 42, 43, 44, 45. There we go. The width is off a little bit too. And I think this is a little bit thick. Let's just change my color right now. Color, mines. I'm a little bit too wide actually. Width, 130, 128. That looks pretty good on the width actually. That looks pretty good. Diff, close enough. Okay, so that's good. So we can put the color back. Cool, so we get that. Then we're gonna have, that's my headband. All that idea's a little bit mucked. Okay, so what I was originally gonna do is actually include the earphones inside the headband, but because I'm gonna have, or I could put it all inside here. Let's try doing this. Let's just do div class equals hide. Close div. This might not work, but .hide has this background. Whoops, background. I might have to move this out, but that's okay. Backgrounds of that, width is 100. Actually, let's do the background is red for now. Height, height is gonna be 100%, it doesn't matter. So yeah, the width will do like 150% position, absolute. Because this has positioning on it, this is gonna be relative to that. So I'm gonna say top is, I don't know, 150 pixels. Left is gonna be negative 50. This is where it shouldn't matter. Gotta spell absolute, you gotta spell it right. 25, there we go. I just wanna cover it and it's gonna get this background color. There we go, and then move it up. Even the height of it isn't too bad. I could probably leave it there. And then I can just do div class equals earphone. Close div. And I need two of those, so we're gonna have a left and a right, so then here we can say left and then this one is right. This one I'm actually going to comment out for now because it's gonna muck me up if I don't. So, dot earphone will be width 100 pixels, probably too big, 80 pixels. 80 pixels height will probably be closer to 100 pixels. The background will be this color. Position absolute, top is, I don't know, 100 pixels close, but not quite. Left is zero, negative 25, negative 20, 21 for some reason. Sorry for my dog barking in the background everybody. Border radius will be zero, 25, 25, whoops, 25. And my width is way too big. And maybe 50 was actually pretty good, 60. It's not far off, the border radius is probably actually 20. The height is way off too, so we'll fix that. Then we can go to my height and make that like a 70 and 80. The bottom border radius is actually different. So here let's try 50 and 50. The top, this one's way too big still. Or is it too small? Something looks a little bit off, it's so close. Okay, we'll just stick with that. So if I have that and I have that for both my earphones, that one's actually, the first one's in the right spot, so the left doesn't really matter too much here. Normally I wouldn't do this, I'd have like the left and the right as their own classes doing their own things and I wouldn't just use right things. But let's just do the top is good. The left, we're gonna set to initial auto. Auto, the right, we're gonna set to negative 21 and the border radius, we'll just flip that around a little bit where we do that. And zero, nope, 30 zeros here, there we go. It's off by a little bit. You can see it's like shaking a little bit, but let's hit submit and see how close we are. 99.9, I feel like we might be able to get it, we might not be able to. Headband, border 22, it's making it worse. 20, 20, can you do some pixels in this? And my border radius is a little bit off on 32, 33. I think it's 33. And now I'm a little bit off on the right side because I changed the width I think, 20.5. Let's hit that and see if that gives me 100% or not. Still 99.9, that's eight minutes and 20 seconds, close enough. That looks pretty bang on. It might be because I'm zoomed in so things are a little bit weird. Yeah, there's a slight little thing off somewhere, but I'll stick with that. Sometimes it's because I'm zoomed in too. The width probably wasn't 128, maybe it was 129 or 130. Usually they don't do the 128, so they have better numbers, but I'm pretty happy with that, that went all right. Other than the one that was a complete disaster, and if anybody missed it, it might be worth watching. This one was completely, a complete disaster on this one, but everything else was pretty good. Everything else went pretty good. Oh, this one was a bit of a mess too. This one and this one were the worst with this one by far the worst. But the other ones I think went pretty smoothly. Yeah, so I'm pretty happy with that. The earphones, yeah, we could probably use pseudo elements for that one. I'm pretty sure. Add our ash, okay, so you have a bunch of divs vertically stacked, so one after the other. You add a hover effect of scale, but the scale doesn't work while you're scrolling. I think it's because if you hover and then you're scrolling, or in this case it's working, okay, I'm here and I scroll up. Yeah, maybe this is what you mean. So if your mouse is here and then I scroll up, it's not like moving it onto this until the mouse moves again. I don't know if there's anything you can do about that actually. Oh, did I mess up my left and my right? Very possible that I did. All right, let me see if there was anything else really fast in the chat. Someone's saying I should make my own library. No plans to, no plans to. I have sort of like my starting file type thing that I use, but oh, you can't see my screen. I'm sorry, I do that all the time. If anyone's been on my Twitch streams, it's this where if you hover on top and then you scroll up, it's still acting like the other thing is being hovered on. And I don't think there's anything you can do about that as far as I know. And then as soon as the mouse moves, then it triggers that oh, they moved and then now hovering on that. I'm pretty sure that's actually done on purpose to stop, like to stop it that if you're scrolling a lot, that all of a sudden, if there's all these hover effects, I think they want to prevent weird stuff from happening because from an accessibility point of view, I don't know if that would be the greatest type of thing. Is there a library or framework for animation in CSS? There sure is. Let me see if I can find it. There's a few. I haven't used one in a while, but there are ones out there. Oh, I don't even know this one, but I'm gonna click on it. I'll show it to you in a second if I know it. This is actually, I have used this one. So this is animate.style. You know, you need a shake, you have a shake, back it, it's all different little animations. It's all simple stuff. There's also style open props that has some animations in it too, I think. Doesn't he have animations? He does. So there's like preset animations, fade out, scale up. Different things. You can combine them and stuff too. So yeah, if you look for them, you should be able to find quite a lot. And actually someone asking my favorite library, open props is pretty good. I used it for a lot of my demos and stuff for just like I need to throw something together quickly. I really like it. I'll put that in the chat so people have the link to it. It's by Adam Argyle. I have videos on it where I've looked at it and I have plans for more. Do I know how do you do the checkbox hack? I sure do. I do have a video that looks at doing a navigation with it, but I would just say use JavaScript today. Do I write websites? No, not really. I think I just answered that one. The thing with the checkbox hack is like when the hack is in the name of it, I'm always concerned with the accessibility of it pretty much. The nice thing I guess is it doesn't require JavaScript. It might actually be easier with the has selector now and maybe could be a bit better, but like relying on a checkbox to say if a menu is open or closed, I'd have to talk with some accessibility experts on that one to see for sure. I don't know if Apple's website still uses it. The navigation looks exactly the same, but they did use it for a long time if they're not still using it today, but I'm never sure. But I just think if it's an interaction like that, that usually JavaScript is the right thing to use. And yeah, one more thing. I'm gonna get going. It's my lunchtime. And it's been two and a half hours that we've been at this. So I'm gonna be heading out, but just before I do go, just as a quick reminder, it should be linked down below, but just in case it's not, there's the state of CSS survey that I'd recommend anyone check out if you wanna see what I knew about it and why I think it's useful and everything. I put out a video on it yesterday, but basically it helps track usage of CSS, knowledge of CSS features. It's the third year in a row. So you can see trends building up in usage of some utilities and other stuff like CSS and JS and SaaS and less and all of those things, bootstrap, tailwind. And it also is a nice way for browsers to know what people are interested in and how people are doing stuff. So they know where to focus their resources and can add the stuff that we wanna use sooner. So yeah, a nice, if you haven't filled it out, it's getting close, the deadline is very soon. So it doesn't take long to go through and you probably learn a few things along the way. I learned a few when I went through it and found some new content ideas for videos because there was a few, I have never heard of that before. So definitely worth checking out if you haven't already. Is there anything else really fast? That's the state of CSS. It was the main thing I wanted to mention. Yeah, I guess if there's any other questions, I'll answer them really fast as they come in for the next couple of minutes, but we're winding down. So let me just close this because I don't need that open anymore. And is there something else? I guess I will just say if anyone's looking for free courses or paid courses, I have some here on my website. And actually a lot of people were asking what JavaScript content and JavaScript stuff as well. So on here, if you go to the resources tab, or link or page, I do have some other CSS resources, vanilla JavaScript, libraries, frameworks and stuff and other courses. And there's Polypainty, which I'm a big fan of, which is a browser for web development. So yeah, if you're looking for extra resources and other stuff, check that out. And I guess there should be a link to my Discord, but if you're looking for like a community or something like that to hang out in, come in and ask questions and get help and all of that stuff, there's also the Discord as well. And Tate, I hope you enjoy it. Hell Ripper 3D challenge would be interesting, but Ardash, no, I don't have any Udemy courses and I don't have any plans to either. Shamir, I would say that would be a great question to bring up in the Discord about animating dropdowns and stuff like that. Because animating things that appear is actually kind of hard. If you're going from display none, you can't animate. So you have to come up with other ways of doing it or like a height of zero, you can't animate. So, or height to auto, you can't animate. The next stream, very good question. This replay of this will become available probably in a couple of hours. I know once I'm just gonna let it become public. So when this one is finished, it will become public, but it takes a while for YouTube to process it. So whenever the processing is finished, it will be available for replay. So later today, I'm going to be trying to do live streams here once a month. And I'm eventually going to be coming back onto Twitch and doing probably weekly live streams on Twitch. The Twitch ones are a bit more me mucking around and not getting a lot done. Usually on Mondays, they will start. I just don't know when I'm gonna start them. And the ones on YouTube will be a bit more like, here's something we're fun we're gonna do and like focus on like a tutorial. We'll do like a live tutorial or something like this or maybe do a reaction, look at some code pens and try and figure out how they work, that type of stuff. But like more focused stuff will be on YouTube. And the more just me trying to maybe learn something new or muck around and build something random, that's more of what I tend to do on Twitch if ever I start again there. I will, I just don't know when. My Discord is open for all. Let's just jump on in, it's free. So no problems there, KP. My channel is KevinPowellCSS. It should be, I might not be linked under this one but it's linked under most of my videos. Let's get it fast, Twitch. I can find it, there we go. I put my Twitch in there. But again, it might be a while before I'm back on Twitch but once I am, it'll be once a week. Anything else? If I did a bloopers video of things that went wrong, it'd be longer than most of my full videos. Actually, if you want to see me making mistakes and getting through them, Twitch is a good place for that. Oh yeah, and the next stream, so it'll be once a month, so let's say mid-November. I usually mention it on my newsletter. So if you're not on my newsletter, that's also at my website. I mentioned them ahead of time there when I remember to but I'm probably gonna be aiming for, I'll make community posts and stuff once I've come up with a firm schedule but YouTube will be once a month, mid-month, let's say. I don't know if I'll be doing Tuesdays or Wednesdays. This shirt is State of CSS, speaking of the survey, this was their logo from the first survey they ran. I don't know where you can buy it anymore. Let me check if it's still available. I don't know, if you did State of CSS t-shirt, you might find it. They have a newer one too, but yeah. Remco, it is over, I'm just heading out. A link for the Discord, I can pull that up too. Let me see, actually this is the easiest one. I'll eventually do something different with that URL but for now that goes to my Discord. More videos with my son will be fun. I'll see if I can get him in. I think it might be up for one or two more. So yeah, I'm gonna be heading off now so have a good one, everyone. I don't know if I have an end screen. I used to have an end screen. So yeah, I'll see you guys all around on YouTube. If not, there's Twitter, there's my newsletter, there's the Discord where I am relatively active. So yeah, come and hang out over there and I'll eventually be back on Twitch. I'll be back here next month sometime and Intel, whenever that is, have a good one, everyone. Bye. Oh, I'm not back Monday, let's hide that. There we go, thanks for watching, everyone.