Hi there, my name is Dan Scott. In this video we’re going to turn you
from Web zero to Web hero… and look to build your very first
responsive web page using Dreamweaver. Now you can follow along
this tutorial perfectly. You just need to download
the exercise files. There’s a link down in the description,
it’s free to download. Go and get that, pause the video,
come back once you got the files. So the goal of this tutorial is
to expose you to modern Web Design. We’re going to look at terms
like Responsive, HTML5, and CSS3. They sound fancy but they’re actually
quite easy once you understand them. We’re also going to look at how… Dreamweaver makes it
super easy for us to do. Actually what I really want
you to get from this video… is to get you to a point
hopefully at the end… where you’re like, “Actually, it’s
not as hard as I thought it was”… and “I’m pretty excited about
going off, learning more… and building my own site.” Let’s get into it now and start working. So first up, let’s talk about the process. So first up, you’ll need to
design your website first… in something like Photoshop or Illustrator. You can see here, I’ve designed
what my website looks like on a Desktop… what it looks like on a Tablet,
and what it looks like on a Mobile. You can see, they are very similar… but each design kind of takes
best use of the device sizes. It’s just some font size changes… some reordering of boxes to make
it look out on different devices. And this is what we call Responsive. So the website’s going to change shape,
and change form a little bit… depending on whether it’s
Mobile, Tablet, or Desktop. So that’s our first big term
out of the way… Responsive Web Design just means… the website changes
to best use the device. So it doesn’t matter, Photoshop
or Illustrator… but I’ve designed mine here in Photoshop,
now we need to translate it into this. This is the finished version
of our website… where it matches my Photoshop
mock-up for Desktop… but when it gets down to Tablet… it changes there, I’m kind of
dragging my browser in and out. You see the font size changes,
it becomes centered… the columns go from 3 across to 2. So that is our term Responsiveness,
and we’re going to build this… and it gets down to Mobile
where it’s just stretching 1 across. We’ll also do some stuff
where you’ll notice that… there are 6 on Tablet,
but only 4 on Mobile. So we’re going to deactivate some of them. We’re also going to change
the menu along the top here… you can see, in my Photoshop mock-up,
they’re all straight on Desktop… but they kind of collapse into this
other version on the smaller devices. So we’ve worked out what
Responsive means… and we know what we’re
going to be building… Let’s go off now and start building it. First thing, open up Dreamweaver. Often at the beginning there,
it asks you a few questions… like what color you want
the background… and whether you want to be
a Designer or a Developer. So what you want to do is
pick ‘Developer’ for this case. If you didn’t pick the right option,
just keep going through… and then you can change it up again… in here, the top right,
and just pick ‘Developer… and it should look something like mine. Next thing we need to do is
define a size. So go to ‘Site’, ‘New Site’. We need to do this for every new website. So if you’ve just got one, you’ll
only have to do this once… but if you’re like me,
and building lots of websites… you’ll have to define the site
for every new one. So give it a name,
I’m calling mine ‘Roar Cycles’. It’s the company we’re working for… and we need to decide where
on our hard drive… we’re going to keep this website… because all of our images
and all of our HTML… all the stuff we make for this website
need to be kept in this same folder. So what we’re going to do is
go to ‘Local Site’ folder… click this ‘Browse’ button. And you could make your own ones… but because I’ve got some exercise files
already, you might download them. So, the ones you’ve downloaded
from the link in the description… go to ‘Responsive Exercise Files’,
and just choose this folder here. No need to go in any deeper. The other thing you should do
before you move on… is go to ‘Advanced Settings’… and up here where it says
‘Default images’ folder, go to that. Just pick the ‘images’ folder
that I’ve created for you. If you’re making your site by yourself… you’d make your own folder
with your own images folder. We’re just saving time to jump
to the responsive stuff in this course. Let’s click ‘Choose’, and hit ‘Save’. So what I’ve done just to speed
things up is I’ve started the website. Just to get us going so we can jump
into the responsive parts. So let’s go to ‘index1.html’. And this is what our page
looks like in Code. We want to see what
it looks like in a browser. Down the bottom right here, it’s way
down the bottom here… there’s one called
‘Realtime Browser Preview’. It’s this kind of far right icon. Click on that, and then
click ‘Google Chrome’. If you don’t have Chrome installed,
it’s best to go and install that now. It’s the most common web browser… and it’s the one you should
be doing most of your testing in. You can use Safari or any of the others,
but Chrome is our man. So this is what I’ve done for you so far. Just previewing locally in my browser. I’ve added a logo, this navigation,
and this big pink box. Just to get the structure right… so we can start looking at
what makes it responsive… because at the moment
if I grab this edge here… it’s not responsive at all,
it just kind of sits there. So let’s jump back into Dreamweaver,
and add our first bit of HTML. We’re going to put in the Heading. Where are we going to put it? Now, we’ve got our Header here. That contains my logo, and my navigation. See those three little buttons there? Then we’ve got this other chunk,
which is Main. Main is kind of middle part
of the website… Header is generally just
our logo and navigation. So Main here already has my Hero Box. And that is the big pink box
I’ve created already. It’s this guy here. So, inside of there is where
I want my Heading. We’re going to be designing
this Heading here… where it says ‘roarX, pre-order now.” So to put in a Heading, we need
to put in something called H1. H1 is our Heading1, and Heading1 is
the most important heading on our page. So, the syntax works like this,
just like, say… this Main here, it says ‘Main’… and it’s inside these
angle brackets ”… and there’s a ‘/main’ to close it off. So we need to do the same thing for our H1. So, angle brackets ”,
down by your M key. Type in ‘H1’, and then close it off. So that’s the beginning part,
just like Main here. You can see, the second part
is the same word… but it has a forward slash
‘/’ in front of it. So, we’re going to type in ”… and helpful old Dreamweaver has gone
and filled it in for us. That’s one of the perks with Dreamweaver. So the text goes inside, goes
in the middle of these two here. So have your cursor flashing
between the two tags. And we’re going to type in ‘roarX’… which is the name of our new bike
that we’re launching. And we’re going to say ‘Pre-order’ please. Or ‘Pre-order now’. Hit ‘Save’, so ‘File’, ‘Save’. And I want you to go and check
your Realtime Browser preview. Now you can check back
by flicking back to Chrome… it updates automatically… or if you’d like to,
you can click down here… and click on Google Chrome again. Either way, let’s get to our browser. You can see here, there’s my H1,
‘roarX pre-order now’. And by default, it is black and bold,
and a particular size. And that my friends,
is our first bit of HTML. If you’re new to web design, well done. This is our first bit of coding,
you’ve done it. Next thing we need to do though is change
these default colors, sizes, and fonts… to something that matches
our mock-up in Photoshop. So let’s go and do that now
learning something called CSS. So we’ve learned what HTML is… we’ve added an H1, and we’ve added
some text to it, that’s the HTML. Now to Style this, we use
something called CSS. I’ve created a CSS sheet here… in the ‘Related Documents’ bar,
let’s click it. And I’ve done some basic stuff already. I’ve said, that Hero Box that we’ve made. I gave it a height, and I gave it the
background color of pink. So I’ve got some stuff to get it started,
let’s look at creating our own CSS now. So, underneath this curly brace,
hit ‘return’. Returns don’t matter in CSS or HTML. You don’t need that return, I just
like to space them out a little bit. Just to make it easy for you to see. So when it comes to CSS, there’s some
basic syntax we need to follow. Basically you can copy what’s up here,
let’s say Body. So this is the name, H1. There’s a space, and you can see… there’s a curly brace at
the beginning and the end. So that’s what we’re going to do,
type in the first curly brace… and Dreamweaver’s really clever,
and it goes– you never have just
an opening without a closing… so it fills it in there for you. so it’s put in the ending one for us.
Let’s put in a ‘return’. Return is because it’s a
better space to write things… like this, the height and the color. So first bit of syntax, curly braces. Don’t forget the beginning
and the end, or don’t delete them. Next thing we’re going to do… is give this bit of CSS
what’s called an attribute… An attribute just means, I’m going to
give it a thing, like the color… or it might be a font size,
these are all called attributes. You can see there, I typed ‘co’,
and it pre-filled in color… and I hit ‘return’, and what it did is… it filled it in, and added
the colon ‘:’ there. So the colon needs to go in. Next thing is to pick a color. Now the cool thing about Dreamweaver
is that it has a Color Picker… or you pick from your libraries,
which is really cool. So let’s click ‘Color Picker’. And what we’re going to do is
drag this circle here… we can drag it around,
we can play with hues… but what I want is for it
to be in the top left hand corner. And that’s going to be white. So drag it up there,
and we’re going to use white. If it goes horribly wrong,
you can just type ‘#FFFFFF’… that is the code for white. Now the last thing, and the thing
that lot of people forget… when they’re brand new to CSS… is you need to hit semi colon ‘;’
at the end. So that’s all the syntax you need for CSS. There’s curly braces, and there needs to
be one at the beginning, one at the end. You type in the attribute, in our case
it’s going to be the font color. And you put in a colon ‘:’afterwards. In our case, Dreamweaver did that for us. Don’t forget the semi colon ‘;’ at the end. Let’s go and save it, but let’s
use the ‘File’, ‘Save All’. That’s handy because it saves both
the CSS and HTML at the same time. They’re actually separate files, so you
search to ‘Source Code’, which is HTML.. and this one here is my CSS, they’re
actually separate files in my website. So I find, when you’re learning,
it’s better just to go ‘File’, ‘Save All’. Make sure everything is saved,
and then jump to your browser. Are you ready? We added some HTML, our H1,
and we added some text. Then we’ve gone and styled
our H1 using CSS. You’re about to become a Web Designer. Ready, steady… Go. Awesome, huh? You’ve added an HTML, and you’ve been
able to style that HTML using CSS. That is the fundamentals
of all Web Design. We’re going to do a few other things
just to make sure it matches our mock-up. Then we’re going to move on and start
looking at specific Responsive Web Design. So let’s go and finish it up. So to match our mock-up,
we’re going to do a couple of things… like I’m going to grab the Type Tool
here in Photoshop, I’m going to click… I know I want 62 points for the font,
I want to push it down from the top… and away from the left here. So let’s go and do that now in CSS. So in Dreamweaver here, let’s put
a ‘return’ in, and let’s type in our font. You can see, it’s giving me
some pre-filled options. I want font size. You can see, it put the
colon ‘:’ in there for us. Now in our case, we wanted 62… actually I changed my mind,
I’m going to use 55 pixels. Just wanted it a little bit smaller,
just because. And I didn’t forget to add
the semicolon ‘;’ at the end. When your new that happens a lot. Put a ‘return’, we’re going to
do a couple of other things. We’re going to type in ‘Padding’. So I’ve typed in ‘pad’, and you can see,
Dreamweaver, super helpful, goes… “You mean these?”, and I say, “Yes,’
click on the top. And for the top,
we’re going to do 120 pixels. Remember, semi colon ‘;’ at the end… and the last one is going to be Padding,
and I’m going to do ‘Left’. And I want it away from the left,
about 60 pixels. Let’s hit ‘Save’. And ‘Save All’. Let’s jump into a browser, and check it up. Awesome, huh! So that’s basically it. We’ve dumped in our HTML,
which is our H1… and then we’ve spent
a lot of time in CSS… styling it, getting it
looking how we want… but now is the time to look at
what responsive design does. Now, responsiveness is an umbrella term
used to describe… some things we do in Code to make it
adjust for different screen sizes. One of those things we do in Code… and probably the main one
is something called a Media Query. Now, what a Media Query is,
think of it as a trigger. It only gets set off when
a screen size is activated. So let’s have a look at
something I’ve made earlier. So this is what we’re going to create,
something called a Media Query. And it just says, trigger this H1 when
the screen size is 768 pixels or less… but if it’s bigger than that, don’t worry
about it, ignore the stuff. So that’s what it is, it’s a trigger. Only gets activated when the screen
is a specific width. You can see down here,
there’s a Mobile version as well. Trigger this H1 only if it’s
400 pixels or less. So let’s go create that now
in our version. Where does it go? We’re going
to put it underneath our H1. Put in a couple of ‘return’s. And this is the hardest bit of syntax
you’re going to write, I promise. It’s not that hard, but we have to type
it in, follow me verbatim. There’s the ‘@’ symbol, and we’re
going to type in ‘Media’. Then after that, we’re going to
type in a set of brackets ‘( )’. Inside those brackets, we’re going to
type in ‘max-width’. We need to put a colon ‘:’ in next,
make sure it’s a colon, not a semicolon. And now we need to decide how big
our Tablet’s going to be. Now you can pick any size here. A really common tablet size,
or an iPad size is 768 pixels wide. We’re just saying this Media Query
here is going to be for Tablet… and that’s what it gets the size at. Now as time goes by,
this default will change… and you’ll find different sites… use slightly different
pixel widths for Tablet… but it’s a really common size,
so use that for the moment… but know that it’s not an absolute rule. Last thing we need to do,
after this last bracket here… is put in a curly brace. So we add a curly brace… and put in a return,
that is a Media Query. Now I guess it’s a bit hard, there’s
a lot of syntax that goes into that… but what you can do in future
is just copy and paste it… like I do, and do all other jobs. Now, what goes inside
this Media Query? Anything you want to do,
but only be triggered on Tablet… what I’d like to do is
change the font size. If you can see here, my version… it goes from left aligned,
and quite a big font size… down to this smaller size, and centered… so that’s what I want to do,
when the width gets down to Tablet… I want you to change this H1… just change the size and the positioning. Don’t want you to change the color,
the color’s fine, so we’ll leave that. Just the size and the positioning,
so let’s go look at that in CSS. So all you need is, as long as
it’s between these two curly braces… just here, we’re going to type in ‘H1’. And just like we did above here… we need to put in our curly braces,
put a return in. And now we’re going to go and Style it. I’d like to say something like,
Font Size… I’d like it to be down at 40 pixels. Remember, semi colon ‘;’ at the end. Make sure the syntax is right… you’ve got curly braces
either side of it… you’ve got a colon there,
and a semicolon there. Let’s see if it works.
Let’s hit ‘Save’. Let’s prepare ourselves… because we’re about to enter
an uncharted responsive territory… may be, for you. So let’s go check it out
in a browser. And the way to test is, we’re looking
at Desktop view here, it’s quite wide… but when we get down to 768 pixels… where that is? just keep dragging
till you figure it out. Watch this, come down. Looking at this font, I’m pointing at it,
you can’t see me pointing. Look at that. That my friends, is all
Responsive Web Design is. There’s other things, but that
is the main core part of it. It’s that Media Queries trigger
at certain widths… that goes and changes your CSS,
your HTML is exactly the same. The text doesn’t change,
just changing the CSS for it. And that gets triggered
with our Media Query. Well done, you. I hope you’re excited… I remember, when I first figured
this out, I was pretty excited. So let’s go and do a few other things. So jump back into Dreamweaver. What I’d like to do also is,
remember, we had to do a few things… we had to do a Text Align. So, in Code it is ‘text-align’,
there it is at the top there. And I’m going to click ‘Center’. You can see, this is the nice thing
about Dreamweaver. I don’t have to type it in,
or remember the syntax… I can just click on this… and all I have to remember to do… What’s the last thing that goes
at the end of all these lines… that everyone forgets? Semicolon ‘;’. Awesome! Hit ‘Save’, ‘Save All’, preview. Now it’s centering. It’s kind of centering, it’s kind of
flopped on, and centerish. It’s because up in H1 here… this H1 is the one that gets
triggered for my Tablet… but this H1 at the top here is telling it
to do Padding Left of 60 pixels. So it’s using that as well. So it’s got centered,
plus the 60 pixels on the side. So we can override that,
say actually, I don’t want that. So Padding Left, I would
like to be 0 pixels, please. Semicolon ‘;’ at the end,
‘Save’, check it out, now we’re good. Awesome! So it’s centered,
it’s a new font size. Drag it out, be impressed. So now we’re going to go and do
one more Media Query for Mobile… because nothing much changes,
except the font size gets smaller… so that’s what we have to do. So let’s jump into Dreamweaver. So inside of Dreamweaver, we could
type all this out again… or we can just be lazy, and select it all. Media Query, including
the last curly brace. People forget that all
the time, go to ‘Copy’. Or ‘Edit’, ‘Copy’. I’m going to put a couple of ‘return’s
in under here, and hit ‘Paste’. And what I want to do is, couple of things. One is, I want to change
this maximum width. I want to change it from 768 for Tablet… to a real generic Mobile size,
which is 400 pixels. This changes quite a bit as well. There’s so many different
mobile phone sizes… that I find 400 is a really good
kind of cover up for them all. I think the new iPhones
are 375 pixels wide… but some of the bigger LG, Samsung phones
are a bit wider. So I just make it a little bit bigger
just to cover all those phones. What do I need Left?
I don’t need Padding left… and I don’t need Text Align. All I wanted to do is
change the font size… so I’m deleting all of it, except… I want to change you
down to 20 pixels. Let’s hit ‘Save’, let’s check
in the browser. Desktop. Tablet. Mobile. It’s probably a little bit small. Let’s say 28 pixels, I think
that’s what I wanted. A little bit bigger. So that is our Media Queries
for all of our different sizes. We’re just doing three in this class
to keep it simple… and often for smaller websites,
that’s all I’ll do. Some websites go a bit harder,
they describe seven different sizes. So they have seven different
Media Queries, it’s up to you. I like to stick to just the basics,
Desktop, Tablet, and Mobile. One thing we’ll do in CSS,
and before we go on is… we’ll add some CSS commenting. All this means is that–
I know because I just made this… what this thing does,
and what this guy does here… but I’d like to add some notes to myself… to my future self of Dan, to say… just so I remember what these things do. So, with your cursor just in front of… ‘@media’ query for this
one here, the 768… is I’m going to, on the
left hand side here… click and hold down the one
that says ‘Apply Comment’. That is a comment in CSS, click on it. Nothing much happens… you can see, there’s a forward slash ‘/’
and two asterisks ‘**’… but inside of here, if I
type in ‘Tablet’… this just means, this gets
ignored by the browser… nobody sees it, it’s just there for humans. It’s for other web designers… it’s for yourself in the future,
to know what you’re talking about. I’m going to copy it, use it down here… and I’m going to call this one ‘Mobile’. So let’s go to ‘File’, ‘Save All’. Check if it’s working in the browser.
If yours isn’t… and yours isn’t going down to Tablet,
then down to Mobile sizes for this H1… you can just hit the ‘Reset’ button. So let’s all do that. You don’t have to. If yours is working, carry on,
I’m going to do it. So you can close down ‘index1’, and go up
to ‘index3’. Click on that one there. Preview in a browser. And it should look exactly how we
had it a second ago. Nice! So if yours goes horribly wrong… open this one up here, and we’ll reset,
and go back to this part here. So the next part of our
responsive umbrella… we’ve looked at Media Queries,
that’s considered Responsiveness. Another one is Responsive images. And all it means is, if I check out
one of my final examples here… it means, when I re-size the browser,
or it goes to different devices… the images actually re-size
to the best for it. You can see, this background
moves here at the top… and all these bottom ones kind of re-size
as well to best fit the space provided. So, we’re going to look at
this background image first… then we’ll look at these
images down the bottom here. They’re both slightly different
in the way we approach it. So, jump back into Dreamweaver,
open up our ‘Styles’… and what we’re looking for
is the Hero Box. That’s the big box that I’ve got here. Let’s look at the one we’re working on. You can see, that’s the big pink box
that I’ve already created for us. And all I did is, I gave it a height,
and a background color of pink. What I’d also like to do to it
is give it a background. So I’m typing in ‘background’, you can
go down here to ‘background-image’. What I meant to do now, is use ‘url’,
hit ‘return’. This is the long way, images,
I started typing ‘im’. This is really handy,
this pre-filling out stuff. Especially when you get down to here,
when you get to pick these images. And you get to hover above them,
and it will preview them for you. There’s even a quicker way
that Dreamweaver uses. So I’m going to undo all of that. Up to you, you can
type it in that long way. There’s some really good code ??. And in this case, it’s ‘bgi’,
so ‘background-image’. And all I need to do is,
instead of hitting return… or clicking one of those options… is just hit ‘Tab’ on my keyboard. It filled our background image, colon ‘;’,
added the URL that I needed. And I’m ready to start typing. If you’re new you might be typing out
the full thing just to get used to it… but once you get going… typing out the whole word
‘background-image’, and the url… remembering it as well can be tough. so just type in ‘bgi’, and hit ‘Tab’. What we want to do is… I want to grab my Image from my
images folder, so I typed in ‘i’. Thank you, Dreamweaver. And it just looks at my images folder,
and see the images that I’ve got. And I want this one called
Background Image. Hover above it, and that’s
the one I want in the background. It even added the semicolon at the end. So I’m going to save it, and check
it in a browser, it’s not going to work. It’s there, but it’s not responsive. I want it to be all stretchy,
and fill the background. We’ll do that by using a CSS property… and it’s a CSS3 property. When people talk about HTML5 and CSS3… what they really mean is just
some of the newer things… we can do in CSS that we
couldn’t do before. Before this there was HTML4 and CSS2. So it’s just a newer version, but it does
sound quite fancy and intimidating… but really they’re just
new things like this. So one of the newer
CSS features is Background… and I want the one called
‘background-size’, there he is there. And there’s an option called ‘cover’,
that’s a really cool new CSS3 feature. Add the semi colon ‘;’ at the end,
hit ‘Save’, check in the browser. Now we’re talking,
now it’s all responsive… and kind of fills the space provided… gets all stretchy… and it’s that CSS3 feature
called ‘cover’ and ‘background size’. So we’ve unveiled one of the secrets
of new modern Web Design. And it’s this thing called CSS3. You see it in lots of parts, but really
it’s just some new things we get to do… that we couldn’t do before
in the older version of CSS. Now if that went horribly wrong,
and yours doesn’t work – I’m going to save and close that one. – open up ‘index4’… and that should get you back
to the exact same spot. Just as a little rest,
check in the browser. And yes, it’s working perfectly. If yours is working fine,
you don’t need to reset… just carry on with your index1
throughout the course. If you do get lost, you can follow me
with these little resets. So next thing I want to do
is build out– we’ve got this kind of top part going… I want to build out these smaller
image group down the bottom here. So we’re going to have to put in a box
for these images to go into. So let’s have a look in Dreamweaver. These boxes are generally called Divs. We’ve got a Div already, there’s one
called Div hero-box. That’s the thing that was pink, but now
has the stretchy image background. So we’re going to have to create
one of these for ourselves. So underneath our hero-box,
put a ‘return’ in… and we’re going to type in a Div. So we go angle bracket,
and we type in Div, ‘‘… and then open our last angle bracket ‘