Free Dreamweaver CC 2018 Course – Introduction to Responsive Web Design

By | September 6, 2019

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 ‘

100 thoughts on “Free Dreamweaver CC 2018 Course – Introduction to Responsive Web Design

  1. Taevon Thurman Post author

    your the nest so far that I found at breaking this stuff down to me so Ecommerce website please?

  2. RUBY ART Post author

    Hi Dan Scott, I'm Bobby from Indonesia very simple easy to learn tutorial.
    Simple & Easy to understand to the point . It's help me a lot. Thank you for your time and effort.

  3. n0RTh- WoW Post author

    Do you need to open a new index every time you're going to add something new?
    Thx for the GREAT tutorial!

  4. Frank Johnson Post author

    Maybe the most pleasant software tutorial I've watched! Cheers.

  5. Deborah Weidrick Post author

    Literally the best Dreamweaver intro i've watched in awhile! Not to mention a voice to listen to that doesn't make me want to pull my hair out

  6. mc85eu Post author

    I don't have words for how brilliant this video was. I am so grateful.

    I've skipped a few years' web design; so this reminded me of the basics and brought me up to date on media queries.

    Plus, I laughed and laughed at "tickle" (tinker)! Thanks for that, too…

  7. Antonio Valdez Post author

    your voice reminds me of the narrator behind Little Big Planet, makes it easier to learn

  8. Jnswayty Post author

    I love this tutorial! However, I m having trouble in the CSS code for the hero box background image. It tells me expected RBRACE at line 30, col 52. Here is my code:

    .hero-box {
    height: 338px;
    background-color: #1209DF;
    background-image: url(images/Remi Art/john_singing.png);
    background-size: cover;
    margin: 1%;

    The image is also not showing in the hero box. If you can help that would be great! Thank you

  9. Swaron Acharjee Post author

    this is the link if you cant find it:

  10. Ashley Parker Post author

    Hi Dan, I took your Udemy course on XD, and I wanted to know if XD could be translated into Dreamweaver easily? Could I build my prototype in XD and then make it responsive in Dreamweaver?

  11. Sofija Filipovic Post author

    why does the html file of my web page that ive created and like styled in colour open black and white with no formatting when i re open it on dreamweaver and try to preview it on chrome

  12. Aarush Gopal Post author

    Thank you for this fantastic video! It helped me learn everything I needed to!
    I was wondering if you had plans on making a website with a parallax scrolling feature? I want to incorporate that into my website, do you have any tips on how to do that?

  13. Maxim Zyatnin Post author

    awesome tutorial of CSS, very liked it, but what's so special about dreamweaver here, besides its pop-ups?

  14. Stefan Bairac Post author

    Thank you very much! I've really learned a lot from this 🙂

  15. huyen anh pizzabella Post author

    omg this tutorial is awesome, I understood everything

  16. Katharine Lane Post author

    Actual version lastest version lastest working the program required microsoft visual сс is not excluded оthey call a error for starts.This link has a 100% working software

  17. Mohamed Seliem Post author

    can you translate to Arabic plz >>>>> i tray to understand you but it is too difficult>>>>>

  18. Dennis West Post author

    There is a channel that appears to have ripped off your video for their own monetization. Check it out:
    I wish youtube would allow users to alert them to copyright infringements but only you, the content owner, can.

  19. Claudia Okyere-Fosu Post author

    Thanks Dan for making this look easy 😂 really appreciate it and I’ve subscribed today😊

  20. Shadowalker 546 Post author

    sir, please tell me how did made those designs of your website in desktop, tablet and mobile, what are the sizes for it

  21. Email Refrensi Post author

    what is the minimum "still looks good" size for image in web?

  22. Pixel Ranger Studio Post author

    i;ve been using dw for the past 10 years, and honestly, this is still a dumb ass software. still no visual builder, still have to write all the code by hand, who has time for this? I mean there are so many other possibilities out there. Dreamweaver lost me on this one. These softwares improve so slowly….

  23. Rob Navratil Post author

    This is great but I'm having problems linking the images. I've followed all your steps creating the site. but it keeps saying "the folder you have selected is not under the site root. Select a location underneath this folder" Even your pre-made index 4 says image not found. Can you help? thanks

  24. Louda Salama Post author

    Really! Thanks Man!
    You make it look super easy to work in Dreamweaver and to write code.
    I'm a graphic designer, and I made some websites using Adobe Muse. I know Muse is not good writing code but I hate coding. And really now I have no idea what I should do to continue making websites.
    Thanks for the Introduction. Your Video is super. I hope you see my comment and I wish you make more videos.

  25. Haneen al-ghamdi Post author

    How to download free exercise files from the link?????

  26. Will Fraser Post author

    im confused as to how you got the html files from the illustrator document

  27. Ms Grey Post author

    I wish you had taught my web design and development units at uni… thank you!! Your teaching style is fantastic and easy to follow.. 😃

  28. ramzeen.m Post author

    This is such a useless tutorial, the files aren't there mate.

  29. moofymoo Post author

    Dreamweaver is still alive 😮
    I wish FrontPage and HomeSite was still around..

  30. Melinda Sterne Post author

    Such a great, informative, and concise tutorial! Thank you!

  31. Richard Dale Post author

    I prefer to think of media queries in terms of content not devices.

  32. KALEIDO jess Post author

    The responsive media queries are working, but my laptop has a really wide screen, idk if that has anything to do with it but I can’t shrink my box at 400px it seems so I can’t see the difference for anywhere at 400px or lower. In other words, I can’t shrink my browser box.. Has anyone else had this issue ? Also, thanks for this tutorial ! I’m a bit rusty so I’m just brushing up.

  33. mindigi labs Post author

    thx alooooot. without loosing consantration, I watched total tutorial. I began to love dreamwaver.

  34. Clara Cavicchi Post author

    Simply wonderful, very clear and useful. I'm starting to learn HTLM and Dreamweaver and I was able to follow all you tutorial without difficulty. Thanks a lot! Very nice voice also…

  35. Jerika Jones Post author

    This is a fantastic tutorial. Thanks so much for making this.

  36. PhilosoPat Post author

    the only question i have is i see that you have a page open for your website in dreamweaver. but i see you have 2 separate source codes (one for your html and one for your css and you can click back and fourth between the 2. how do you create another tab for css without creating another website? thank you in advance

  37. Kyle LeMaster Post author

    Excellent tutorial! I'm familiar with a wide variety of languages but it has been a little while since I've dived into the nitty gritty of HTML and CSS especially when it comes to responsive design. This tutorial was incredibly clear and I think someone coming in with absolutely no knowledge would have an easy time following along and would learn a lot (while having fun!) Thank you for creating this! Liked and subscribed for sure

  38. Bring Your Own Laptop Post author

    Make sure to subscribe for future videos just like this!

  39. Carlos Beamon Post author

    I like your straight forward casual approach. Bravo!

  40. Madison Simpson Post author

    Watching in 2019 and still up-to-date with the softwares we use in uni. Loved it so much <3

  41. TheUnMarkedOne 1 Post author

    For changing the padding is there specific measurements to use that typically make the website look good or do i have to test to see where i see fit to the website

  42. ReDHeaDSg1 Post author

    Thanks for tutorial but yea … i still hate DW and looking at the code xD Shame that they dropped Muse -.-

  43. Kevin Barreto Post author

    Bro really? Haha don't get me wrong and I do apologize if I cause any hate, not my intention. But why does this software cost money? I seriously want to know. I mean it's just like a regular IDE. Visual Code is free and it does the same exact thing. Please educate me about this software.

  44. rocio pinzon Post author

    Hello, I'm looking at alternative web design tools to Adobe Muse. I have been using this software for a long time.

    I'm thinking about using Dreamweaver. In this video ( ) they talk about the advantages and disadvantages.

    Do you think I could export my Muse files to Dreamweaver?

    Thanks for your time.

  45. RulAlpha Post author

    When you realize you're really going through with building a freaking website

  46. scatty cat Post author

    video looks really good buy yer voice sounds like a spring, cheers anyhooz.

  47. Антон Сутеев Post author

    What can dreamvweaver do , visual code studio can not? What is DW bonuses?

  48. Tony Post author

    Hey I'm having a small problem with my website logo and I was wondering if you can help?

  49. gwe987 Post author

    Excellent tutorial. I found the steps very easy to follow; but more importantly, understandable.

  50. Martin Petrov Post author

    Dude dude dude,you are the dude….wow….realy i wana say to you one big thank you about revealing this media query trigger….and in the ame time im so dissapointed becouse you ae talking too much….i fall aslep nearly 7 times.hahaha

  51. SalesPros Post author

    what about if we mange font colors and sizes and image manipulation in the designer mode? Do we have to edit again i coding ?

  52. Ayesha Post author

    hi.. if we were not to download any exercise files and directly start making the website by putting pictures and text how are we supposed to do that? pleas reply as soon as possible.. thanks..

  53. Connie Blackmon Post author

    oh. you teach web design as well. <3 bless you.

  54. Sollazzoso Spensieratello Post author

    Thank you so much for telling me what my teacher's not good enough at doing!

  55. Muhammad usman Post author

    you write all code already or Dreamweaver itself code it

  56. joansyah adwie Post author

    exercise files is error, could you send it again?

  57. iSpike Post author

    G'day mate. I am your newest subscriber 7:57AM Friday 25th April 2019. I am just getting started and looking very much to learning from you Cheers from Western Australia

  58. ThomasGrillo Post author

    You had me, right up until you started showing code. I need a drag and drop editor, only.

  59. David Rock Post author

    Dreamweaver annoys me and the fees and all that annoys me. One love to MS code for sure

    But the point for my comment, your video was great..i came to it for help to learn @media..and well
    you did just that

    Thank you sir

  60. Sheryl DeMott Post author

    I would like to try designing a webpage using your files but I can't seem to find them as a free download. When I click on the link it wants me to sign up for one of your courses. Can you still get the files?

  61. anonymous 000 Post author

    One of the best online teachers that I've had. Thanks.

  62. Sanchala B Post author

    I have never met/heard anyone teach with such a clear and fun style…even at university! I was put off web/responsive design for a long time but you've just got me so excited about it. Thank you so much!!

  63. Adam Jimenez Post author

    Good stuff!!!! Thank you for taking the time to go through everything!!! Been awhile since I've used Dreamweaver 🙂

  64. 2Fresh Media Post author

    I haven't made a website in like 6 years and ive lost my touch and dreamweaver has grown lol, so I need to start from the beginning, here goes, hope this gets me through a completed website afterwards .


Leave a Reply

Your email address will not be published. Required fields are marked *