Our first HTML & CSS web page

Hey there,
In this page, we're going to create our first bit of HTML and CSS. We're going to be doing some coding, but don't worry. It's going to be pretty easy coding. So, let's get into it.
So, we've opened up Dreamweaver. First thing we need to do is we need to create something called a site. So, go up to 'Site', along the top here, and go to 'New Site'. Give your site a name, you can call it anything you like, and we'll call this one, ‘Dans Portfolio’, and down here, this is the important bit, the local site folder. And, all this does, is tell our Dreamweaver where you're going to keep your website on your computer.
Now, you need to keep all of your files in this one folder. You can't have them spread out all over the place, like you can do as a Graphic Designer. You've got to have them all on your laptop.
So, let's create a new folder, so let's click this little 'Browse' button. And I've put mine on my desktop for this case. And I'll make a new folder. We'll call it ‘Dans-portfolio’. You can see the naming convention here, just don't use spaces, try to use underscores, and because you're now going to be a hard core coder, you need to use lower cases, they don't want title cases, or upper cases. Just because. There's no real reason. Let's click 'Create', and say, 'Choose'.
One last thing we'll do before we go is, just to make our lives easier, go to 'Advanced Settings', and go to 'Default Image Folder'. Click on this one, and click 'New Folder', and type in 'images', and click 'Create'. What it's done is, it's just made-- let's click 'Choose'. I'm going to show you my desktop. You can see, here is my folder that I made, and inside, there's my 'Images' folder. In that 'Images' folder, here, under 'Advanced', would just help us when we are gathering images from all sorts of places. It will make sure that Dreamweaver picks them up, and puts them inside this local site folder. Then, we'll have everything on this page, including our text, or our files, any images, any videos, all have to go into this folder on my desktop, called ‘Dan's-portfolio’. Let's click 'Save'.
First things first, we're going to create a HTML5 page. Now yours might look a little different. You might be on recent files, or CC files. Just make sure, and click 'Start'. And, let's click on HTML5 document. Great! And during this course, what we're going to do is-- there's a couple of options, there's 'Standard', and 'Developer'. There's 'Live', and 'Split', and all these sorts of things.
We're going to be in 'Developer' mode. I know we're not developers, we're designers, but, we're going to learn to code. We might as well use it with the best tools we can. And this 'Developer' mode has the best tools, and it's also really lightweight, and really quick.
And whereas the 'Standard' view can be a little sluggish, and I find that a little hard to use. So, make sure you switch to 'Developer'. Yours might look slightly different. Yours is probably on 'File'. I'll switch mine there. So, first thing we should do, is save our page. So let's go to 'File', let's click 'Save'.
Now, for our first page we need to call it 'index.html', and this is true for every website, you need at least one page called 'index.html'. About exactly like that, and that will be your home page. And you can call it anything else, just for this page, or preceding pages, our portfolio page, or any of the services, or contact us. They can be called anything we like, but the home page needs to be called 'index.html'.
Where is it going to put it? It's going to put it inside ‘Dans-portfolio’, I'm just going to make that a little bigger, and I'll click 'Save'.
The next thing we should do, we'll be making inner view pages, and a page title. At the moment it's called 'Untitled Document'. And it just means, if I preview in a browser, watch this, let's go to 'File', let's go down to 'Real Time Preview', and click 'Chrome'. It's going to pop up in a browser, and as you can see at the top here, it says 'Untitled document'. That's the little page title there, and that appears on all pages, and that appears both here, in that little tab, and when people bookmark your page, but also when Google does a search.
So if I do a Google search for, let's say, 'Dreamweaver Tutorials', see these little ones along the top here, these blue bits, that's where the page title ends up. So if you have untitled document, that's what all will be in blue in Google. And you'll actually never rank, so it's really important when you're doing pages, to go and do your page title, so let's do that now.
So, here in Dreamweaver untitled document, this one's going to be called 'Daniel Scott's Design Porfolio'.  Next thing we're going to do is we're going to add our first bit of code. Let's hit 'Save'. So, to put anything on your page, you need to put it between these two tags called 'Body'. So there's an 'Open' and a 'Close'. You can see the 'Close' here has the forward slash. I put a couple of 'return's in here. So, anything that appears in here is going to appear on my page. Anything that appears on the top here, and that's hid, is kind of stuffed in the background, like this page style here. It's kind of stuff little browser uses for weird things. And in terms of the body here, this is where we're going to put our code. So now let's put in our first bit of HTML code.
Are you ready? Ready to become a coder? The first thing we're going to do, is we're going to put it in angle bracket. I'm going to type ‘H1’. So H1 is considered the most important heading on your page.
To close off the heading, we need to put in a 'close'. Angle brackets. So that's the opening of the head. And then, we're going to put in, 'Hello World'. You have to write 'Hello World' for your very first bit of coding, just because that's the line of passage for everybody.
So, if you're a coder, and you ever go to coding school, that's the first thing you're going to go and produce. Something that's going to make a page that has 'Hello World' on it. So, welcome.
So, let's actually make it work for us. We've got H1, the opening, then we've got 'Hello World'. Now, to close it off, we need to put in an angle bracket, and then, a forward slash '/', and Dreamweaver is pretty clever, and finishes that off for us. But you can see over here, that's the 'Open', on my H1, and here's my 'Closing'. The only difference is, it's the same thing except that it has a forward slash. So, it wraps around that word. And that is going to be our heading.
So, we've done it. But we need to see it, so we're going to use our real time browser preview. Now, you can go up to 'File', or there's a quicker way, down the bottom, right here. So, when I preview, and I click on 'Google Chrome', and there my friends, we have 'Hello World' in a nice big heading. You, my friend, are now a coder, kind of.
As long as people want a website that only has headings on it. But, we've done it, right? We've got a H1, and it's got some text in there, it's on our page. We've even coded our heading along the ?? where our page title is. So, let's get back and do some more coding.
So, back here, in Dreamweaver, we've created our first bit of HTML. Next thing, we need to do is create something called CSS. Now, HTML are things like the words, and the images that go on the page, they're quite physical, and they appear on the page. The CSS is what we style them with, because that's what we want to do now, is this heading is Big Bold, and Times New Roman, and Black. What we want to do is go and start styling it.
And we do that in our CSS. So, you're ready? Let's go to 'File'. Let's go to 'New'. Let's switch it to CSS. Click 'Create', and that is the CSS sheet. It's not particularly exciting, is it? Just has a little bit of text in there. So let's save it. 'File', let's go to 'Save'. You can call this anything you like, but it's really common to call it 'styles.css'.
Now, the next thing is we need to link the two, because these are two separate files at the moment. They are still in the same folder, but they're not connected, so let's close down the 'Styles' here, and we need to connect them. And you do it by linking to it in this head. Our body is everything that appears in the page, and the head is everything that's in the background that kind of does that behind the scene stuff. That's what we're going to drop here. We're going to put a 'Return' afterwards. We're going to put in our  link to our CSS. Now, it's actually quite a long bit of code, so there's lots of tricks that Dreamweaver has got to make things a little easier for us, and that's the reason really why people like me, coming from a designer background can actually do front end web development, is because of all these helper things that Dreamweaver lets us do.
So, let's do it. Let's open the word 'Link'. And what you want to do is, you want to hit 'Tab', not 'Return'. 'Return' does nothing. I've just got this weird word called 'Link'. But before we go to 'Link' and hit 'Tab' on our keyboard, and look what happens. Hey, magic! It puts links to our stylesheet, and has this H-ref thing here. And if we start typing 's', can you see? Dreamweaver is even more helpful. You can see there, '*.css'. It's looked in my folder, and says, 'You probably mean this, Dan.' And I say, 'Yes', and I just hit 'Return' on my keyboard, and it lays it in there. So they're now connected. If I hit 'Save', you can see this little document bar appears at the top here, so, source code references the HTML that I'm looking at, on this 'Hello World'.
Up here, the styles, is when I'm switching to the styling. They're connected now. So what I can do, is I can style as 'H1' in my 'style.css', go in here, and what can we style? We could style loads. But let's get the basics done. So let's type in 'H1', and CSS has its own syntax, it's not particularly hard. CSS is the easiest of all the bits of coding you're going to be doing. So, it's H1, reference, I think, back in our HTML, and then we put in a 'curly brace'. And then we put a 'Return'. Can you see it? It automatically put in a curly brace at the top here, and the bottom. Our style is just to nearly go anywhere between them. Don't delete them. With the top one, everything inside here.
Now, let's start typing. Let's do the font color. Just type in 'col' and you can see, Dreamweaver's quite helpful, and tries to pre-fill it in with potential CSS properties. And in this case, color's at the top, it's really common ones I've used, to deal with color. It references the font color.
And you see the item. Type it all now. I'll just click 'Return', and I've filled it in. Let's do that again. So you type in 'col', and then I can use my keys to go up and down, hit 'Return' on my keyboard, and it fills it in with the right syntax. You can see that the semicolon needs to go in there.
So, next thing I need to do, is, I can find out the hexadecimal number. I could go off to Photoshop and grab it, or I could just use the color pick here. And you can drag this around, and few sliders running up the grid. Hit 'Enter'. And, the big thing to remember when you are doing any CSS property, is that to finish it off to tell Dreamweaver you're finished, is to put in a semicolon.
So this is a better syntax. Curly braces is a colon that automatically got put in there, and the semicolon at the end in here. That's the one you always need to do. And when you're learning, is the one you’re  forgetting things won't work. Double check if you got a semicolon in there.
And that code right there, that's FF0000, is the code for red. Now, let's go and check our browser.
And, what I'm going to do before we leave here, is I'm going to do 'Save'. I use this one, 'Save All' all the time. So I'm going to do that throughout the course, I'll 'Save All', so it saves my HTML, and my CSS. Let's go look to the browser. Are you ready? I'm ready.
Hey, it's a H1, but it's red. Look at this. We're in web design.
Let's jump back in to Dreamweaver. What else can we do? Font. Okay, let's do 'Font'. You see, there's lots of fonts. Let's do 'font-family'. Just use my arrow key down, hit 'Return'. And here's some basic ones. I'm going to prefer 'Gill Sans'. And remember, right at the end of this thing, we're going to put in a semicolon. Now we're going to hit 'Save', then we're going to jump out to my browser. Hey, we got a big giant red 'Hello World'. Nice!
Let's say we don't like the size. So, 'font-s', and you can see this size, and I'm going to put in-- let's put it in really big. So, a 160 pixels, remember to end it in a semicolon, hit 'Save', jump out. Giant 'Hello World'. It's probably a bit big. Let's get down to make it 60 pixels. Save it. And, let's look at one other thing, let's look at, maybe the 'font-weight'. Because, by default, it's like a bit bold. So, font-weight is used to-- you see, that's font-weight. And 100 is really thin, and 400 is a regular, 600 is about semi-bold, and 800 is black, like the thick big font. Let's make it 100. Remember, at the end, semicolon. Save. Jump out. Hey, this sort of looks nice.
Gill Sans is one of those lead fonts here. I love it really small, but I hate it in bold. I don't know why. Hate’s a strong word.
Anyway, let's jump back into Dreamweaver, and that my friend, is basically what we're going to be doing to build the website. You put stuff in your HTML, over here. In this case, it's H1, but it could be an image, or it could be a link. And then you jump out to your 'style.css'. You reference it by its name. And then you give it some properties. And there's lots of different properties. But it's not that hard. People think coding a website is super difficult, and it can be once you get into the really big hard core dynamic Java sites. But in terms of front end web design, and what you're expected to do, you'll be expected to know lots about how to put stuff into HTML, and then how to style it in CSS, and, not a lot more. So, don't be scared by it.
Great, that will be it for this video. We've covered how to start a site, to find a local site, and then we cut it off for our HTML page. We put in H1 in there, we created our style sheet, we styled it, we did some web design.
So, that will be it for this video. Let's go into the next one, and what we'll do in the next one is we'll start looking at something called media queries. And that just helps us learn about responsiveness.