Text Editor Tutorial (Sublime Text, Visual Studio Code, Atom) | Coding Made Simple

hey guys how you doing my name is tj and in this video i'm going to show you how to get started using sublime text once you've actually installed it and you are ready to get started working on your first project so the first thing that you might need to do anytime that you are working on a new project is to actually create a folder now this is something that you can simply do on your desktop by just right clicking if you are on a macbook and the process should be a bit similar if you are on a pc as well so for me i just right click and i click new folder and immediately i can just name the folder whatever i want and i typically avoid having spaces in my folder name so let's say that i had a project called like project one or something instead of doing something like project one with the space between it i would do project hyphen one instead now this is important and it comes in a lot handy later when you are playing around with the command line but that's not the purpose of this tutorial so let me just focus on how to actually use sublime text anytime that you are working with your project folders and files so now that we have a folder if you double click it you see that this folder doesn't have any actual files inside of it so how do you open this folder using sublime well the first thing you have to do is actually open sublime so for me let me open sublime text so now that sublime is open i can just come up here and go to file open and go to my desktop and click on that folder and i go to open and that now opens that folder in the sublime text editor for me so the next question or the next step is how do you create files using sublime well again if you just come up here and go to file you can click new file and let's say that we want to create an index.html page i go to file.new and this is going to pop up here and all you do is just type the name of the file that you want to save then click save and i'm not going to use any shortcuts on my keyboard so i'm just going to go to file save this pop-up window where you can actually confirm the name of the file that you want to save and you see how right now it's showing that the place where this is going to save is your desktop but that's not where we want that file to be saved at we want to create that file and save it inside of project one so if you click here go to your desktop and click this drop down thing to now expand it click on project one and click save and that is gonna save this file into project one for us so do you see how now in sublime text it shows that we have a index.html file and that file is this one here so let me just delete this and something else that you also have to pay attention to is anytime you have unsafe changes inside of a file in sublime text this thing up here is going to be like a round point like you see right now but as soon as you save those changes so let me click save you see how it now turns into an x so make sure that you pay careful attention to this because i see lots of people having issues like my code isn't working my code isn't working and then they come to find out that oh they just actually didn't save the changes that they made okay so make sure that you pay attention to that now i'm not going to sit here and create a bunch of html files so i'm just going to use a website that is already created to kind of show you guys this next part so i'm going to x out of here and i'm going to open up my actual old roots technology website which is this one and also the way that you can open html files is by just double clicking on them and they'll open up in the browser so if i just double click on this it's going to show you guys you know by the time you see this video this is my old roots technology website and i'll probably have a new one up but let me go back to sublime text and open this folder in sublime so i'm gonna go to file open and i'm gonna go back to my desktop and open this one here yep so you see how now it shows all of those files there so if i click on my index.html file it shows you all of the code that is currently on that page now the next thing that i want to show you is how to actually view two files at the same time without you having to you know just be going back and forth because most of the time any time that you are working on building a website or web page you are typically going to be either looking at your html code or your css code and going back and forth between the two but you don't have to do that because sublime actually lets you to open up two columns but first let me just kind of show you what the current like workflow is before showing you this so if i click down assets this is where my css code is so you see how now is my css but i want to see what's in my html so now i have two tabs open right my html tab and my css code tab so that means that as i'm like writing this code and i'm looking back and forth between the two that i have to keep alternating between these two tabs and one thing that you can also do is to just shuffle these as well if you want but anyways using sublime text you can actually put these two files in two different columns that'll make it a lot easier for you to look at and the way that you do that is coming up here to view go to layout and just click two columns but you also have the option to do rows a grid three columns etc so right now i'm gonna click two columns and that is going to open up another section inside of the text editor and what you can do is to click and hold on the tab of the file that you want to move over and just click and drag it over and then let go so now this way anytime that you are writing your css code you can have your index.html open here so it is a lot easier for you to see the html that you're actually targeting all right something else that's going to be important to pay attention to when you're working with sublime text is that you can actually find and replace so for you to do find and replace you can just come up here and go to find and click replace and this now lets you type any type of keywords or etc so let's say that i want to check every word that i have padding right so if i come in here and i type padding this now finds all of the places where you know that i have padding written down so let's say that i wanted to change everywhere that i have padding to margin so i would just do the replace here and type margin so now if i click replace it'll just replace the first find i mean the first padding that it finds and replace it with margin but if i want to replace all of them i can just do replace all down here and the way that you exit this view is by just pressing escape now if i just want to use find without really doing any type of replace then just don't click replace in there or you can just come back up here and just click find by itself and these are the different shortcuts that you also have in terms of you know command f command g etc now something else that i also want to show you in sublime text is that you can actually use it to quickly comment out any code so if you just highlight this and you do command backslash that'll now comment out this code for you and this works in any programming language that you are using this text editor for and this functionality typically comes with every text editor so this is something that you can do if you are using sublime text adam or any other one as well and again remember how i said anytime that you have unsaved changes in a file that at the top here you will see this round dot so that means that this change that i made in terms of commenting out this code has not been saved yet so let me do command s to save it and watch this turn into an x right so i just did command s and that round dot now turned into an x let's say that i delete all this code here you see it'll now be this round dot again let me just undo that and i'm gonna undo those changes as well and save that and that's it when it comes to the basics of using sublime text to kind of write your code and just kind of see how things work the main things that you will need is to open a folder so typically you should actually create that folder on your desktop i mean that's what i do but you can create it anywhere you want and then open up sublime text and just use this file open to now find that folder and to open it and then you can also use file.new file to actually create a new file so let's say that i want to make a new file so i have the option of typing the file name here and then clicking save so if i do comment s and you know the main thing that is very important to like watch for is to just be wary of where the file is actually being saved and that information is going to be in this drop down okay so this is showing me all this now because i clicked that but typically it might show up like this for you where it's showing you this where and anytime that you want to expand that may just click on this icon here on the right and this now shows you oh that this css folder is inside of this assets folder but you can also come here and just click on the drop down and again all of this is inside of the tj20.github io folder all right i'm not going to save that and that's it that was just a brief introduction to using sublime text and again sublime text has a lot more features that come with it but these are the main basic ones that you need to know to be able to get started and to start writing code and as you go feel free to tinker around and just play around with sublime text a lot more to start learning more about it on your own

Channel: ROOTs Technology

Views: 25,259

Keywords: how to use sublime text, how to use a text editor, how to write code, how to use vscode, what is a text editor, atom, vscode, sublime text, how to build your own website, roots technology, sublime text vs visual studio code, sublime text setup, sublime text 3 setup, sublime text vs atom, how to use sublime text on mac, text editor for html and css, vs code tutorial for beginners, text editor tutorial, coding made simple, coding like a pro, editing, rootstechnology

Id: 7Rhv9eFjuSY

Length: 10min 44sec (644 seconds)

Published: Tue Apr 27 2021