Explore content and add it to CodePen - HTML Tutorial

- [Instructor] Before you start building a website, the very first thing you should do is look at the text that you're going to be given. All of the content that makes up that website. Typically, you'll be given this as a Word document and it will have certain items marked in bold or with headings and so forth. To keep this experiment as straightforward as possible, I have set up all the content that we're going to be using to work with in this particular course as plain text so you don't have to have Word. So, if you take a look inside of your Exercise Files folder, look inside of the folder called "01-01," you'll find a file here called "Dressing up a Salad.txt." And if you open that up, it will open up in your computer's text editor. And what I would encourage you to do is just go ahead and pause the video and do a quick read of this information so that you have a sense of what this page is all about. If you don't actually read your content, you have no idea how you should mark it up. So go on ahead and give this a read and think about how you might identify different parts of this text. What are headings, what are paragraphs, what might be a list, what seems like navigation, what might be a site name. That type of thing. You don't have to know the tags, just sort of think about the functionality. Go on ahead and do that now. Okay, so hopefully you've identified a few elements in this document that stand out to you. You might see, as I said, headings or lists and paragraphs and that kind of thing and we're going to mark all of those up. But the way we're going to do that is with CodePens. So what I'd like for you to do, is go on ahead and just copy everything you see here. Go ahead, highlight it all and then copy it on your computer. And then go ahead and open up a web browser. And you're going to go to codepen.io. And if you're not logged in, you can log in. If you're not interested in saving your work, you don't have to log in. What you're going to do is over here in the upper left-hand corner where it says "Create a Pen," go on ahead and click on that and that's going to give you a pen. You can pull these things around. In this course, we're really going to spend all of our time up here in HTML, no time at all in Java Script, and almost no time in CSS. Go on ahead and paste in the text that you just copied from that text document, and that is our starting point for this course. You can go on ahead and hit Save after that. And Codepen will go ahead and save this into your account. You can give this a name as you wish. You can say this is "01-01: "Starting with CodePen" or anything else you want to call it that might help you find this later on and from this point forward we can start thinking about how to mark up our document.