Redesigning VS Code's Website With Inspect Element

Key Takeaways

hey there my friend and Friends VSS 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 would be fun to give it a redesign and while it is an editor it would I guess be a little appr propo to use their own software to edit it but then I was thinking since VSS 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 VSS 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 VSS code's website and take a look at what we're going to be working with and I think it I mean it just looks so boring um 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 at um 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 um so let's just grab this little guy and I just want to I sort of want this we I don't know what to focus on here we have this here with the button which is sort of fighting with this cuz 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 um and so we have an H1 then we have the lead here lead oh look we're we're using bootstrap interesting um 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 CU 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 ah there we go so I have the container and then I have my H1 on its own now it's breaking everything um or you know what we could probably do um I can just take this row off nope uh 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 cuz I don't want those there we're going to be playing a little bit more with what's in there uh but let's come on this H1 because I find like we should be code editing redefine that's exciting it's a good a good slogan uh so you know we should 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 uh so like even you know it it obviously the picture needs some work but that's a bit better so like now I 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 uh and I set the margin in m so just as we get to smaller screen sizes as the font is shrinking we're also shrinking down on that but when we're here like here we see code eding redefined like I think that just it's so much more impactful uh than what we had and we get our 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 can 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 uh so now at the smaller screen sizes you get the entire thing which I think works fine uh but now if we get onto this really big size I just set it up so it' be like that and it was pretty easy to do I just put a Max height on the Jumbotron um of 100 V dvh so just if the keyboard comes in not that it's only a big screen sizes um 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 cuz it was easier um I'm not a fan of doing stuff like that most of the time but with how this is set up uh I'm not really too concerned with losing everything here I would definitely want to double check and not actually do that in reality um or maybe have a media query so if we got too narrow um but just for a quick thing like that I think it it looks pretty good um right so we have that and it looks a lot better now what's really bothering me is this part here um 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 just 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 z00 Z there's some questionable code on your site vs code what is that okay I'd like to know how that happened um if we just do like a padding blocks that's top and bottom of like I don't know three r five R make it pretty big um just look it doesn't that look better like turn that off turn it on don't be scared of having some white space it just looks so much nicer um 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 is really cramped and then here we have all this line height like that line height line height of four REM that's nuts why would you do that and why is it in rem like that the font size is in R um 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 um but just like let's turn that one on and let'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 um 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 um and then the opposite here where is here the line height looks so there's a Min height line height again this 2.4 REM um 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 and 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 demystified 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 there's actually a bonus 2hour lesson that's just about the dev tools looking at some of the stuff I'm doing now but also a lot more advanced stuff uh that we can check for when it comes to debugging our CSS uh 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 uh 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 um to get them to be like this which is kind of interesting so with height 100% um and then a z index of minus1 to put them behind the text uh and I turned off the Border radius and we had the height and stuff that was mucking stuff up um and yeah they were circles with box shadows and stuff so um yeah we're going to play around this a little bit more but I think we can do something interesting on the text div here I can give this a bunch of padding that doesn't look so great though with the repeating image um I'd set the background position over to the 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 um and one more thing just we'll go to here no this one is the display Flex right okay ended up creating a grid that you can see on here um that I don't think I actually needed to bother with but I did um 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 um where's my left there but because their position absolute I just needed a left and a top on them um but it's sort of getting to where I want now what I'm not sure in depth tools cuz I don't profile image we're going to try um so let's copy that copy selector um and then we're going to create I don't want the image I want a new selector which would be just that and I want the after on there so I just put this in to make sure it would actually be working and we can see it is actually working now so I don't see it actually showing up here or it's not that one is it no um that's the Tweet anyway we we have it showing up so that's good that it's working um now what I want to do is let's just s my bottom of zero didn't go where I wanted it to nice oh uh position would help on that position absolute so I need now is the image see the image has that whole height um that if I take that off ah there perfect okay that's what I wanted I just don't need the height 100% on there um 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 red let's say width is 100% And then the background we can just put a gradient here um so we can just do like zero de transparent to White and then here I purposely put 0 de just cuz then I can take this and actually move it in my Dev tools uh cuz I didn't know which way around I needed that um and I think I'm actually going to get this at like 30% and then this could be at uh 30% oh whoops no this one take that off um 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 we can grab that when you have colors you get an eye dropper so I can take the eye dropper and eye drop the color I wanted to go to which does not look right at all uh maybe there's actually a gradient here so I'm going to eye drop near the top instead so that took a minute but we got there in the end we could probably make that like that's too big obviously um something like that that just gives it a little bit more so here we'll just do color of red just cuz it's fast and then we can I drop we have the button right there perfect so I can just ey drop that blue um maybe add a bit of margin on that so my margin is not working and I'm not getting one of those tool tips but I have a feeling we just need to display a block on that there we go um so yeah now we get sort of just to sort of we can play with that now this probably should be only on the top so maybe uh 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 block perfect margin block start of 1.5 Rim uh end I want that at the bottom there we go so actually by doing that we sort of I like this better cuz I've grouped the name more with what we had there and then we get this coming the name big and then this it's a little bit small font size is not 1.2 on there I don't know where 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 um we could probably dive in to figure it out but see yeah I think that looks a lot better than than what we had before it's oh no damn columns um getting bigger uh that looks terrible so I mean what I did which probably I guess looking back is a mistake um 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 um that just would have made it a little bit more useful um but we'll pretend that never happened and it it's all fine and even like this it's okay it looks kind of weird with the gradient as we get smaller um 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 um but originally I put on the images oh no the text content for the text content itself it 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 um but P 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 fix that there um maybe like a 903 or something oops that's not what I wanted um 93% or something just to get the the name off the image a little more but there we go um I don't know if I use this if it's going to break everything but I think I think it's a big improvement over what we had so I'm going to leave it like that uh 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 um 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 uh what you think of the the redesign that I did here uh 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 cssd mystified the link for it is in the description below and with that I'd like to thank my neers of awesome and Rico Michael Simon Tim and Johnny as well as all my other patrons are their monthly support of course until next time don't forget to make your recording the internet just a little bit more awesome