Introduction to CSS Introduction to CSS

HTML File Setup

Jen Kramer
Jen Kramer
AnnieCannons
Check out a free preview of the full Introduction to CSS course:
The "HTML File Setup" Lesson is part of the full, Introduction to CSS course featured in this preview video. Here's what you'd learn in this lesson's course:

Jen instructs students how to set up a HTML file in VS Code for the second section of the bootcamp.

Get Unlimited Access Now

Transcript from the "HTML File Setup" Lesson

[00:00:03]
>> Jen Kramer: So welcome back, everybody. This is CSS. And so now that we have the basics of HTML under our belt, we are moving on to the wonderful world of CSS and making things pretty, which will make everyone happy after a day of truly ugly web pages. So to get started today what we're going to do is set up our initial HTML document.

[00:00:23]
I've already written this for you. [COUGH] If you go to GitHub and take a look, we have here on this fine GitHub page, we have the HTML we'll be using today. Go on ahead and highlight the whole thing.
>> Jen Kramer: I laid it all, and copy, and then we're going to jump on into Visual Studio Code.

[00:00:46]
Go ahead and start a new file. Paste that on in. One of the giveaways that this has not recognized as an HTML file is that everything you see is white. That means you haven't saved it yet. And VS Studio doesn't know that this is actual HTML code. So go on ahead and save this.

[00:01:07]
File > Save.
>> Jen Kramer: I'm gonna make a folder on my desktop, I'm gonna call it day2, New Folder, day2 on my desktop. And I'm gonna save this as learningcss.html right into that day2 folder.
>> Jen Kramer: Boom, all the color comes up. Isn't that great? And then the last step here, just to make this a little bit easier to work with, is if you take your day2 folder, and just drag and drop it right on top of VS code, it may prompt you to save the workspace configuration as a file.

[00:01:53]
If you wanna do that, you can. I'm not going to.
>> Jen Kramer: Actually I should probably say don't save. There we go.
>> Jen Kramer: And then if you take a look over on the left side of your screen, you'll see that you should have a column over here. You should have learningcss.html listed there.

[00:02:15]
If that is not in place, look for the icon in the very upper left corner, the one that looks like a couple of documents and click that. That's what toggles that particular column. And then we can go ahead and open up learningcss.html. Phew! File management is always the hard part of all of this and we'll go ahead and we'll get started writing some CSS.