[MUSIC] 0:00 Fantastic job so far. 0:04 You're almost ready to start building your own websites. 0:06 A website is just a collection of webpages that are linked together. 0:09 So if you know how to create one webpage and 0:13 link it to another webpage, you know how to create a whole website. 0:15 That's what we'll cover in the final part of this course. 0:19 You'll learn how to create a simple resume page from scratch, 0:21 give it a little structure and style and 0:24 link it up to the profile page we've been working with throughout this course. 0:26 Many web developers write their code with a text editor made especially for 0:30 web development. 0:34 Text editors work in a very similar way to workspaces. 0:35 They make your life easier by color coding your code, automatically closing and 0:39 highlighting your opening and 0:43 closing tags, and auto-completing bits of code that you type frequently. 0:44 There are a few editors out there to choose from, but 0:48 one popular text editor is called Atom. 0:51 And best of all, it's completely free. 0:54 I've included links to Atom and some other commonly used text editors in 0:56 the teacher's notes, but for this course we're going to stick with Workspaces. 1:00 First, let's make a new document. 1:07 Go to File > New File, and in the sidebar here, 1:11 you'll see that it's created a new HTML file for us. 1:13 Since we're building a resume page, 1:17 name the document resume.html. 1:22 To set up a new html document we need to start with two things, a doc type and 1:26 a set of html tags. 1:31 And inside the html tags we'll need head tags and body tags. 1:33 Keep in mind that this structure is not something we need to memorize right away. 1:37 Some text editors will provide this basic code for you. 1:41 Or you can always look it up. 1:44 In fact, open a new tab or browser window and 1:46 do a quick search for the phrase, basic webpage. 1:50 And the first hit is from an excellent resource called Mozilla Developer Network. 1:56 Click the link and scroll down a little bit, and here's an example of the code you 2:02 need for a basic webpage, always there for your reference. 2:06 Okay, let's go back to Workspaces, and start setting up the page. 2:10 First, the doc type. 2:16 The Doctype lets the browser know that you're giving it an HTML page. 2:22 Next the html tags. 2:28 Everything, all of the visible and under the hood parts of our webpage except for 2:32 the Doctype, are nested within the html tags. 2:36 Now we need head tags to hold important information about our webpage 2:41 that doesn't display in the browser, like a link to our CSS style sheets, and 2:46 the title of our webpage. 2:50 We'll worry about linking to a CSS page in a minute. 2:52 Right now, just type out the title tag. 2:55 And inside the title tag, 3:01 type the title you want to display in search engine results and in browser tabs. 3:02 I'm going to type Treasure Porth's Resume. 3:07 Below the head we need body tags. 3:14 Remember that everything you actually see in the browser such as a header, 3:17 a navigation, a footer is nested inside the body tags. 3:20 And that's it. 3:24 Everything we need to start building a basic webpage. 3:25 Let's make sure this works. 3:28 Inside the body tags I'll make an h1. 3:30 And inside the h1 tags, I'll type resume. 3:36 Click the preview button. 3:40 And we haven't linked to our resume from the homepage yet. 3:42 But up here in the address bar, 3:46 we can get to the page we just created by typing /resume.html. 3:48 And there you go. 3:54 It works. 3:54 Now we're ready to lay down the structure of our resume page. 3:56 We'll do it in the next video. 3:59