Introduction to Code Text Editors

Get Started With Visual Studio Code — HTML, CSS, JavaScript

This video is a quick introduction tutorial on text editors for coding. We explore the similarities between writing an essay in a word document editor, like Google Docs or Microsoft Word, and coding in a text editor.

I’ll guide you step-by-step on how to download and use a text editor to create and edit your first code files for starting out in web development: HTML, CSS, and JavaScript files.

Instructor: Lincoln W Daniel (https://LinkedIn.com/in/LincolnWDaniel)

What You’ll Learn:

• Introduction to Text Editors: Understand the basics of text editors and how they compare to traditional word processors.
• Downloading a Text Editor: Learn how to download and set up Visual Studio Code, one of the most popular text editors.
• Creating HTML Files: Step-by-step instructions on how to create your first HTML file and write basic HTML code.
• Adding CSS Styles: Learn how to create and link a CSS file to your HTML document to style your web page.
• JavaScript for Interactivity: Discover how to add JavaScript to your HTML to create dynamic and interactive web pages.

Text Editors Covered:

• Visual Studio Code (VS Code)
• Sublime Text
• Notepad++

Key Points:

• Writing and saving documents in text editors.
• The similarities between word processors and text editors for coding.
• Creating and managing files within text editors.
• Writing basic HTML, CSS, and JavaScript code.
• Viewing and testing your web pages in a browser.
• Whether you’re new to coding or looking to switch to a new text editor, this video is perfect for beginners and provides a solid foundation for your coding journey.

🔔 Subscribe to stay updated with our latest tutorials!

💬 Comment below if you have any questions or topics you’d like us to cover in future videos.

Resources:

* Download Visual Studio Code: https://code.visualstudio.com/

* Download Sublime Text: https://www.sublimetext.com/

* Learn HTML: https://developer.mozilla.org/en-US/docs/Web/HTML

* Learn CSS: https://developer.mozilla.org/en-US/docs/Web/CSS

* Learn JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Topics:

• TextEditor
• Coding For Beginners
• HTML
• CSS
• JavaScript
• Web Development
• Coding Tutorial
• Learn to Code

Video Transcript

Hey there today, we’re talking about text editors for writing code, but before we get to that, I want to show you how it relates to writing an essay in a word document editor, like Google docs or Microsoft word, because in order to understand text editors, you have to first understand that they’re very similar to just writing an essay in English, in a word document editor, and then sharing it with somebody else.

And then once we’re done with that, I’m going to show you how we actually download a text editor and then use it to create a file. First, we’ll use it to create an HTML file, which is how we create websites using HTML, CSS, JavaScript. But first we’ll just look at how to download that text editor and then how to create a file and write some HTML on it.

But before we get to that, let’s look at our Word document in Google docs. So we have a Word document here. We’re going to write some English. Hey. Let’s write an essay. So we wrote an essay. It’s a very short essay, but an essay nonetheless. Well, we actually forgot to give it a name, so Our First Essay.

That’s the name of this document. So now that we have it, we can hit command S or control S to save it. And then once we save it, we can go ahead and let’s say print it out. And then once we have it printed out, we give it to our professor or to whoever wanted it. The same thing with Microsoft Word or any other document editor.

You can write an essay in English or you can write it in French, or you can write it in Spanish, right? You can write it in any language that you want that somebody else can understand. But when it comes to text editors for coding. We want to write code that a computer can understand, right? And once that code is written, then we publish it to the internet for everyone to see whoever we want to see, we can publish it to the internet.

So in order to write that code, we need a text editor and there are many options. So one of the most popular ones these days is visual studio code. You might’ve heard of it if you’re learning how to code, but there’s other options like sublime text, which I used very early on almost a decade ago now, when I was learning how to.

Code and actually more than a decade. And there is no pad plus plus, which is a very simple text editor without all the bells and whistles, but it gets the job done and you can use any of these. It’s up to you what you use. My favorite these days is Visual Studio Code. So let’s go ahead and download the Visual Studio Code for Mac.

Or if you’re on windows, of course, there’s other options you can download for windows or Linux, but I’m on Mac, so I’m going to download it for Mac, right? I hate that. It downloads, and once it’s done downloading, I can open it. Fortunately, I already have it downloaded and opened up. So let’s go to Visual Studio Code, right?

And now we’re here. This is the text editor. But there’s not really much going on. All it says is, Welcome to Visual Studio Code. Editing evolved. That’s just their tagline. And it says start. And we can start by creating a new file. Or opening a folder of code files. Or we can clone a Git repository or connect to something else.

And these are my ways, my reasons, but you can’t see that right now because I’m hiding them. But in any case, we have the option to open, to create a new file or to open a folder for now. We don’t have a photo to open. So let’s just create a new file and we’ll call this our first file dot HTML. And we’ll save it to this folder, which is called text editor.

And here it is. We have a document again, much like in our word document, we have a document. We gave it a name, our first essay, and we can write some stuff. So it’s the same thing here. We have our first. File here. Our first HTML file. We gave it a name called first file and we can write some HTML. So we can just type HTML.

We can type head and we can give it a title, uh, first file or let’s call it first website. And then we can give it a body and we can say, hello world. Of course, let’s put that in paragraph. So that’s good. We can be syntactically correct and we can do more stuff. We can give it an image, but we don’t want to do that right now.

There’s many more stuff we can do, but for now let’s just keep it simple. We have our document. It says first website, hello world. And now if we open this in our folder, we have first file and let’s go ahead. And of course open it in Google Chrome and we can see hello world. And the title of the website is called, if we close these, it’s called first website.

So that’s what we did. We created a HTML file and we gave it a title of first website and we gave it some content, hello world. And then we command saved, right? Command S or control S depending on what your commission is. And now that it’s saved, we can open it in a browser and later on, we’ll learn how to open it, how to share of the world by publishing it online, using GitHub and Heroku and other publishing sites where you can share your code with the world for them to use it.

Like how facebook.com is published online for you to use the same way with google.com. Somebody wrote it in their text editor right here, and then they saved it. And published it to the internet for everyone to use one day. We’ll get to that. But for now, I just want to show you how we use a text editor.

So this is one of the very first things you have to learn. If you want to start writing code, you need to write it somewhere. So this is your text editor. And let’s say we want to close this and close this. We can now go to file open folder, and we can actually open this entire folder of text editor. Our text editors.

So now in the left side here, we can see our first, first HTML file. We can act, we can actually go ahead and right click and do new file and say, uh, styles dot CSS. And now if we go ahead in our styles, our CSS, we can write some code. We can say, we’re going to target the body and say, background is red. And then in our HTML, we can go to the head, which is how we tell the HTML Information about this document.

So the first bit of information was the title of the document, but from there we can do more, we can bring in styles, which is what CSS is cascading style sheets, we can bring that in and say, Hey, let’s link to our equals style sheet, and we can say, H ref equals styles dot CSS. And now that we have that saved, we can go to our document here and command R or control R to refresh the page or just press this button here, we can see that our HTML document now has a background of red, the body of our HTML is now red, we can make that gold if we want, and we can go here and refresh and it’s gold.

So now we know how to create an HTML file to create a website, right? Create the contents of a website. And we can also create a CSS file to ask and styling to that HTML document, that website, such as making the background red or yellow, gold, whatever we want, we can make the font size big or small, whatever we want.

We’ll learn more about this HTML and CSS later in more detail. But for now, I just want to show you how we create files and link them together using our text editor as specifically for HTML, CSS, and JavaScript. So next is JavaScript. What if we want to add a file that creates some functionality and that’s what JavaScript is for JavaScript as the functionality to your HTML.

So we can go here to our. Our folder and say new file and we can type in script dot JS, which is JavaScript. We can write whatever script we want. And so we can say, let’s write a function and it will say handle click and we can say on a click. We’ll just do an alert. We’ll say hello. I was clicked and now that we have our JavaScript file, we can go back to our HTML and write script and give it the source, which is our script.

js and that’s it. And now we can use that function in here on click. We can say handle click just like that. And click me. And now we have a bunch in our HTML so we can go to our website and command R and when we hit click me, we see hello. I was clicked. So that’s our JavaScript running. So we now have our text editor.

We made a file called first file dot html. We added some CSS by creating another file called Style CSS and adding some CSS to it, which is a very simple CSS. Again, this is not, the point of this video is not to go into the details of HL Cs and JavaScript. It’s just to show you how to create these files in a text editor and edit them and save them, and then see them in your browser.

And so now we have our style CSS, we put it in our HTML using the link. And we also created a JavaScript file called script dot JavaScript. So we can write a JavaScript, right? And we linked it to our HTML again, and we use the function that we wrote in our JavaScript file to create a button that once it’s clicked, says, hello, I was clicked and that’s it.

So we can, of course, add more to our. Folder here. We can create a new folder inside of that folder and call it images and add some images there. But we’ll get into all of that later. There’s a lot more to HTML, CSS and JavaScript, but now you know how to create a file in a text editor, you know how to download it and you know how to save your file and you know how to view it in your browser and just to stress again, you get to choose which text editor you want to use.

I’m using VS code, visual studio code. That’s my preference, but you can use sublime text. Or you can use notepad plus plus, or you can use IntelliJ, WebStorm, just so many other options out there. It’s all up to you. This is just what the most popular one is right now in web development. So that’s what I’m using and I enjoy it.

So you don’t have to use it, but that’s what I always recommend. That’s it for this video. I hope you’ve enjoyed it. I hope it’s been helpful. And if it has subscribe and comment below leave me a comment for what you would like me to cover in the future And I will do my best to get to that. That’s all for now.

Watch this video on YouTube: https://www.youtube.com/watch?v=KKy5_DGyX20