Hey there. In this page we're gonna create our first bit  of HTML and CSS. Okay? We're gonna do some coding,  but don't worry, it's gonna be pretty easy coding. All right, so let's get into it. Okay, so I'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. Okay? Give your site a name. You can call it anything you like. I'm gonna call this one Dan's portfolio.

And down here, this is the important bit,  the local site folder. And all this does is tell uh, Dreamweaver  where you're gonna keep your website on your computer. Now you need to keep all  of your files in this one folder, okay? You can't have them spread out all over the place like you  can do as a graphic designer, okay? You've gotta have them all on your laptop. So let's create a new folder.

So let's click this little browse button. I'm gonna put mine on my desktop for this case. I'm gonna make a new folder. I'm gonna call it Dan's  Portfolio Portfolio. You can see the naming convention here. Just don't use, uh, spaces.

Try to use underscores. And because you're now going to be a hardcore coder,  you need to use lowercase instead  of title, case, or uppercase. Just 'cause no real reason. Let's click create. Let's click 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 click on, uh, type in images and click create. And what it's done is it's just made. Let's click choose. I'll go show you my desktop. You can see here is my folder that I made.

And inside there is my images folder. And that images folder here under advance will just help us  when we are gathering images from all sorts of places. It'll make sure that Dreamweaver picks them up  and puts them inside this local site folder. Remember everything on this page, uh, 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. Okay,  first things first, uh,  we're gonna create an H TML five page.

Now yours might look a little different. You might be on recent files or CC files. Just make sure I'm quick start, okay? Um, and let's click on H TML five document. Great. And during this course what we're gonna do is we,  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 are designers,  but we're gonna 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 also, it's really lightweight and really quick. Um, whereas the standard view can be a little sluggish  and I find a little hard to use.

So make sure you switch to developer. Yours might look slightly different. Yours probably on files there, so I'll switch mine there. Great. So first thing we should do is save our page. So let's go to file.

Let's go to save. Now, um, for our first page we need to call it index html. Um, this is true for every website. You need at least one page called Index  HTMLs, but exactly like that. And that will be your homepage. Okay?

So, um, you can't call anything else just  for this page or preceding pages. Say our portfolio page or any of the services  or contact us, they can be called anything we like. But the homepage needs to be called index to html. Great. Where it gonna put it? It's gonna  put it inside Dan's portfolio.

I'm just gonna make that a little bigger. Okay. And I'm gonna click save. Great. The next thing we should do when we are making any new page,  it's at a page title at the moment it's called Untitled  document and it just means via preview in a browser. Watch this.

Let's go to file. Let's go down to real time preview and click Chrome. Okay, it's gonna open up in a browser. And can you see it on 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. Tutorials, okay, 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 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 gonna be called  Daniel Scott's  Design Portfolio. Great. Next thing we're gonna do is we're gonna add  our first bit of code. That's it.

Save. So to put anything on your page, you need  to put it between these two tags called Body, okay? So there's an open and a close. You can see the close here has the  forward slash in front of it. So if I put a couple of returns in here, okay? So anything that appears in here is gonna appear on my page.

Anything that appears at the top here in this head, okay? Is kind of stuff in the background. Like this page total here is kind of stuff  that the browser uses for weird things. Okay? And in terms of the body here,  this is where we're gonna put our code. So now let's put in our first bit of H TM L code.

Are you ready? Ready to become a coder? Okay. So the first thing we're gonna do is we're gonna put an  angle bracket, okay? And we're gonna type H one. Okay?

So H one is considered the most  important heading on your page. To close off the heading, we need  to put in a close angle brackets, okay? So that's the opening of the head. And then we're going to put in hello  world, okay? You have to write hello will for your very first bit  of coding just 'cause that's the line  of passage for everybody. So if you're a coder and you ever go to coding school, uh,  that's the first thing you're gonna go  and produce is something that's gonna make a page  that has hello world on it.

So welcome. So let's actually make it work first. So we've got H one, the opening, then we've got Hello world. Now to close it off, we need to put in uh, angle bracket  and then a forward slash and dreamweaver's pretty clever  and finishes it off for us. But you can see over here there's the open on my H one. Okay?

And here's my closing. The only difference is it's the same thing except it has a  forward slash okay? So it wraps around our 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 realtime browser preview. Now you can go up to file or there's a quicker away  down the bottom right here.

So I'm gonna preview, I'm gonna click on Google Chrome. And there my friend, we have hello world  and a nice big heading, you my friend are now a coder kind  of as long as people want a website  that only has headings in it, okay? But we've done it, right? We've got an H one and it's got some texts in there. It's on a page we've even coded, okay,  our heading along the type here or our page title. Okay?

So let's get back and do some more coding. So back here in Dreamweaver,  we've created our first bit of HTML. Okay? 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 'em with. 'cause that's what we wanna do now is this heading is big,  bold and times New Roman and black. What we wanna 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 a CSS sheet.

It's not particularly exciting, is it? Okay, just have 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 rarely common to call it Styles css. Okay?

Now the next thing is we need to link the two. 'cause these are two separate files at the moment. They're still in the same folder, okay? 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.

Remember our bodies, everything that appears in the page  and the head is everything that's on the background  that kind of does the behind the scenes stuff, okay? And that's what we're gonna do up here. We're gonna put a return afterwards,  we're gonna put another link to our CSS. Now it's actually quite 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, okay?

Come from a design 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 type in the word link, okay? And what you want do is you want to hit tab not return. Return does nothing. Okay?

We've just got this weird word called link. But if we've got link and hit tab  on our keyboard, look what happens. Hey magic, it puts links to a style sheet  and it has this H ref thing here. And if we start typing s,  can you see Dreamweaver is even more helpful. Okay? And you can see there styles 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. Great. So then now connected. If I hit save file save, you can see this little  document bar appears at the top here. So source code references the  HTML that I'm looking at, right? All this hello world up here.

The styles okay is when I'm switching to the styling, okay? And they're connected now. So what I can do is I can style H  one and my styles css go in here. And what can we style? We could style loads. Okay, but let's get to the basics done.

So let's type in H one oh H one  and CSS has its own syntax, okay? It's not particularly hard. CSS is the easiest  of all the um, bits of coding you're gonna be doing. Okay? So it's H one to um,  reference the thing back in our H TM L  and then we put in a curly brace. Okay?

And then we put a return in  and can you see it automatically put in a curly brace at the  top here and the bottom And our styles just need  to go anywhere between them. Don't delete him. Okay? Or the top one. Everything inside here. Now let's start typing.

Let's do the font color. Okay? So just type in CKOL  and you can see dreamweaver's quite helpful  and tries to pre-fill it in with potential CSS properties. Okay? And in this case, colors at the top. It's really common ones.

I've used the word color. Okay? It references the font color. And you see there, I didn't type it all out,  I just clicked return and it 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.

I hit return on my keyboard and it fills  it in with the right syntax. You can see that semicolon needs to go in there. Okay? So the next thing I need to do is I,  if I know the hexa decimal number, I could go off  to Photoshop and grab it  or I could just use the color picker here. And you can drag this around and hug sliders. And I'm gonna pick red.

Okay, hit enter. And the big thing to remember when you were doing any CSS  property is that to finish it off  to tell dream movie you are finished, okay, is  to put in a semicolon. Okay? So there's a bit of syntax, curly braces,  there's a column there, but  that automatically got put it in there. And the curly, oh sorry, the semicolon at the end here. That's the one you always need to do.

And when you're learning, it's the one  you'll forget and things won't work. Double check that you've got semicolon in there, okay? And that code right there,  this FF 0 0 0 0 is the code for red. Now let's go and check our browser. And what I'm gonna do before we leave here is I'm gonna  do save, okay? I use this one save all, all the time.

Okay? So I'm gonna do that throughout the course. So save all. So it saves my HTL and my CSS. Let's go look at the browser. Are you ready?

I'm ready. B is  an H one, but it's red. Look at us doing web design. Let's jump back into Dreamweaver. What else can we do? Fun?

Okay, let's do font. You can see there's lots of font. Let's do font family. Okay, just put my arrowy down, hit return. And here's some basic ones. I'm gonna pair Gil Sands.

Great. And remember right at the end of this thing here,  we're gonna put in a semicolon. Now we're gonna hit save  and then we're gonna jump out to my browser  and we've got a big giant red, hello world. Nice. Okay, let's say we don't like the size. So font hyphen s, you can see this size  and I'm gonna put in, let's put it in really big.

Okay? So 160 pixels. Remember, end it in a semicolon. Hit's save, jump out giant. Hello world. Okay, back here.

That's probably be a bit big. Let's get down to maybe 60 pixels. Save it. Hey, okay, um, let's look at one other thing. Let's look at maybe the font weight. 'cause by default it's that big bold, okay,  so font weight is used two, see, that's font weight.

Okay? And uh, 100 is really thin  and considered. Uh, 400 is a regular. Uh, 600 is about a semi bold. And um, 800 is black. Okay?

Like the big thick fonts. So I'm gonna make it 100. Remember the end, semicolon, save, jump out. Hey, starting to look nice. Kills Sands is one of those weird fonts  where 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 gonna be doing to build a website. You put stuff in your HTML over here, okay? In this case it's an H one,  but it could be uh, an image, okay? Or it could be a link. And then you jump out to your styles css, you reference it  by its name and then you give it some properties, okay?

And there's lots  of different properties, but it's not that hard. People think, ah,  people think coding a website is super difficult. And it can be once you get into the really big,  hardcore dynamic Java sites. Okay? 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 H TM L,  and then how to style it in CSS and not a lot more. Okay?

So don't be scared by it. Great. So that'll be it for this video. We've covered how to start a site, okay? Define our local site. And then we created our first HTML page.

We put an H one in there. We created our style sheet, we styled it,  we did some web design. Okay? So that'll be hit for this video. Let's go in 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.