 Hi there, my friend and friends. VS Code is an extremely popular tool amongst developers, and if you're a new developer, you might have recently gone to their page to actually download the software, and when you got there you might have wondered if you were in the right place, because for something that is so popular their page is kind of ugly and maybe even amateurish. So I thought it'd be fun to give it a redesign, and while it is an editor, it would I guess be a little apropos to use their own software to edit it, but then I was thinking since VS Code is actually a browser masquerading as an editor, I might as well use a browser as an editor to edit it. I think that makes sense. So yeah, I'm going to be using my dev tools to redesign VS Code. Let's dive in and see what I can do with it. So to get started on this, let's jump on over to VS Code's website and take a look at what we're going to be working with. And I think, I mean, it just looks so boring and does not look great. And so the first thing I'm going to do is open up my dev tools and take a look. And let's just make it a bit bigger. So we have the desktop one right there. I want to focus on starting here, and I'll sort of work my way down the page, I guess. So let's just grab this little guy. And I just want to sort of want this. I don't know what to focus on here. We have this here with the button, which is sort of fighting with this, because they're both kind of big, but this is smaller, but gets more attention because of the color on it. And then this image is really busy. And so we have an H1, then we have the lead here, lead. Oh, look, we're using bootstrap. Interesting. So I'm actually, I want to grab this H1 and move it outside of that row, which it doesn't seem to want to let me do. Because usually, like here, I can grab this and drag it down. And you can see it actually switches that. Usually, you can just move stuff where you want it to go. There we go. So I have the container, and then I have my H1 on its own. Now it's breaking everything. Or you know what we could probably do? I can just take this row off. Nope. Let's take these columns off too. There we go. We're sort of got somewhere. And I'm just going to take this column off as well, because I don't want those there. We're going to be playing a little bit more with what's in there. But let's come on this H1 because I find like, we should be code editing redefine. That's exciting. It's a good slogan. So, you know, we should do more with that. So we have that there. So now that things are set up like that, we can move this up a little bit. So like here where we have the font size five, we could probably play around with that a little bit, like even if I just made it 10, like, now we see that we know what to look at. And then we can sort of go from there. So like even, you know, it obviously the picture needs some work, but that's a bit better. But like now I just added some margin to the top and the bottom here. And I switched the font over just so like, we don't want it 10 RAM would be way too big on smaller screens. And I set the margin in M. So just as we get to smaller screen sizes, the font is shrinking. We're also shrinking down on that. But when we're here, like here, we see code editing redefined. Like I think that just it's so much more impactful. Then when we had them, we get our little download thing down here. I think that's fine. Or this image that's here, it is a background image. Interesting. So just doing background position center, I think is better. But then we do background size cover even. So I just fixed up this a little bit. Like I mentioned, it was kind of annoying me that we had that giant image coming that way. So now with the smaller screen sizes, you get the entire thing, which I think works fine. But now if we get onto this really big size, I just set it up so it would be like that. And it was pretty easy to do. I just put a max height on the Jumbotron of 100 DVH. So just if the keyboard comes in, not that it's only at big screen sizes. And then I did an overflow of hidden. Now, interestingly, they actually had an overflow of visible on there. So I just threw an important because it was easier. I'm not a fan of doing stuff like that most of the time. But with how this is set up, I'm not really too concerned with losing everything here. I would definitely want to double check and not actually do that in reality, or maybe have a media query. So if we got too narrow, but just for a quick thing like that, I think it looks pretty good. Right. So we have that and it looks a lot better. Now what's really bothering me is this part here. And that's because right now, like, see how we have space on the top and bottom of these, we don't have any space here, which is, I guess they wanted it so like the buttons are filling up, like see how the background fills up that whole thing. But honestly, like, if we come in and take this thing value props, and we just come and family 0, 0, 0, there's some questionable code on your site VS code. What is that? Okay. I'd like to know how that happened. If we just do like a padding block, so it's top and bottom of like, I don't know, three ram, five ram, make it pretty big. Just look at it. Doesn't that look better? Like, turn that off, turn it on. Don't be a scared of having some white space. It just looks so much nicer. And yeah, so already, I think it's making a big improvement. Let's see what we can do with these testimonials down here. They're not terrible. Or actually, you know what, we're going to go see here, the writing's really cramped. And then here we have all this line height, like that line height, line height of four ram. That's nuts. Why would you do that? And why is it in rem? I like that the font size is in rem. We can just do like a line height here of 1.6, which is 1.6. If you really need like loose line height 1.7. But just like, let's turn that one on. And it's like, compare the different, like this is double space, like you do in like a Word document or something. I don't know. There we go. That's better. I'm going to go with the 1.6 even. But obviously, you can play around with that and put what you need. But I like that better. And then the opposite here, whereas here, the line height looks so, there's a min height line height, again, this 2.4 rem. Tweet body, let's just say it's a 1.6. Maybe even a 1.5 for that one. So like, obviously, this depends a little bit on the screen size and stuff. But let's see what we can do with it. I think we could definitely make these look better. So I'm going to give it a bit of thought. But before that, I just want to let you know that if you are struggling with CSS, I do have a course called CSS to mystified, which is all about helping you understand not so much about how to write CSS, but more about how to understand what's going on with your CSS. So you can start writing it with a lot more confidence and with like purpose to what you're doing. And in that course is actually a bonus two hour lesson. That's just about the DevTools looking at some of the stuff I'm doing now, but also a lot more advanced stuff that we can check for when it comes to debugging our CSS. So if you'd like more information on that, the link for it is in the description, but let's see what we can do with these to make them look a little bit better. So I think part of the problem is just like with the little circle here and then this next to it, there's only so much you can really do. I could put it in a card, but that's not going to look great. So I have some ideas. I'll be back in a second to see if this works. So I've turned them back on to position absolute to get them to be like this, which is kind of interesting. So with height 100%. And then a Z index of minus one to put them behind the text. And I turned off the border radius and we had the height and stuff that was mucking stuff up. And yeah, they were circles with box shadows and stuff. So yeah, we're going to play around with this a little bit more, but I think we can do something interesting on the text of here. I can give this a bunch of padding. That doesn't look so great though with the repeating image. It's at the background position over to bottom, but I think we'll go with top. And then we can do a background repeat. No repeat on those. Perfect. And let's go back to this and find, I mean, I'm just whatever this is fine. You do something like that. And one more thing just we'll go to here. No, this one is the display flex, right? I ended up creating a grid that you can see on here that I don't think I actually needed to bother with, but I did because I was having issues with the images sticking out. And I thought it was something else where we didn't have space between them. Where's my left there? But because their position absolute, I just needed a left and a top on them. But it's sort of getting to where I want. Now, what I'm not sure in depth tools, because I don't profile image, we're going to try. So let's copy that's copy selector. And then we're going to create, I don't want the image. I want a new selector, which will be just that. And I want the after on there. So I just put this in to make sure it will actually be working. And we can see it is actually working now. So I don't see it actually showing up here. It's not that one, is it? No. That's the tweak. Anyway, we have it showing up. So that's good that it's working. Now what I want to do is let's just start our bottom of zero didn't go where I wanted it to nice. Oh, position would help on that position. Absolute. So I need now is the image see the image has that whole height. If I take that off, they're perfect. Okay, that's what I wanted. I just don't need the height 100% on there. Now I need to get back to that pseudo element though, which could be problematic, because I don't see it. There it is. Ah, good. Okay. So we got my pseudo element. So obviously, I don't want that to be read. Let's say width is 100%. And then the background, we can just put a gradient here. So we can just do like zero deg transparent to white. And then here I purposely put zero degrees, just because then I can take this and actually move it in my DevTools, because I didn't know which way around I needed that. And I think I'm actually going to get this at like 30%. And then this could be at 30%. Oh, whoops. No, this one. Take that off. Can I move? I was hoping maybe this could be at 70%. But you know what, it's not the same color as that. So this white, you can grab that. When you have colors, you get an eyedropper. So I can take the eyedropper and eyedrop the color I wanted to go to, which does not look right at all. Maybe there's actually a gradient here. So I'm going to eyedrop near the top instead. That took a minute, but we got there in the end. We could probably make that like, that's too big, obviously. Something like that that just gives it a little bit more. So here we'll just do color of red, just because it's fast. And then we can eyedrop, we have the button right there. Perfect. So I can just eyedrop that blue, maybe add a bit of margin on that. So my margin is not working. And I'm not getting one of those tooltips, but I have a feeling we just need to display a block on that. There we go. So yeah, now we get sort of just a sort of, we can play with that. Now this probably should be only on the top. So maybe the bottom, I mean, margin block end, or actually know what, that margin shouldn't be there. The margin should be on this one. So we already have the display blocked, perfect margin, block start of 1.5 rem end. I want that at the bottom. There we go. So actually, by doing that, we sort of, I like this better because I've grouped the name more with what we had there. And then we get this coming, the name big, and then this little bit small font size is not 1.2 on there. I don't know what that's coming from. Is there a scale? You know, it doesn't have to be gigantic, but it's so small. And maybe if we just darken that up a little bit, I don't know, something on that, but it's so small. I'm not sure why we could probably dive in to figure it out. But yeah, I think that looks a lot better than what we had before. It's, oh, no. Damn columns. Getting bigger. That looks terrible. So I mean, what I did, which probably, I guess, looking back is a mistake. I should have put the gradient on the text. So then it wouldn't matter where it was. So if the pseudo element was on the text instead of on the image thing, that just would have made it a little bit more useful. But we'll pretend that never happened. And it's all fine. And even like this, it's okay. It looks kind of weird with the gradient as we get smaller. Maybe I could fix that actually. All right, I actually fixed that using something I've never done before. Or if I have, it's been a long time. I think this is back from like the old days. But originally I put on the images, or no, the text content. For the text content itself, I'd originally put a really big padding value in pixels. But the problem is the image was changing shape, which would change the width of the element. But padding top and bottom or margin as a percentage is based on the width and not the height. So if the width is changing, that will match and always be the same. So we sort of fixed that there. Maybe like a 93 or something. Oops, that's not what I wanted. 93% or something just to get the name off the image a little more. But there we go. I don't know if I use this, if it's going to break everything. But I think it's a big improvement over what we had. So I'm going to leave it like that. As I said, down here, this isn't really bothering me too much. So I think I'm going to leave that alone. We could probably spice that up a little bit. But overall, like the bottom part of this is fine. It's really this top section where we now focus a lot more on this. We have this here. And I think this testimonial looks a lot better than what we had. But I'd love to know what you think of the redesign that I did here. We sort of tackled some of the main sections of it. So give me your input. And of course, if you are interested in that course, CSS demystified the link for it is in the description below. And with that, I'd like to thank my enablers of awesome and Rico, Michael, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.