How I setup VS Code for a beginners front-end workflow

Key Takeaways

hey everyone in this video I want to show you how you can set up a simple front and workflow using my favorite code editor vs code I'll walk you through setting up a file structure for HTML s CSS and JavaScript files and I'll also show you how you can install extensions and of course themes sound good let's get into it alright so if you don't have the s code installed yet you can install it by first running a search I'm using DuckDuckGo for my search type in vs code and it should be the first result code visual studio comm is the URL and then on their home page they will prompt you to download whatever version you have depending on your OS once you have V s code downloaded and installed the next thing to do is to create a project folder what I usually do is I'll go to my desktop and I'll create an empty folder on the desktop then you can open it in vs code by going to file open folder and then selecting the folder that you just created now we have our folder open and we can start creating our files okay so we're gonna be adding some HTML s CSS and JavaScript files first up is index.html so in our Explorer on the Left we are going to create a new file call it index.html then they'll automatically open and I'm going to use an image shortcut exclamation point to add boilerplate HTML into our file so update the title just say vs code workflow and then I'll add some text to the page as well so we can use it to test later so I'll add an h1 tag same thing theose code workflow then we'll use some Emmet shortcuts I'm going to create a paragraph tag in that paragraph tag on add some lorem ipsum maybe 30 words and then I actually want to multiply that let's do maybe 3 3 paragraphs of lorem ipsum placeholder text there we go and then you can use the alt z shortcut to wrap the lines now for our SAS and our javascript files I usually put them both in a folder called app close create a folder app and then in the folder we'll add two subfolders one for s CSS files and then another one for JavaScript files let's create our SAS files first and just so you know I'm using the term SAS and SCSS interchangeably because when SAS first came out they had its own syntax and then as CSS syntax was added on later and that's the one that most people use nowadays so when you say SAS these days it usually means s CSS syntax so I might say both so in our s CSS folder I'm gonna create first our main SAS file so say style s CSS and our main SAS file is really only to import these styles from our other SAS files so we'll leave that blank for now and we'll create maybe another file and I'm going to call this underscore lobell's s CSS now the underscore just kind of signifies that it's a partial SAS file which means that is just one part of all the complete styles that we're going to have so what we want to do is we want to import what styles we have in the Global's SAS file into our style that s CSS file so to do that we will type in at import and then we will in quotes type the name of our partial without the underscore at the beginning for the CSS file extension at the end so this is all that we have to type because we you know formatted the underscore Global's in that way now in our global SAS file let's add some global styles the first one is the HTML selector and I usually do font size 100 percent this lets the user have control over the size of the text on their screen by either zooming in and out or adjusting the browser size the default font size in their browser so we got that and then we're going to say box-sizing order box and this setting is pretty important to have because border box means that an element can have padding and it won't add on to the width so let's say you have an element that you set to 400 pixels if you also add padding of 20 pixels you still want the final width to be 400 pixels otherwise things get kind of weird so that's what box-sizing border box does then we're going to inherit that box-sizing border box in all the other elements so we're going to say wild card as well as wild card before and wild card after for these pseudo elements and they will inherit the box sizing from the HTML element then I'm going to add a body selector and I will first set font family to let's see we got some choices here from vs code but I usually just do Arial just because I like the sans serif fonts better I also usually set a global line height of one point one point three just to add a little spacing to your text in addition you can also do something like set all margins and padding to zero and that should be good for now let's also add a background color background color and we will do maybe dark gray - OH - OH - OH and then we'll set a text color of white ffffff okay let's work on our JavaScript now so in the App J's folder let's create a file called script a s this is just for vanilla JavaScript and I'm just gonna add some code so that we can test to make sure it's working when we load our website so I'll say console.log hello everybody save that and that's really all that we need for a javascript file right now alright so now we have our files all set up the next thing we want to do is we want to compile our sass files into a final CSS file and we also want to be able to run a local server so we can load our website in the browser now to do that I'm actually gonna kill two birds with one stone with this really cool extension called live sass compiler now if you don't have it installed yet you can go to the extensions marketplace by clicking this logo on the left side and then in the text box type in live sass compiler and here it is live sass compiler now I already have this installed that's why I have the button that says uninstall but if you don't have it yet you can just click this button here too that says install and then you will install not just a live sass compiler but it also installs live server which is another extension by the same person and this loads a local server so you can load your website in the browser now once you've installed the live stats extent and you might need to close the folder and then reopen it and this is so vyas code can detect that you have the right files to run the live sass as well as the live server extension so once we reopen the folder if we look down at the bottom bar we have the watch sass button as well as a go live button so let's try it out if we click the watch sass button starts compiling things to CSS and then when we click the go live button it should here we go it should load our website now zoom in a little bit and it's also not taking our styles so we need to add that in our neck size tml file so we add link tag it's gonna be a CSS and the CSS file is an e dist folder just dot style dot CSS so now it is watching our sass files for any changes and if we go back to our browser it's also watching the index.html file for any change so it'll reload anytime you make changes to your files which is really nice because you don't have to you know reload your browser every single time yourself so this is good so we can see that our Styles seem to be working I also need to add our JavaScript file so let's do that at the bottom script source and that's also gonna be app J s script jeaious okay so let's save that go back into our browser and you can see this might be a little hard for you to see there we go so you can see the hello everybody message way down there in our console so that means that our CSS files are loading correctly and it is running JavaScript as well now I do want to point out one more thing about the live sass extension and that is that by default it's going to create the final CSS file in the same location as your main sass file which is here however I've actually added a little bit of customization so that it puts the final CSS and the matte file in a folder called dist and that's because that's just how I like to set up my files I like to have all my final files and a dist folder as opposed to be files in an app folder you don't have to do this but I'm just going to quickly show you how I did add this customization so if you go to the command palette which you can access by view command palette working to the control shift P hotkey and I'm gonna go to open settings this is going to open the Settings JSON file and in this file you can add lots of different options for your workflow it's just going to do a quick search for live sass so down here in this section these are the different settings and options you can set for your live sass compiler extension I mean here I have format expanded which means it's not going to minify the CSS then the extension name is going to be dot CSS because that's the type of file that we're creating and then the last option the save path this is where you can tell vyas code to put the final CSS file if you want to be in a different location than your main sass file and so this is where I have the slash dist to put the final files in this distal der here so let's say for how I set up my simple front and a workflow now let's get to the fun part themes this is a really cool part of es Co that I love because it comes with a bunch of themes you can also download theme that other people have made from the marketplace and you can also create your own theme if you really want to so Howie just the themes are going to file references color theme and you can also use a hotkey ctrl K ctrl T and this will show you all the themes that you have currently now I have installed quite a few themes but you can see if I scroll through these you know it'll change the color based on whatever theme that I've chosen so you have a lot of different selections now if the default themes that vs code comes with are not what you're looking for you can look for more and you can do that by a couple different ways if you go back to your color theme there is an option at the bottom install additional color themes now it's opened up the extensions marketplace again let's kind of make this a little bit bigger and it's searching for category themes so you can go through they have icon themes and that's to control you know the little icons for the files that you can see in your file explorer but it also has the themes which is you know different ones that you can install to affect how your BS code looks and feels this material theme is pretty popular and I haven't installed it yet so let's click on this button and install it all right material theme it has a bunch of different styles it looks like so this is just really fun because you can make your BS code coding experience look exactly the way you want it to so that's it for setting up a simple friend workflow using vs code I hope this video has helped you and if you have any questions you can always leave a comment down below and as always thanks for watching and keep on coding [Music]