Introduction to My First Web Page

Hi. 0:01 And welcome to the Treehouse Club. 0:04 I'm Joy, and in this course, My First Webpage, 0:07 you're going to expand your learning about HTML structure and begin to 0:10 explore how your style sheet can help you make your page look the way you want. 0:14 To begin, we're gonna connect the style sheet to your HTML document. 0:20 And then learn about a few new tags to make your text colorful, choose fonts, 0:24 upload pictures, and more. 0:28 Let's check it out! 0:30 You can begin by clicking on the Launch Workspace button next to the video. 0:32 If these files don't come up right away, here I'll show you. 0:37 If it looks like this or if you have a welcome page you can 0:42 just click on the index.html and style.css and they'll reappear. 0:47 Here's a preview of the code and here's the preview when I view it in the browser. 0:52 I chose to do a purple theme because I was inspired by the polka dots in 0:57 the background in my image. 1:01 You can choose whatever color or picture that suites your taste. 1:02 As always, you have full artistic license here, so do whatever you want. 1:06 Dabbing into the code, 1:10 the first thing you're gonna wanna change is my picture to your picture. 1:12 Here, in the body, is our image tag. 1:16 And to change the picture, I'm gonna have to have a new picture. 1:18 So, I've put one here on my desktop, and I'm gonna upload it to my workspace. 1:22 You know you've hit the right area at the bottom of the file tree 1:27 when that green plus sign appears. 1:30 Once it's uploaded, like mine, 1:32 you might need to change the name of your picture right away. 1:35 Now I'm gonna press Ctrl and click on it. 1:38 And in the menu, you can see down here it says Rename. 1:42 I definitely want the .jpg still there. 1:46 All of these numbers are gonna go. 1:49 [SOUND] And I'll make it joy1. 1:51 Then in my index.html file, under the image, 1:55 the path to the image with src, I'm gonna change to joy1. 1:59 And my name's still Joy, but you should change the Alt to your name. 2:05 Then I'll save it, and refresh the page. 2:10 And my new picture's there. 2:13 Great. 2:15 Back in the HTML document, most things inside the body should look familiar. 2:16 Like our level one and level two headlines, and our paragraph tag. 2:22 Level three and four headlines are new. 2:26 And you should play around with those and see what they do. 2:29 Inside the head element, there are some new tags. 2:32 And I promise, we will go over those in more detail later on. 2:34 However, for now, let's get into our style sheet. 2:38 I've broken it up with comments, as you can see here. 2:42 This is the top bar color and here's the body styling. 2:45 I tried to make them really clear, so 2:49 that while you're styling this page, you can see where everything is. 2:51 Back up at the top of our style sheet it says, Top Bar color. 2:55 And here on our webpage, there's a color at the top of our webpage. 2:58 When we scroll over this hexadecimal color, and I'll tell you more about those 3:03 later, you can see that there's a nice picture of what that color's gonna be. 3:07 Down here is a three digit hexadecimal color. 3:13 Again, we'll talk more about those in the future. 3:16 But you should try changing these number and 3:19 letter combinations around and see what they do. 3:21 There's also a few more down here in our headlines. 3:24 And the last one is the h4 headline. 3:29 Something else you're gonna wanna do is change the border radius on our image. 3:32 I made it 100% which almost makes it look like a circle. 3:36 But if I changed it to 10%, saved it and refresh the browser. 3:40 You can see it's much more squared off and 3:46 it's just the little corners that are rounded out. 3:49 The last thing I'll point out before letting you get to 3:53 editing is the font size. 3:56 Try and change these around in the body and 3:57 the headlines to see what different sizes they make. 4:01 These are called ems, and again, we'll talk more about those in the future. 4:05 But for now, play around with them, see what they do. 4:09 All right, it's your turn. 4:13 Change everything in the workspace to make it your own. 4:15 And when you're ready, I'll explain each element in detail. 4:18 Just a reminder, if you ever want to revert back to the original code, you 4:21 can copy and paste the line you need, or the whole code, from the teacher's notes. 4:26 Have fun 4:31