Introduction to HTML

VS Code Setup

Jen Kramer

AnnieCannons
Introduction to HTML

Check out a free preview of the full Introduction to HTML course

The "VS Code Setup" Lesson is part of the full, Introduction to HTML course featured in this preview video. Here's what you'd learn in this lesson:

Jen walks students though the setup of VS Code, including adding the Open in Browser VS Code extension to allow for viewing HTML code in the browser.

Preview
Close

Transcript from the "VS Code Setup" Lesson

[00:00:00]
>> Jen: I'd like you to add one thing to this that was not in the Internet fundamentals course. So go on ahead and open up your VS Code right now. [COUGH] And your screen should look just like this.
>> Jen: Go ahead and open up that VS Code. You should see a whole lot of nothing.

[00:00:22]
If you're there you're good. All right, where we're gonna go, is we're gonna go over here to this funny looking button that's down here on the bottom left hand side. If you roll your mouse over it, it says extensions. Go ahead and click on that. And this is a way of adding additional little pieces of functionality to VS Code that might make it more helpful to you.

[00:00:42]
And, it could be that Brian Holt who'll be teaching next week may have some other additions here for you, but I found one that I think is really super helpful, and this one's called Open in Browser. So, go ahead in the search box, type in Open in Browser.

[00:00:59]
>> Jen: And so this is gonna search all of these extensions that are available for VS Code. Hopefully the very first one up here at the top, which is from TechER, it says Open in Browser 2.0.0. Go on ahead and click on the Install button.
>> Jen: And that should go ahead and install this.

[00:01:20]
So what this is gonna allow us to do is it's going to allow us to open our HTML that we're writing directly into our web browser, super handy, okay? So if you've gone ahead and done that at this point, go ahead and click on Reload to Activate. It'll think for a minute, and then you should see a screen that looks like this.

[00:01:45]
How's everybody doing so far, all right? Fabulous, okay, good. So we're ready to go on ahead and get started then with some basic HTML. So, one of the things that I have noticed about the people who are here in class today, we have people who have computer science degrees or almost have computer science degrees, and we have some people who know absolutely nothing.

[00:02:10]
And it's likely that those of you who are out there online you're somewhere in between that, okay? And so, I'm really teaching this to people who have no background at all. So you may find that this course is gonna go a little bit slow for some of you who have some programming background, and that is by design.

[00:02:28]
Because there are no prerequisites for this class, and I am teaching to the people who have no background in this. If you do need some extra work, please go on ahead and ask in slack. I'm always happy to make things harder, but one of the fundamental things about teaching is that it is easy to make things hard, it is really hard to make things easy.

[00:02:49]
And so my goal is to make things easy here for all of you, so that you feel like you're competent and capable, and that you can totally do this, because you can.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now