Making your site responsive

Course contents
SECTION: 2
Building our first mobile friendly web page 21:02
SECTION: 4
Creating the content for our website 41:11
SECTION: 5
Publishing 4:59
SECTION: 6
Conclusion 4:12
SECTION: 7
Cheat sheet & shortcuts 14:54

Questions

0
0
0
0
1
0
0
0
0
0
0
0
0
0
0
0
0
0

Course info

13 lessons / 2 hours

Overview

Do you want to earn more as a designer? Then stop telling everyone you’re ‘a designer, not a coder!’ It’s time you stopped missing out on a huge chunk of the income surrounding web design. If you’re a freelance, it’s time you stopped having to navigate the waters of finding and working with a coder. If you’re on staff, wouldn’t you like to be worth a lot more, and paid accordingly, because you bring more value to the company?

So before you start excusing yourself as a ‘visual’ kind of person, how about using Adobe Dreamweaver 2017 to learn, develop and deploy code within your web designs. You already know a lot about Dreamweaver, so I’d like to show you how to use the other half that you sometimes ignore because it’s hidden from view.

I’m Dan, a very experienced designer and teacher. I know design and code from years of work in the trenches as a freelance. I know how to get you to do it because I’ve spent the last few years teaching people just like you, with no previous knowledge, how to code.

You’ll learn by creating a portfolio website with the layout, graphics and code you need to sell your new skills. Or, finish your own website. To real world standards.

The new Dreamweaver 2017 has been specially redesigned to make code easier to see, easier to work with, and most importantly, easier to understand. And being an Adobe Certified Expert, I know what you can do with the new tools. I know exactly how to get you up to speed with enjoyable hands-on training that shows you how to use code and Dreamweaver 2017 the way they work best. Together.

If you’re a designer working on websites, it’s time you gained the other half of the skills it takes to get your designs online and working properly – without being at the mercy of someone else.

Upskill, take control, and create a lifelong foundation in understanding and creating code. You’ll not only be better as a designer; you’ll be far more valuable to your clients or employers.

It’s time you stopped avoiding half of your potential. It’s time you made yourself more in demand. It’s time you let me teach you code, from a designer’s perspective, with Dreamweaver 2017. Contact me now, and I’ll take you from zero to hero.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2017 or above. A free trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

What am I going to get from this course?

  • 13 lectures 2 Hours 11 minutes of content!

  • You'll learn to build a portfolio website.

  • Download exercise files & cheat sheet.

  • Create mobile, tablet & desktop versions of the website.

  • Build a responsive navigation with burger menu.

  • How to get the most from your portfolio Images.

  • How to use beautiful web fonts in your designs.

  • How to publish your website.

  • How much to charge for your work.

  • How to get paid.

  • Getting up & running your first web job.

  • Forum support from me.

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.

  • NO: This course is NOT suited to people experienced in using HTML & CSS.

Course duration 2 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hey, welcome to this video. Uh, and this one we're going to be learning  what responsive web designers  and how to do it using something called a media query. So what we'd like to do is when the screen adjusts  to different sizes, okay, I'm just gonna drag this  as an example, but what we're trying to do is get it. So when it looks on tablet, it looks like something. And when it's a mobile, it looks different. And when the desktop, it all looks different.

Okay? And that's responsive, okay? It's responding to the screen size. So that's what we are gonna do in this video. So let's jump into Dreamweaver. So in our last video, we just put in some real basic  H one, okay?

In the H TM L, and then we style it in our CSS. Now we need to look at responsiveness. So what we're gonna do is we're gonna do something  called desktop first. Uh, CSS. Now, a lot of people will do mobile first,  so they'll start, um, they'll start styling their mobile,  um, screens first  because it, it can be the hardest screen  to design for 'cause it's so small. And for what we are doing in this course,  and I find what most people do start with.

And what I start with, um, is that I start  with my desktop design  and then I scale it down for my mobile. Um, so it's up to you whether you start designing your  mobile first or desktop first. Just know though that it's sexy to go and do mobile first. People love doing mobile first. Me, I kind of rocked the boat a little bit  by doing desktop first,  but don't worry, it makes no difference to your site  and how it works on mobile or tablet. Okay?

So what we're gonna do is desktop first. It just means that this H one okay is gonna be desktop. And just to make things a little easier,  what we're gonna say is we're gonna put in a comment, okay? The comments are this one here  and this guy here with a slash  and then the asterisk, that's commenting in CSS. Okay? You can see one up there  and it just means anything, uh, anything that I put in, uh,  here, um, is just for people.

It's ignored by the browser. So you can write anything in here just to help yourself. Say you finally crack something  and you wanna leave a note to yourself, um,  you do it in these brackets here  or this little kind of like code snippet here. So what I wanna do is, this is gonna be my desktop  view, okay? And next what I wanna do is I'm gonna copy  and paste that down here. Now returns do meaning thing in code, okay?

This is gonna be my tablet view, okay? So what I wanna do is we're gonna learn how  to switch this out using something called a media query. Now to write in a media query, it's the at symbol,  then you type media, okay? Then you put in brackets,  then you type in max width. Okay? So max width, okay?

Now in terms of media queries,  this is the one thing at the moment that Dreamweaver is, uh,  not super helpful with. It's the only bit of stuff you're gonna have  to write out pretty much all of the syntax for, okay? And, um, this is as hard as it gets. Okay? So, um, if you're following along, you can copy  and paste with the exercise files. You can download those and play  along and just copy and paste it out.

Or like me, you can write it out. Okay? And we're gonna pick our mobile, uh, sorry,  our tablet size now. Now a max width just means we're trying to say what size,  you know, what size should this website change? Um, where, you know, what size is a tablet size. Now the most common at the moment is, uh, 7 6 8 K pixels.

Now that will adjust over time  and some people use some slightly different ones. But that's the most common tablet size at the moment. And then I'm gonna put in curly braces. And so that there is your media query  and it just means that anything inside  of those two curly braces now is going  to be triggered when the browser gets to a width of that. So let's do that. Let's do H one.

Okay? Like we did up above. And  what we're gonna say is don't forget your so H one  brackets return. And what we're gonna do is we're gonna  force the color to change. So we're gonna use color like we did above. I'll use the color picker.

I'm gonna pick green, okay? Don't forget the semicolon at the end. So what's gonna happen now is that,  let's just put some spacing in there  to make it look a little nicer, okay? It just means that desktop view, it's gonna be this color,  but then if the browser happens to be a width of this  or less, okay, it is going to change it to the screen color. Let's go test it out. Let's it safe.

Let's jump to our browser. Okay, here it is. So at desktop view it's red,  but when I get down to, hey, look at that. So at the width of 7, 6, 8, it's gonna switch the color  and that my friends, is how responsive web design has done. Not that hard, huh? Okay.

People get a little freaked out by it. And it just means that at this size do this other thing  and it can be a canal case. We're gonna stack our navigation slightly different. Okay? So we're gonna stack these guys there instead of there. Okay?

And these boxes down the bottom here, instead  of stacking them two by two, um,  or sorry, three by three on desktop. It's gonna be two by two on tablet. Nice. Let's go and do it for mobile as well. Okay? So because we're gonna use all  that stuff again nice and easy.

Okay? So let's go to mobile, mobile  view and the max width for mobile. This one's a bit of a mobile. Phones keep changing. They keep releasing new models of iPhone. And so 400 seems to be really good size.

I find it's really useful. It kind of ties in some  of the bigger phones, the fity ones. Um, and also kind of like real traditional, I think. Um, how big are iPhones at the moment? I think they're 3, 7, 5 or something like that. So I make it just a little bit bigger to cover in some  of the bigger LG Samsung phones.

Okay, so this is, yeah, do 400, it'll be fine. Okay? And what we wanna do is we wanna change the color. So I'm gonna delete all this. If I type in semicolon,  it should gimme my little picker again. Great.

And I'm gonna pick, I'll pick pink or magenta  or purple, whatever this color is. Okay? Remember then semicolon, don't forget him. Save it. Let's jump out to our browser. Wrong browser.

This one here. Okay, so red desktop. You ready? Tablet, green. Dun dun. Here we go.

Pew Mobile. It is a purpley movie color. I'll dispute that color. Okay. And that is responsive web design. Okay, so in here, my CSS,  you can see the nice thing about it.

My HTML is super clean and clear. Okay? There's very little on this page, there's just one new line  that we added, okay? But in our styles, okay, we've done,  it looks quite complicated,  but 'cause you built it with me, right? We are like, actually I know what that does. It's not actually that hard.

Coding isn't as hard as it looks. Okay? So we've got an H one, that's my desktop view. And can you see what's happened here? Um, this flow, okay, this,  it's called a cascading style sheet or a CSS. So it means that this thing here,  say the font family, it flows down.

And because the tablet doesn't argue with it  and the mobile doesn't argue with it,  it stays Gill sends the whole way through, okay? Whether it's mobile, tablet, or desktop. Okay? But color though, there's a bit of a fight going. So what happens is it's desktop  unless this little media query gets triggered  and do that, okay? And then it will flow down to here  and this little media query goes, Hey, I wanna be, uh,  when I get down to mobile size,  I wanna be this green color as well.

Oh, sorry, pinky purpley mo movie color. Okay? So that is a media query. What we need to do now though is switch out our particularly  lame H one and do it with our navigation  where we have though that  nav sandwich and things start working. So let's jump out and start doing that now.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025