 Hi there, my friend and friends. In a recent video, I recommended that people who are just getting started in web development use VS Code as their editor. And that led to a lot of people asking me to make a video on how to get started with VS Code. So here we are. Now for this video, I'm not only assuming that you are new to VS Code, but I'm assuming you're relatively new to web development as well, because this is part of my beginner friendly content that comes out every Tuesday. So because of that, we're not going to be deep diving into the nitty gritty parts of VS Code. We're only going to be looking at the bits of it that are very relevant and useful for people who are just getting started with it. And of course, the very first thing you need to do is actually install VS Code. But there is a little bit of a gotcha here because we can get VS Code or you can get Visual Studio. And that's Visual Studio Code and Visual Studio. You do not want the purple logo, you want the blue logo. And again, it's a little bit confusing, but we want the code word at the end. So just do a Google search for VS Code, click in in there. And then you can download it. This is available for Windows as well as Mac OS and Linux. So you're good to go no matter what operating system you're on. Now, once you've downloaded it, you should see something that looks a little bit like this, or hopefully a lot like this. This is this like a fresh install of VS Code. And one thing right away that can be handy is if the font sizes or stuff are a bit small, a control plus can actually zoom in and make things bigger. So for the demo, I'm going to do that. And then I can just zoom back out, doesn't matter, but you should end up on a welcome screen like this one. The only thing is if you really are new is you won't have any recent projects. Now the very first thing that I want to talk about, and you'll notice here, it's saying you do not have an open folder. And this is really important that it's saying open folder, because you can open individual files as well. But there's a big difference between opening a file and opening a folder in VS Code. If I open an individual file, for example, in here, I have this 3d thumbnail thing that I built a while back. And maybe I want to work on that HTML document, like an open that file. And here we go, there's the file and I can work around in here. And over here, it's actually I have that file and I can see that it's there. But in most projects you work on, you might not get this in the very first few days. But most projects you're going to be working on, they're going to involve more than one file. And then say I had another page in this, or I have my CSS file that I want to go to, I want to work on my JavaScript, they all tend to live in the same place. And if I open all those individual files every time, it's a little bit annoying. Whereas I can use either the open folder right here, or you can do the file and open folder, or you can use the shortcut. And then what I can do is I can actually open the entire folder for this project. And the advantage with this is now I'm inside of this project. And now eventually, you're going to have extensions that might take advantage of all the different things that are in here, you'll actually be able to search through all the different things. But the really nice thing is, you can just go through and all the files you need for that individual project, they're all here. So you don't have to like go hunting and opening things every single time. But if you want to start using like an extension like live server or a few other things that just make you have some quality of life things going on, opening the folders going to make your life so much easier. So always any project you're doing, don't just save like the HTML file on the desktop, make a folder for it and then always open that folder in VS code. It's also good because if I need to make a new file, I just click new file and you're like about HTML, and it's already in the right spot. Right. So I'm not like making a new file then having to save that file. It's already there. It's already in the right place. Now one thing that's very important, I'm just going to bring this down because I think it's slightly off screen, where you can see I have these two different tabs for these two different files. And my about page is actually not in italics and the index is an italic. And this is just a little visual hint to say you open this file, but you didn't actually make any changes to it. So if I switch over to my JavaScript file here, it's going to stay italic, but it didn't keep the index opened. This is sort of like, oh, you're diving through different files. I'm not going to make a change here. So let's just say I go to my index and I make a change. Now it goes, Oh, this is an active file you actually want to be working on. You weren't just searching through things poking around. So as soon as I make a change that now, if I go to another one, it's going to open another tab for me. And then if I make a change to this one, which right now I'm just putting a space that's enough for it to recognize that I made a change. And then I can go over to another file. And you can see that they're all opening tabs across the top. And these two tabs have circles on them, which means that there's on save changes. And one thing that's interesting with VS code is sometimes you can close it. And it won't ask you to save your changes or anything. But the next time you open VS code, it's going to open with that exact place. But I'd always recommend saving your work as you're going. So one way you can do that is with a save all, which is also a control K and S. But just every now and then a save all and any file that had a change in it will get updated. Or you can just make changes with a control S. So instead of going to file and save every time you're going to be doing saves all the time, just you make a change control S make some changes control S if you're on a Mac, that would be a command S. And you just saving constantly, it's going to be your best friend. So just save constantly, and you won't lose any work and be very happy that you did it. There are ways of configuring the auto save as well. And the way you would do that is to go into your preferences and go into settings. And we're not going to deep dive the settings now. But just to know how the settings work, because there's a lot of settings in VS code. But there's this handy search settings at the top. So if I looked up auto save, it probably will come up. There we go. And then I can can set here the default is off, but I can choose a different type of auto save if I want to change how that behavior is working. Now I'm old school, I'm just used to saving my stuff constantly. So I leave mine off. But if that's something you'd want to configure, now you know how to get to it. Again, it's just file preferences, settings, and we'll look at a few other things that you might want to do in there a little bit later on. But for now back to here where we're looking at we have we have these different tabs. Another thing that could be really useful depends on the size of your monitor. But if you have a large enough monitor, what you can actually do, let's close down these two CSS files. And I'm going to right click on this one. And I can do open to the side. And look at that, I have multiple different ones open. So I have the two that I can work on at the same time, this can be so useful, you can even have like the same file open twice to and one at the top one at the bottom, I wouldn't really recommend that because then when you're saving, I find it gets confusing for me, but it is a possibility that you can do but I really do commonly work with split planes like this. So I would suggest at least trying it out. Also, if you can drag them around when they're up here. And if you do have multiple ones open here, I can right click on this one, and I can even do a split up split down split right split left. So if I want, I can put it on the bottom instead. If I don't want it on the bottom, I can split it to the right. And I get it over there. Now, because I already see now I have the same file open twice. So this one I can go down to the bottom and this one I can have at the top. Again, I don't really like working that way. And one reason I don't is because I often use this mini map. If you're very early on, you might not have to worry about this too much. But as projects get bigger, this mini map is sort of a zoomed out version and you can click on it to scroll quickly between different areas as well. And you can turn off that mini map in the settings if you don't like it. Personally, I used to hate it and then I got used to using it and now I kind of like it a lot. But in my demos usually see it off just because I don't like the visual clutter when I'm doing demos, but for normal work, I actually do keep it on most of the time. And again, just go to your settings like we looked at search for it. If you do want to turn it off, it's called the mini map. Now I already mentioned this, you might find the font size is small because I think this is the default zoom. And I'm used to doing demos where I need the font size is really big. And I've just gotten used to large font sizes. The problem is when you zoom in, it's zooming in everything. So it's zooming in on the sidebar over here. It's zooming in everything just gets bigger. The whole interface does. I might not want that I might want to keep everything the same way it was, but I want it, you know, I want it like this, but I want my font sizes to be bigger. So once again, let's go over to preferences and settings or you can use the shortcut control comma. And if ever you don't know a shortcut, it always tells you what they are. And my suggestion is learn the shortcuts. If you find yourself using any of the menus on a regular basis, I would really recommend going, oh, okay, it's the control comma, but don't go, I'm going to use it next time. Close the whole thing down and then use that shortcut because that's the only way you're actually going to start remembering it. And you'll forget it the time after that and the time after that and probably even the time after that. But by about the fifth, sixth time of using it, you're definitely going to start remembering what it was, but do make sure you keep on using it. So back here in the settings, the one thing I want to look at here is that we have the font size right there. So you can set this to whatever you want it to be. You can also change the font family right here. You'll notice the default we're in is the commonly used. So these are like the different things people often change at the beginning, you can change your line, I like just leaving it at line, but you know, you can play around with these and see what the differences are just to get an idea. But I personally, I like the line one just to show you if we go to block, I don't even have to close the settings, I can just go back to a file and see how my cursor is like a full square now. And if I go back to settings, let's change it to thin line. And then I go back and you can see it's already updated to a very thin line. And I'm going to go back to the default. And that's just what I'm used to. So you can play around with it, find one that you like. And again, you could even let's do it, split to the right, close this one down. And then I could put my cursor there. Let's go over here and change the cursor. Well, where's that? Right there cursor style. And let's make it block. And if I click back here, it's already blocked. And then I can try the block outline and see if I like that one better. And so you can play around with things. If I come to my font size here, and I make it bigger, as soon as I click out, you'll notice the font size got bigger. And then I can drop that back down to 14. And is there we go takes half a second and it updates. And of course, you can try different fonts and go through and I would encourage you to look at some of these basic settings. And if there's stuff you don't know what it is, don't worry about it for now. Don't be overwhelmed by it. Because again, there's a lot of settings. The one other one that you might want to change is your theme. And default themes actually not bad, but I like using a different theme personally. So to get into the themes and this is like the one personalization, I think everybody should make at least to like look at it, play around with it a little bit. There's so many themes and so many good ones out there. And interestingly, the themes are, let's go here. And we're just going to search for themes, but themes are an extension. And that's going to sort of open up another world of stuff. But you can see here is the dark modern. And here's like all these other themes that are here. So maybe you're somebody who actually likes having a light theme, well, we can switch over and it really hurts my eyes to even look at it. But I do know a few people who like light themes. So if you prefer that you can, but you can sort of poke around in some of these different ones if you want to go a little bit crazy, you can. But there's lots of different options in here. But you might be looking at it going, well, it's a pretty limited set at the moment. So if you want to know the type of person who loves this type of thing. And I know some people I am the type I've been using the same theme forever now. But I know some people who like changing it on a regular basis. So for that, what we're going to do is go on the side panel down on the side here, and you can see these different things. And so we have a search feature which is kind of handy and search for different things and actually do a find and replace their source control, which is like get stuff, you might not know what that is, don't worry about it for now. It's built into VS code, which will be handy when you get to that. If you don't know what it is, don't worry, same with the running debug here, eventually you might get into that. Don't worry about it for now. And then extensions and extensions are a really big part of VS code. And if you start using a language, like there's a framework right now called Astro, that doesn't come pre installed with VS code. But if you make a dot astro file, it's going to go, Oh, hey, we have an extension for that, you want to download it. So it's really smart, it will recommend things for you, which can be really handy. But you can also come and search for themes. And one theme, the one I use, usually is called Adam one dark, and you can see it right there at the top. So I'm going to click on that. It's right there. I can hit install on it. And not only did it install, you can see it is switched over. And it actually gives me the choice at the top here. Do I want to keep it? Yes, I do. That's the theme I like. But of course, you know, you don't have to use that theme, just because I'm using it go and look for different themes, you can also just do a search like a Google search for different themes and find ones. There's probably a better thing than just searching for theme. But there's tons, you know, here, there's a whole bunch. So some of them will come with like lots of different options. Some of them might only be one. There's tons of themes out there. I'd really recommend looking for one finding one that you like, and they're really easy to change. So you might try one for a little while realize you don't like it, and then you can switch whenever you want. Now I didn't mention that one thing, this is for beginners. So one thing that you're really going to like with when you're in your HTML is that this comes with let's zoom back in. So it's a bit bigger for demo purposes. Also, my sidebar is opened. If I click here, it's going to close it. So we can close open and close it that way. I actually like having my sidebar on the on that side. So when I open and close it, it doesn't move things around. But I'll talk about that in a second. But before we worry about that, what's really cool of VS Code is that it comes with something called Emmett pre installed and Emmett is a shortcut for writing HTML and CSS. And so if I have an HTML file, I can do an exclamation point at the top and either hit return or tab and it comes in with all of this which is super handy. So I have that like boilerplate starter, but we can do a little bit more than that. I'm not going to deep dive it now but say I need an h1 I just do h1 hit tab and it does the opening closing. If I need a paragraph with a class, I just do p class name. And then it's going to do it for me. So it's a much faster way of writing things. You can even do like dot container. And in there I have div, we'll do div times three, something like that. Anyway, you can really speed up the way you write your HTML and CSS. If you're very, very new, it maybe you're like, I don't want to go that fast. That's too quick for me. So you know, you definitely don't have to use it. But it is really handy. And even just if you're just doing your h1 and you don't want to have to write like h1 and it will close it for you the default as soon as you open a tag will put the closing tag. But just having to do, you know, from you get used to I've gotten used to it. So just doing h1 tab and it's open close and my cursor is in the right spot. It's just so handy to be able to do that. And of course, when you make a new HTML file and do that, it's just wonderful. And the last thing I want to leave you with a little bit is one of them is moving the sidebar over. So if you do like that idea of this not like shoving your text back and forth, you can just right click anywhere on the sidebar and you can just do not move primary sidebar to the right and it moves it over to the side. And now you see when I open and close, this doesn't actually move around. I love that. So I'm so used to having this on the right, you can also just drag this bigger and smaller to if you need to the shortcut. Also, if you want to open and close it is command to be or on a PC to be control B. I don't know why it's letter B, but it works. But just clicking here obviously does the job. There's also not only can we move them to the two sides back and forth really easily. The other advantage you can actually turn off and on like if you don't want to see the source control one, I can click that and let's just put it back on the side so we can see it happen because I know my face was on it. So if I do source control off, it takes it away from here. And then I can bring it back. I would actually encourage leaving that there because you're going to start using it sooner than you think. But if there's ones you want to turn off and just remember maybe later on that you need to be able to turn it on that option is there. And I'm going to come here and I don't know if I closed it or not. But here what I'm going to do is this is all my open files. Actually, here's all the open files. And here's everything that's in that 3d thumbnail folder that I had opened. So one thing I can actually do here is I can come here and actually save everything. So a click save all and then I can close them all and it closes everything there. And what I'm actually going to do I don't do this very often, but I'm going to come in here and I'm going to go down to a close folder just so we're back at like nothing's open. We're back where we started because I want to go back to this welcome screen. And there's one thing on the welcome screen that I'd really recommend you check out is this get started with VS code. So if I click on that, it's going to, you know, choose the look you want. So it actually there we've already done that, but it will help you pick a theme. You can sync to other devices and a few other things. And then like it walks you through like different steps you can do rich support for your languages open your editor. If you go over to next section, there's this section right here, which is actually for an interactive playground that teaches you a lot of different things about VS code and it's really good. So if I come in here, it's opened it on the side so I can close this welcome down. So I have the editor playground and it has like it this is like it tells you what to do here. And then you can come down and use this code to practice what it's telling you to do. So I can add a cursor. It's cool in VS code, like you can see where my cursor is, I can do a control alt down and you can see I have two cursors now and now I have three cursors and that means you can actually write in multiple places at once. And then I can keep going and learn about IntelliSense and then about moving lines around because you can just push alt and then move lines with your up and down keys and stuff and you can duplicate lines and select full lines and there's all sorts of really cool things you can do. So you can just come through here and read about it. And it's like a little tutorial that walks you through some of the like medium advanced stuff that could be really handy. And with that, if you'd like a little bit more VS code content, I've done a couple of other videos, one of them looking at the essential extensions that I can't live without and another one looking at the shortcuts that I use every day. Those videos are all on a playlist that is right here for your viewing pleasure. And with that, I would like to thank my neighbors of awesome, Johnny, Tim, Simon, Michael, James and Andrew, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your part of the internet just a little bit more awesome.