 You know what I haven't done in a little while? A CSS battle. And this time, I'm going to be challenging you to play along with me. Hi there, my friend and friends. Thank you so much for coming to join me once again. And if you're new here, my name is Kevin. And here at my channel, I help you fall madly, deeply in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least get you to be a little bit less frustrated by it. And one way that we can always do that is to have some fun with it and have some fun with it. Well, let's have a CSS battle together. Here I am on battle number 14, which I haven't done yet. And the way I do it here as a challenge to myself and to you this time around as well is to try and do them as fast as possible to get a 100% match. I'm not going after high scores. I'm only going after a 100% match. I've linked to this battle in the description just down below. So if you want to, what you could do is go and time yourself for each one of these and then watch the video after to see how you do and let me know in the comments if you beat me or not and what your times are. Or if you'd prefer, you can keep me on the side, just, you know, hit play, let this go and see as we go through the challenges if I'm beating you or if you're beating me as we go through them. So yeah, with the ground rules set, let's see how we do. I'm going to jump right on into the first one. But before we start with it, I do have to make one setting change here in my dev tools just to help it. So you guys can see the code that I'm writing a little bit. And so I'm just going to come into the editor here and I think here if I do a font size of two rem, there we go. It makes the code a little bit bigger just so it's better for recording purposes and with that, I think we're ready to go. So I'm going to time myself. We'll have a timer running to know exactly what we're, you know, how long it takes me. So in three, two, one, let's go and see how we do. So the first thing I will talk my way through this. Oh, no, that what so I just changed the font size started typing and it erased every the font size change back. So I'm going to try that one more time font size. I'm going to go like that. And okay, let's try that again. I lost my style tag in doing that somehow and I can't undo. Let's just come here. I always forget you don't have to emit with these close style. Okay. So we're going to try this again and see what happens. So in three, two, one, let's go. So my first thing is let's just make sure that this is even working. So this is going to slow me down a little bit. Background is red and padding is 1m. Okay, good. So I'm going to need four main divs. I think so I'm going to do is a div. And again, I'm not going for high score. So don't mind if this is a little long note close div. Now what I'm thinking. Okay. One, two, three, four, I might want five. No, we only know for that's good. Yeah. Yeah. Okay. Four is good. I think that makes sense. Okay. So let's start with that. We'll do first we'll say body background is going to be this color, which you can just click on them and they copy to the pet, your board. So that's a little faster. And then we're going to do note note note width is I don't know 50 pixels height is 30 pixels. Probably not the right thing. And then background can be that color. Oh, so I made, let's see if this is going to work. We're going to do a display flex right on the body. I can already tell that my numbers are off here. Let's do like a 75 and a 50 maybe and hopefully this works gap of like 50 pixels third 25 pixels. Okay. And then border radius here border radius can be 50%. So they're too wide now. Maybe I was closer than I thought. Okay 50 not sure about this, but let's see how this goes. We'll do in a line items are not aligned justify content center and then let's just throw a margin top on the whole body because we're just going to move everything down of 300 250 pixels too much 150 170 Oh, that's not bad. I'm just looking at the top and that looks pretty good. So my height is way too much 40 that's better. My positioning is off, but my width is also too much. Was it 40 and 50 that's theirs and that's mine 45 50 maybe my shapes are okay. It's so hard to tell when you're not lining up right on. So my spacing is a little bit too much 21 20. I might need to do sometime margin of zero. No, that didn't help at all. Okay, so note. Let's just do a note note. This would be easier as a new ends of types. Let's just do an a note B note C note D. So then here I can say my a has a margin left. This is already not going well, but negative 20 pixels. It does move all of them. Okay, that's what I was sort of hoping for mine there. So mine needs negative 30. Oh, oh, look, my size is good. Oh, yes. Yes. So the other one we can do here is right away. I can say see as a background of this color. Great. Okay, now we need those spiky things are not well spiky thing. Can you tell I'm not a musician. I need these things coming here. So inside of a my HTML. Let's come here and we're going to do actually all of them are going to need this. Oh, my font size screwed some stuff up here. Sorry about that. But on the indentation, let's do up. We call it up div class equals up close up close up close div. Okay, so my dot up can be a position of absolute absolute. But that means that these notes will all be a position of relative. Okay, up is like that. Then we're going to say a width of 10 pixels and a height of 120 pixels. And of course we want a background background of inherit. So we don't have to worry about it. My height is way too much. Let's do it in 80. Maybe this is like maybe we're okay. So let's say bottom is zero 100%. Okay, whatever. We'll fix that in a second. And then my right is zero. We can just do it this at like 80%. 50. 50 is good. So I want to go up higher. So the height is going to be 100. Good. Good. Okay. So we're going to go up actually. We could probably pull that up div and put one. We need one in every single one of these up and up. There we go. So those are all working. Now I just need the side things. So the first one is here. I'm just going to do this one as dot div class equals side. And I'm also going to call it long because it's the only one that's longer. Close div. And then let's just copy that inside. So here's my up. This one doesn't actually need one. This one gets a normal side. And this one will get a side side. So it doesn't need the long on there. Let's delete both of those long side inside. And the second one will be side down. This is probably the messiest I've ever done these dot side. So background can be inherit again inherit the position absolute top will be 100 pixels. This time the height of them all is going to be 10 and the width of them will be 50 pixels. My top negative 100 negative 80 negative 80. Okay. And then a right of 100% negative 100%. Good. Good. Now my wit is 25 right a little bit longer a little bit longer with 3050. I thought we tried 50 and it was not right 40 maybe. And then we have to change the right. Oh man, this right is going to be. Oh, perfect. We nailed it. Awesome. So then we just need to do we're getting there super close long is going to be a width of 80. And the right will be negative 120. I should have just used pixels and not percentages anywhere. And with can be 60. Okay, I'll take it. That one's working. And then we just need my down dot down. We did a. So this time the top will be negative 40 pixels. That was 60. Okay. 60. I think that's it. I think we got it. Looks like it's a perfect match. Submit. Come on. 100. Yes. 100%. Cool. And that was eight minutes just just over eight minutes long. Not a bad start. That one is done or drove change because I have somebody doing some work on my house and luckily they started before we got to the next challenge. It was sort of in between when I was going to switch over. I thought I had a little more free time than I thought I did, but I didn't. So here we are to get into the ukulele. So let's go and do my quick inspect here to pump up the font size. And I think we'll go a little bit smaller because we had that issue before. So that's a 1.75 rem and ukulele time. And here we go in three, two, one. I just hit start. So I guess we can get started. And I think what I'm going to do on this outer one is give it a class of guitar. I know it's a ukulele, but I'm going to miss fill that was guitar. I think I can spell it correctly. So let's start with my body and we'll give it this background color background of that right there. It's a good start. I might regret this, but let's do a display flex again display. Oh, I'm going to do flex because I've used grid in the past and it's come back to bite me and we'll do it in a line items center. And what I don't know, we're going to find out in a second. Let's do a guitar. We're going to do this really fast. Well, let's let's just get in my guitar. We need these different pieces. Okay. Let's just say guitar background is red with 100 pixels height 100 pixels just so I see where it is on the page. Perfect. It's centered where I want it to be. So guitar on the guitar, we need a few different pieces here. So I think we're going to let's do what I'm going to do. Let's do div class equals left circle circle like this. Watch this. Okay. Close div. Watch this. Like I'm being super clever div class is equal to right circle. Close div. We'll need some more divs inside of those, but let's do my div class equals neck and close div. And this thing at the end, I think it'd be easier if we actually put that in here. So we'll say div class is equal to should use IDs. It's faster than right. Close. Close div. I don't know what that's actually called on a guitar because I don't play any music, but I'm going to call it the head since we have the neck. I put next. I want neck. Neck. Okay. And yeah, we'll need a few more divs in there, but for now that's going to be okay. My guitar, I don't know if I need to actually style anything on that. We'll come back to there. Let's start with my circles. Circles are this background color. Background of that. And they're going to be an aspect ratio of one. So I don't have to set a height on them. I guess that's all they have in common. So then we need, okay, we have the color all right. Oh man, my phone is dinging. I should have put it on. Do not disturb. I do apologize for the dings, but we're not going to stop now. We're, we're on, I'll do it before the next challenge. So we'll do left first left is going to be a width. 150 pixels. And if, but why is that not giving me? Oh, I think my other one is showing up. Border rate radius of 50%. Okay. Both of them are there. I don't want to use position absolute, but I think we are. So guitar can get a position. Do I want to do that? I'm going to throw a display flex on here too and do an online items of center on this one as well. That worked out better, but obviously it's not a thousand, whatever I had. That looks pretty close. And let's just say we have a margin left of 40 pixels. It's off by a little bit of 45 pixels. Mine is too far 42 40. Wasn't it just there? Oh, mine's still too much like 38 then 37. We nailed it. Okay. Perfect. That one's in the right spot. You can see I did 37 here. You don't actually have to put PX to use pixels in CSS battle. You do need units in the real life. So we're going to do a right now. So we're going to do a width of I guess a hundred. And let's say a margin left. We're going to get dirty here and do negative 50. Okay. Let's come on the neck next neck. And this one has a different background colors. When you're up you background is going to be that height is what 40 20. We'll try 20 and a width of 120. Not bad. Not bad. Except I do need to push it pull it in a little bit. Let's just say a margin left of negative five. I don't think it matters too much. And we want it to be behind Z index negative one. Oh, I didn't need positioning on there. Ha, cool. That I think is just a CSS battle thing, but nice that I could just do that. Look, so close. Okay, cool. That worked out surprisingly well. The next we want is the head. So height can be, I did 20. So I guess it's 40. And then the width is 70. The background is this one again background that color. That's way too big. And the height is 30, I guess. We'll try that. The head is inside. Did I put that inside? I did. Okay, so that's okay. We just do a margin top. I have never done one like this before negative five. Or, you know, we're in new work. Let's do position absolute. It's going to be easier. And then the neck will get a position of relative. Just because then I can do a right of zero. Perfect. It's a little bit off. So the right will have to change. But then we can also say top. There's tricks on centering stuff. But because I know the width is 40. We saw before a negative five should center it. Is the height even? My height might be okay. This needs a border radius. Border radius five pixels. 10. And then my right can be negative 15. Negative 20. 25. Look at that. Perfect. Okay. So in the head, we do need two dibs. So we'll just call these guys. I'm trying to think, can I just do div div? I'm just, we could, but I'm going to do div. Let's do an ID. So it's faster of one. Close div. And then a div ID equals two. Maybe we don't need these actually. Because what we could say on the head is, okay, let's get those in there. So it's my head. And we can say that we have the background color is this background. I should have set a utility class to set background colors. It'd be a little faster than rewriting it every time, but too late for that now. Okay. Background width is going to be like 70%. Probably should go pixels. I've height five pixels. Border radius 50 VW 100, whatever. You've seen my tricks on that before. And then can we come on here and say, head, display, flex, flex direction of column, not row, column, justify content center should go, oh that way, justify content space between and then align items of center the other way. Space evenly, I'm hoping. They're way too big. Three and 50. Four. Okay. I'm just going to come on the head itself and do like padding block, which is top and bottom only of like two pixels. Oh no, that made a bigger height. 26. Okay. We're getting a little hacky, but that's okay. Left circle can have a div inside of here. Let's just do div, close div. We only need one there and we only need one over here. So div, close div. So we can get those center things. Circle left, left. Left star. So it selects the div that's inside of there. Let's say that it has a width of 15. A border, border, border, radius of 100 VW. Height of 30% this background color. Whoa, whoa, whoa, way off here. Okay, width is going to be maybe a 10 and the height can be maybe a 40. That looks better. Is this going to work? If I do, let's try display grid, place items, center. I've used grid before on these before and it's gotten me in trouble. That doesn't even work anyway. So forget that. Let's just do position absolute, which we might, I don't think we need on the other one. Oh my goodness, we might want to, whatever, position relative. The sizing is going to get thrown off when I do that other one. Position absolute, top of 40, 40. That looks okay. Left of 30, 40. I'm off, oh, I'm really close. Oh wow, height is going to be, let's do it in pixels, 35, 40. Oh my goodness, I got a little lucky there I think. Okay, that worked out. We'll do my right now. Right, let's select the div inside of there. So here my idea is to use this one. So if we do border radius, 50%, width, let's just see what happens here. Width of 50, I think it's a bit bigger than that. Aspect ratio of one. I don't see anything. Border radius width background, background of this. Okay, so display grid, place items, center. Okay, so it is too big, let's try 40. It is 40. And then I want a border, five pixels solid and this color. We're there, perfect, perfect, submit. Yes, and almost 12 minutes, 1143 by when I looked at my clock. We'll see what the official timer says on this one. But yes, 100% happy with that. Worked out pretty well. Yeah, awesome, cool. So let me put my phone on Do Not Disturb and then we'll jump right into the next challenge. Why did I choose this one? Okay, it's the last one of the set though. Oh no, it's tambourine, then piano. Oh no, oh no, okay, okay. I was like, oh no, but then it's even worse. Let me just find what I need to edit here. Let's get my font size set on there. So we'll do font size of 1.75 rem. We are good to go. I'm going to hit start. Let's right away grab this as my background color. Body, background is that. I think all the divs, like... No, okay. I was thinking we all going to have the same color, but now I'm not so sure. So we're going to, oh my goodness, div class. Is there an easy way to do this? This makes me think of when I had to position things in a circle on a video that I did recently and everyone's like, oh, you just need to use this math to do it. And I'm like... You can tell who went to computer science classes and who didn't. Okay, div class. So we're going to have my odor one. So let's just call it odor, odor, that's fine. And that's going to be you. Yeah, okay. So we'll start with that. That odor is going to be a width of 150 aspect ratio again of one. And then border is five pixels solid and that color. Much bigger, 10. We want a border radius of 50%. Let's see display flex. Right in the middle. Align items, center, justify, content, center. Are we in the right spot? Probably not, but my circle is probably the wrong size too. It's so hard to tell sometimes. Okay, no, we're not sent. It's not actually centered. Margin, top, like 10. Oh, oh no. That's so close. It looks a little bit off maybe diff diff. It's definitely off my circle needs to be bigger. Maybe 150 was right. 155, 155 and then I don't completely come off. Okay, it's so hard to tell. I'm too high. Margin top 20, 25 so hard to tell. Oh, my top is lined up right on. So it is 150. My top was lined up. Oh my goodness. So I just so hard to get the right size. The two sides are okay. I can't tell I'm too low now. If I'm too low 22. Oh, I think that's it. Okay, I think that's good. I think that's good. So now we're going to have that's my outer. I think everything is going to be positioned in there. So we're going to have a div class is going to be equal to inner a closed div. So we're going to have one, two, three, four, five inner a's one, two, three, four, five. And then we'll enter B, enter C, enter D, enter E using these instead of numbers because numbers would screw me up because you can't have like a dot one. One, but you can't start with a number. So I called those inner, right? So let's get one of those set up right away or inner. Inner are going to be position absolute for sure. So that means odor will be a position of relative. I guess you could do it on the whole thing. I guess the background on them will be this background of that with five pixels. Is that too big aspect ratio of one? Can I just do all divs? I can. Let's just say div copy those two at least. I think everything needs that. And then I don't have to worry about setting those five pixels. Looks like it's too small 10. Okay. Then they're all on top of each other. I think right now, which is fine. Then we're going to do padding of 10 pixels. Oh, no. We're going to do box shadow of 0, 0, 0, 10 pixels and this color, comma, and then we'll grab the same thing. This can be a 15 and this color. What is going on? Why is it that shape? What? What is happening? Why isn't my box shadow the same thing? Or does it be one second just for fun? I'm so confused. Why that odor one is not the right shape? Outline Kevin solid. And then the box shadow could be 15 and this one could be 10. Why is my box shadow? I'm so confused. Order radius. Oh, my goodness, guys. I'm screwed. Okay. You're going to beat me on this one. I don't know if I've ever had this problem before. So if I don't do it that way, how do I do it? I've done this shape before. Why is this not working? Okay. I'm going to try and get them in the right spots at least and then we'll worry about why this is not working because the border radius is there with a box shadow. Okay. Border then. Solid 10 pixels. This color. No, this color. And then this one can be 15. Right? Oh, and then that's this color. That looks like it's going to work. Okay. Oh, okay. That really threw me for a bit of a loop. Okay. Then we're going to do .a. .a is going to be bottom left, I guess. So we're going to say, oh, man. I just thought of something. Oh, we should be okay. We're going to say this bottom thing. Something just came to me, but I think we'll, no, that's not going to work. Okay. These are all going to come out. We're here. Yeah. And we'll talk about it after. We'll see what happens. I just realized that might be harder than I thought. Top of zero. Top of, oh man, now we're, we're top of, I don't have a top. Okay. We're just going to have to guess. Top of 180. 70. That looks pretty good. 72. 65. Perfect. Awesome. Awesome. That one's good. B. Left of 100 and 10. And top of, that's 65. We'll do like a 90. Oh, 110. 120. It needs to be higher. We'll do 100. And it needs to be more left. No. Less left. It needs to be more left. 115. 115 is good. And 105. Perfect. Okay. Next is C. We'll grab that. Paste it. And then we have C. C is going to go down even more. So we'll do like a 145. And then this will be like a 90. Oh no. Maybe it's the same actually. Oh, wrong ones. 115. And then this could be a 145. 170. 180. 175. Awesome. Cool. So let's copy both of those actually. Because the top values will be the same. That's C, D and E. The top values won't change. Left is going to be 250. 255. My circle in the background is still not good. Okay. 255. And then left will be 250. 250. Is it 255 here too? Okay. So that other circle is not perfect yet. Merge in top 21. 20. Didn't we have it at 20? Oh, there we go. Whatever. It's in the right spot now. And then we're going to do this as like. Div class equals overlap. Okay. So let's just come all the way down. Overlap. Overlap. This is where I don't know if this is actually going to work. Background is going to be this. I should do background red for now. Why is, oh yeah. Okay. That's great. Position. Position. Absolute. Width. 50%. Top. No, we'll just do bottom bottom. Zero would go there. Bottom of negative. No, of 50%. Negative. Negative 50%. Okay. And then the width here should be like 70. Left zero. Which I didn't need apparently. And then transform. Translate. X. 50%. Negative 50%. 50%. 50%. Negative 50%. Okay. Good. So the background should be actually be this color. Whoops. This color. Well, the size actually looks bang on. And then it needs this border. Border. Maybe this is going to work. Actually I knew border inherit. See inherit. And then if, is this going to work? Inner. Outer. Outer. Overflow. Hidden. Darn it. Oh wait. Okay. I have an idea. Overlap. To. Can I do it? Okay. Yeah. Whatever. Top makes whatever overlap top. Let's copy this. I think I need both of these. Maybe I'm not thinking about this clearly. It won't have a border. Let's just do red here. Overlap. Top is there. So the width is, this is where it would have been good to have the right width. 100. And. Bottom. Okay. So then we'll say. Bottom. 50 pixels. Just where does that put it? 100. 10. Wait. Five. And then if my background colors this instead. There's a weird little, like. There's a bit of a glitch where the things are coming together there. Clearly I'm way off. So we're going to comment this one out for a second. Oh, I can't do that. Okay. Can I comment it one line? No. Okay. No background. Overlap. Okay. So I'm going to comment this one out on the right spot. Bottom. Negative. 70. 60. That's better. It's not going to be a perfect match, but it's going to be close enough, I guess. Red. Bottom. Isn't that close enough? It's just that little thing where they're meeting. Let's submit. 99.9. I'm slightly, slightly off with that. I'm going to take it. 99.9. I found that whenever I get to these, I can never get past it. Okay. Let's go to the piano. So we're going to reset that. Let's come find the right line in here to bring the font size up. Here we go. So font size 1.75 rem. That worked out for me. 1, 2, 3. Here we go. Background is this one. Body. This happens. Body. Background. That. Okay. We need white and black for everything else. So let's come. We're going to do a div. ID is equal to P for piano. And then in there, we need the keys. I think we're going to do. Two sets of keys. If that, I think. Would be the easier way to do it. Or do we want one? Now we're going to do one. Let's set white keys. So div class is equal to white keys. Close div. And then we're going to have a div class is equal to black keys. Close div. Inside the white keys, we need 1, 2, 3, 4, 5, 6, 7. So div class is equal to key. I think they can all just be key. Key. I'll put W key just for white. Close div. We'll copy that. 1, 2, 3, 4, 5, 6, 7. 1, 2, 3, 4, 5, 6, 7. And then we need 1, 2, 3, 4, 5. The spacing thing here is a bit tricky, but I think we're actually going to do 6 black keys. And you'll see why in a second. 1, let's call that a black key. 2, 3, 4, 5, 6. We're going to try that. We'll see what happens. Okay. So let's start with the piano. So that was my idea of P is going to be a width of 50%, because you know I love percentages with these things. It always looks centered and it's never centered, but we're going to try display flex. I would do grid, but I've gotten things perfect. And then it's knocked me on the score. So flex. And again, we're not after a high score. We're after a match. Align items. Center, justify, content center. I have had some people tell me in the past with height of 50%. We're going to change these numbers in a second. And again, don't worry that they thought that my score was off because border radius 10 pixels. So height, sorry, I'm trying to talk and do other stuff at the same time. 120. I'll get there in a second. 100. 100 it is. And my width is a little bit, I think it's actually centered though. 150. No, mine is way too small. 170. Oops. I'm holding shift down for the 175. 178. 179. It's going to be 180. Ah, okay. There we go. We got that. Perfect. Piano's good. I'm going to do padding. Is that five pixels? Oh, it's going to get bigger. So width then becomes 175. And this becomes a height of 95. No, 90. And this is 170. Right? That should be matching again. Perfect. Because we don't have box sizing on right now. Perfect. So on here, I'm actually going to do a display of flex. And my padding. Okay. Now let's do that. And then we're going to do my white keys. Right? No, I don't need flex on there. White keys. Okay. White keys. This will have it. So we're actually, let's do dot white keys star. This is like all the white keys that are in there. The background on all of background on all of those is that border radius is the same five. Did I do five or 10? 10. Um, height is 80% and width or we don't need to worry about width. Height is 80%. So here if I do a display of flex, they vanish with 100%. They should shrink. They're not shrinking. Where did my keys go? They are shrinking way to zero. Oh my goodness. Kevin, what's going on? Why is that not working? Oh, we're going to waste time on this because I don't see my keys. Okay. Height actually. Okay. Let's just get the display flex and it's gone. They have a height and they have a width with 100 pixels. It should still be there. Min width. Min height. It shouldn't be vanishing with the display flux on the white keys. What did I do wrong? I don't get it. I don't get it. I don't get it. I'm doing something stupid, I guess. Oh my God. This is so frustrating. Why is flex making it vanish? Why is this happening? They're all there. They're stacking this way. A display flex, they should just go next to one another and nothing else should change. The height. Height 100%. Margin top auto. So they go down. Man, border radius isn't working on them. You need pixels on the border radius. Go figure. Five pixels. Perfect. Okay. Gap. Five pixels as well. They need to be a little bit shorter. So the height here I guess should actually be a pixel value. Unless I do like 78%. Let's just do 65. 70. 70 looks, is 70 good? 70 is good. Okay. That was frustrating, but we've solved it. Then I want my black keys. So dot black keys will be also a display flex. It will also be a height of 100%. We don't have that other problem. Then we're going to do a black keys, select everything inside. Okay. Background. We'll be red for now so I can see them. About the same. I need a width on these ones for this to work. 20 pixels. This is going to be a justify content space evenly. Fingers crossed this works. 15. That's there. Black keys, position absolute because I needed to overlap. The black keys need to be inside the keyboard. Position relative. So then on this absolute, I can say that there's an inset of zero just so it's taking up the right amount of space. Maybe that's not the right idea. 50 pixels. 60. 60 is actually good for the height. So my idea here is, okay, so inset top, bottom, and then left and right. Nice. Okay, perfect. So the background will be black and then one of that's perfect and we just have that one key. So that's my third key. Black key, black key, black key. For transparent, that one, that worked out except for that mistake.t key. Background is transparent. Submit. 10 minutes, not bad. I always aim for like that 10 minute thing. So just over 10 minutes. Yeah, I think that's actually a really fun flexbox problem with this one right here. A nice sort of way that you can go about it. And yeah, so I hope you let me know how you did in the challenges if you were able to match how I did it. That was the last one, right? Yes. So yeah, let me know how you did in the challenge. Let me know if you did better than me, if you were close, if any of them you just absolutely murdered me. Definitely. I think a few of these I could have done a bit faster. But if you took longer but you still got there in the end, that's all that's really important. And I hope you had some fun doing it. If you'd like to see some other CSS battles I've done, I've put all the different ones I've done in a playlist that you can watch right here. And with that, I want to say a very big thank you to the sponsors of Awesome, Jan, Johnny, Simon, Patrick and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.