do you want to learn how to become a web developer well the first step is to pick a code editor let me show you how to get set up so that you can start learning today i'll also show you a bunch of tips and tricks to get the most out of your code editor [Music] there are a lot of code editors to choose from but the most popular and my favorite is visual studio code and don't confuse visual studio code with visual studio vs code is a free open source cross-platform application it has great support from the community and tons of extensions it's also fully customizable to fit any developers preferences and project needs it's lightweight and fast which is why it's perfect for web development throughout this video i'll reference links to other resources and all of those links will be in the video description below included is a free vs code cheat sheet that includes common keyboard shortcuts my favorite extensions themes fonts and icon packs and if you really want to become a vs code pro go check out my vs code course at vscodehero.com the first step is to install vs code so go to code.visualstudio.com download this is a cross-platform application that works on windows linux and mac os and go ahead and download the appropriate version and begin the installation when you get to this section select additional tasks i would recommend checking everything this just fully integrates vs code into your operating system you may or may not see these exact settings if you're on linux or mac os or once the installation is complete this is what you're going to see a vs code can be used for many different programming languages for now we're just going to focus on the basic web development languages which include html css and javascript so we're going to set it up for that but first let's take a quick tour on the left side we see our sidebar at the top we have our explorer this is where you're going to find all of your project files and directories once you have a project folder opened next is search this is pretty self-explanatory this will allow you to search within your project files there's also a find and replace functionality and next is source control this uses git integration and if you don't know what git is don't worry i have an entire video that explains it and i'll include a link for that next is run and debug we're not going to get into debugging in this video but of course i have a video for that too and next we have extensions we'll come back to the extensions tab in just a bit at the bottom we have our manage cog in this menu you'll find things like settings keyboard shortcuts themes and settings sync the top of this menu we see the command palette or the shortcut for is ctrl shift p if you have a keyboard with an f1 key you can also just press f1 so this is a really cool feature in here you can search for just about anything you can open a file change a theme view the keyboard shortcuts basically every command that's available is here in the command palette and you don't have to complete a word just start typing and it's going to figure out what you're looking for it's very helpful saves a lot of time if the only keyboard shortcut that you remember is ctrl shift p or f1 then you're going to be set also at the bottom of the user interface is the status bar it has a lot of useful information if you're using source control you're going to see the branch that you're on you're also going to see the current line number and the language of the current document and many other pieces of helpful information let's go ahead and check out the keyboard shortcuts we can go to the manage cog and then go to keyboard shortcuts or we can press control k control s you can see here that there are tons of keyboard shortcuts and you can even customize them and now you'll never remember them all but try to remember as many as you can as you need them when you notice yourself needing to use the mouse for something look for the keyboard shortcut for that action and then try to remember that for next time you're going to save a lot of time by using keyboard shortcuts over using the mouse now let's look at some settings to get to the settings we can go to the manage cog and then we can go to settings or you can press ctrl comma there are just a few settings that i'd recommend that you change right off the bat and these are just my personal preference so you can set these however you like first i like to increase the font size just a bit i'm going to change mine to 18. i have a larger screen i just want to make sure that i don't strain my eyes and make sure that the font is nice and readable and next is the tab size so by default it's four i prefer two but again personal preference next let's search we go up here to search settings and let's type in editor bracket pair and i'm going to enable bracket pair colorization there used to be an extension for this but now it's built right into vs code so i'm going to enable that and i'm going to turn the bracket pairs on to true and the horizontal i'm going to change that to true as well and lastly let's go up here and search for word wrap and so editor word wrap i'm going to turn this to on this will prevent long lines of code from going off the right side of the page everything automatically saves so we can just close that and next we're going to look at themes now again we can go to our manage cog and go to themes or color theme or the shortcut for that is ctrl k ctrl t in here we can use the up and down arrows to cycle through the themes so i'll give you a quick preview of the built-in themes so we've got abyss dark dark plus hindi monica monica dimmed red solarize dark tomorrow night blue high contrast and then quick warning we're about to get into the light themes so put on your sunglasses so here we go light light plus quiet light and solarized light all right let's get off of that i don't care much for light themes at all i prefer the dark themes so i'm going to show you my five favorite themes we can search for them right here by going to browse additional color themes so there's tons of additional themes here first i'm going to search for night owl so night owl by sarah drazner this is a great theme another one that i like is cobalt 2 that's by west boss and then shades of purple this one is by amadowas another great one is the coder coder dark theme and that's by my friend jessica at codercoder and then my favorite theme of course is my code stacker theme so to install this i just have to hit enter and it will install and apply this theme and we just want to just go ahead and say yes install and that's it so now we have a new theme and there are links to all of these themes in the description or you can just search for them right here or from the extensions panel which we're going to look at next all right so we're actually already in the extensions panel it's right here on the side here and we're just going to clear out this search and so in the extensions panel we're going to find all of our installed extensions and then there's a bunch of popular extensions that we can install or we can manually search for an extension in the marketplace so the first extension that we're going to look at is live server now this is a very popular extension with over 17 million downloads this extension sets up a local web server so that you can see changes that you make to your code in real time without having to reload it's a must have for web development so let's go ahead and install this the next extension we're going to look at is called prettier this extension helps you to keep your code formatted and uniform throughout it makes your code pretty next we're going to look for auto rename ag whenever you change an html tag it automatically renames the corresponding tag so it just saves you a little bit of time there's a couple of other things that you can install to customize vs code one of them is icon packs so we're going to look for vs code dash icon i like these icons so this adds some icons to your files and folders to make them easily identifiable the other thing that we can look for are product icon packs so the one that i like is called fluent icon and so what that does is it changes the icons on the left side in your sidebar so i'm going to install that now you can see that the icons on the left side just look a little different here's the default and here are the fluent icons there are other icon packs that you can choose from as well next let's open up a project folder so there are several ways to go about doing this from outside of vs code i'm on windows so depending on the operating system that you're using it might differ but i can right click on a folder that i want to open up in vs code and then open with vs code and you'll want to say yes i trust this author and now you can see that we have our demo folder opened in vs code we can close this getting started and the other way is from inside vs code we can go to file and then open folder and then again just pick the folder that you want to open up in vs code from your operating system file explorer so now that we have a project folder open we can now add a folder structure and some files in a typical basic website you're going to have an index.html file a css folder containing your style sheets and a js folder containing your javascript files so let's go ahead and add our index.html file so we go right here add new file we're going to name it index.html so as we create a file it automatically opens it for us next let's create a new folder so right here add new folder we're going to name this one css and then inside this folder we're going to create a new file we're going to name this style.css now we have that file and folder created now there's a shortcut instead of creating a folder and a file at the same time we can just click add file and now we can create a folder and file at the same time so we want to create a js directory and then slash and we'll create an app.js file so now it creates the folder and the file for us and again it opened the file now to switch between these files we can use control tab or ctrl shift tab to go forward and backward between the files if we want to close a file we can press ctrl w so let's just close all of these files a great way to open a file again instead of using our mouse we can press ctrl p and then we have our files right here ready for us and we can just select which file we want to open and hit enter if you have a lot of files to search through just start typing the name of the file and it's going to pop up now notice something if i click on app.js it pops up here and it's italicized and if i click on style.js it's replaced right here so this is a preview if you want to open and keep the file open you have to either double click the file and now it will remain open or edit something inside the file and now it will remain open as well you'll notice that none of these are italicized anymore if you want to change this functionality we can go to the settings so control comma and then let's search for enable review so workbench editor enable preview let's go ahead and uncheck that and we can close the settings let's close these files and then let me click on app and you see this not italicized i can click on style and it's not italicized and they remain open as we click through i prefer it this way all right next i want to show you my favorite built-in feature of vs code and it's called imit now think of emmitt as shorthand with it you can easily write a lot of code quickly and it dramatically speeds up your html and css workflow here i'm going to demonstrate creating an html page you can do this by just pressing exclamation point you're gonna see emit pop up says emit abbreviation so i'm gonna press enter now and there we have it a basic blank html web page ready to go if you've never seen html before and you have no clue what all this is don't worry i'm just demonstrating the capabilities of vs code and imit you don't have to know exactly what any of this means right now so other things that we can do we go down here to the body we start typing we can create a div by just typing div enter and that creates a div tag for us we can automatically start typing inside this div tag we can go below that and then let's create a list so we'll say ul and we can say greater than li times 4 so we just created a list with 4 items in it i could also create a div with the class of my class just by typing period my class and now we have the div with the class of my class i can create an input and i can give it an id of boo and a class of bar just by typing this there we go we have our input with the idn class if i just type input then we can see in this pop-up all of the different input types that we can select from so if i needed a date input just hit enter and now i have a date input and within it you can create a really complex html structure with one line it's really awesome and i have an entire video on emmett if you want to learn more now somewhat similar to emmett is intellisense this is another built-in feature of vs code and it helps you with context aware suggestions intellisense features are sometimes called by other names such as code completion code assist or code hinting vs code intellisense is provided for javascript typescript json html css scss and less out of the box vs code supports word-based completions for any programming language but it can also be configured to have richer intellisense by installing a language extension so if we go over to extensions and we go to filter category and then programming languages and we're going to see all of these different programming languages that we can choose from and these include python c c plus c sharp java go php ruby and rust so let's see what intellisense can do we're going to go to the app.js file this is a javascript file so we're going to type document and we can see it's already starting to help us so let's hit enter we want document and then we're going to press period and this is going to give us a list of suggestions these are all of the available properties and methods and functions available to us on document a no developer can remember every method function and property available so intellisense helps us and allows us to write code much faster right now when you're writing code you want as much space as possible right now i have this very zoomed in so this is not exactly what it would look like on your computer but i'm kind of running out of space here we can actually get rid of this sidebar we press ctrl b that's going to close the sidebar so remember b is for side bar and press ctrl b again it will bring it right back but if we want to open a specific menu in the sidebar then those have specific keyboard shortcuts as well so ctrl shift e is the explorer control shift f is this search control shift g is the source control control shift d is debug and control shift x is extensions so ctrl shift e we'll go back to the explorer now another awesome feature of vs code is the ability to split editors so let's press ctrl b we're going to close the sidebar and now let's say i want to work on these side by side so i'll take my app.js and just move it right over here and now i can have two files open side by side i can also put this down below horizontally if i wanted to i guess that might be a little better if my monitor was vertical but we can put it wherever we want all right so let's move this back over here now there are a bunch of keyboard shortcuts that will help you to navigate quickly through your code and manipulate the text of course you could use the arrow keys to move around that's pretty easy but if we hold down the ctrl key while we move our arrow keys it moves us one word at a time instead of one character at a time that makes it a little bit quicker let's say we wanted to move this div down below the ul we could you know use our mouse and copy it and paste it and delete it and do all that but just with our keyboard we can press the alt key and then the up and down arrows we can move this line now anywhere we want and let's say i want to duplicate uh these allies i wanted to add uh two more allies so i can press alt shift down arrow and add as many lis as i want now maybe i want to change all of these divs here to span tags so i can press ctrl d and it's going to select the current word that the cursor is on but if i press ctrl d again i'm going to select the next occurrence of that same word and keep pressing it and select as many as i want now they're all selected i have multiple cursors going on here now i can start typing i can say span so now all of the divs turned into span now let's say i want to type into all of these allies at the same time well if i click into here i can hold down the alt key and i can create multiple cursors all at the same time then i can type into all of them and then of course as in just about every other application if i did something that i didn't mean to do i can press ctrl z to undo it alright so now we're going to talk about the terminal this is probably the scariest subject for a lot of people but it's really not that scary i promise there's so much that we can do with the terminal so the easiest way to open the terminal is by pressing control back tick or if you have to use the mouse go up here to terminal and then new terminal all right so i'm just going to press ctrl back tick that is the key to the left of the number one on your keyboard alright so i again i'm on windows so this came up to powershell windows has powershell or the command line and on windows i actually prefer git bash if you're on linux or mac os i prefer zsh if we go up here to the right of this plus there's a down arrow we can select powershell command prompt or git bash so i'm going to select get bash i already have that installed and if you don't have get bash installed don't worry i have an entire video on git where i'll show you how to get it installed the link of course is in the description below so that started a new bash terminal i want to select my default terminal so i'm going to go to select default profile and i'm going to select git bash as my default let's go ahead and close out this powershell we're going to close out this bash so now when i press ctrl backtick it's going to automatically open up a bash terminal for me so again there's a lot that we can do with the terminal you're going to have to use it at some point you can traverse directories create directories create files you're going to use it for node.js and npm you're going to use it for git version controlling and so many other things vs code is a powerful and versatile code writing application and it can handle every web development language that you would want to use so what next if you're just starting out check out my html css and javascript crash courses to start with and i have an entire roadmap that you can follow and i'll include the link to that in the description if this video was helpful help me out by giving it a like and subscribe if you haven't already for more videos like this [Music] you