How to create a responsive hero box for our website in Dreamweaver.

This lesson is exclusive to members

Course contents

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

38 lessons / 4 hours

Overview

Hi there, my name is Dan and together we’re going to build a portfolio website using Adobe Dreamweaver.

We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.

I am an Adobe Certified Instructor and better yet I work closely with Adobe themselves to develop their own online help videos. I am also a Dreamweaver speaker at the huge Adobe Max conference in Las Vegas 2017. I’m even inside your version of Dreamweaver right now... go on try it... open Dreamweaver > Go to Help > quick tutorial - I’m right there!This course is for beginners. You do not need any previous knowledge in Dreamweaver or web design experience. We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends down here in the code as well.

In this series we will take this static design from either Illustrator or Photoshop and together, step by step, build everything in HTML, CSS & Javascript. We will make our own navigation. We will make adjustments so that everything looks great on different mobile devices.We will work with beautiful fonts & colours & even add Google Analytics to our site to get amazing information about exactly who visits your site.
 Now web design can sometimes be tricky so I am here to help - just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.

Check out this link here www.byolisawesome.com, for the site we build together. Let's get excited about finally being able to build a website like a professional web designer. See you in class.


What are the requirements?

  • You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
  • No previous web design skills are needed.
  • No previous Dreamweaver skills are needed.

What am I going to get from this course?

  • 39 lectures 3+ hours of well-structured content!
  • You'll learn to build a responsive portfolio website from scratch.
  • Learn how to take a design from Illustrator & create a professional website.
  • How to use templates in Dreamweaver.
  • Create mobile, tablet & desktop versions of the website.
  • Build our own custom responsive navigation with burger menu.
  • Introduction to Javascript & jQuery.
  • How to publish your website to the internet.
  • Ways to preview your designs straight to your mobile device.
  • How to get the most from your portfolio Images.
  • How to use beautiful web fonts in your designs.
  • You will get the finished files so you never fall behind.
  • Downloadable exercise files & cheat sheet.
  • Forum support from me and the rest of the BYOL crew.
  • All the techniques used by professional website designers.

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 approx 4 hours + your 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

Download Exercise Files

Transcript

Hi there, in this video we're going to start our Responsive Hero Box. That's inside of our Template. You might be looking, and going, "I can only see two things." And yes, we only create two things in this one but there's a bit of underlined structure that we need to create, we need to create a Hero Content Box. And we're going to create some re-usable floating Classes. All sorts of other awesomeness. So, let's go and do that now.

So, I've got my index.html open. So I'm going to start filling out my page. This is connected to the Template, so you can see all the stuff's grayed out. And I can work inside this Main Tag here. It's really easy, just click inside anywhere. And that's the only editable box on this page. So I'm going to put in-- we're going to be working on this part here. It's going to be called the Hero Content. We've got this Hero Image in the background so we don't need to worry about him. We've done him in an earlier tutorial. We just need to worry about this stuff in here. And it's going to be universal. So it's going to be on this page here. And it's going to update the text depending on what kind of page it is.

So we're going to start by putting in our Hero Content Div Tag. And then we'll start putting in the Images and Text, so let's get started. So with this selected, I'm going to go to 'Insert', we're going to insert a Div. I want to Nest it inside. And I'm going to leave it for the moment. I'm going to create a CSS Style. It's going to be in 'styles.css', it's going to be a 'Global' one. And the 'Selector' is going to be a 'Class', remember the full stop '.' at the beginning. This one's going to be called 'hero-content'.

And what is it going to do? It's not going to do a whole lot. It's going to, you can see here it's kind of pushed off from the top, and away from the left. I've already measured it. So I'm going to do a Margin at the top here of 83 pixels, and on this left hand side here, 100 pixels. And hopefully, if I save all-- nothing happens. Why has it not happened? It's because I haven't applied it yet. So, I created it, so I've created the Class, and the Div, but I haven't connected them up. I'm going to do that here. This one's actually called 'hero-content'. Nice! I push this down, and push this off. Lovely!

Next thing I want to do is, with my 'hero-content' selected I'm going to insert that Image. I'm going to Nest it inside. Thank you, I'm going to go to my 'Exercise Files', 'Images', and find down the bottom here, called 'tick'. It's not in the right place. "Copy it across?" "Yes, please." Let's go to 'Images', thank you very much. Hit 'Save'. Nice! Whenever you put in an Image make sure that you put in the Alt Text, which is going to be something keyword friendly without stuffing your website full of keywords, I guess. So this is going to be 'freelance web design available'. Running out of good keyword thinking things. Anyway, the link, this one's not going to have a link, this is not going to go anywhere. So, click off, click the 'Hamburger Menu'.

The next thing we're going to do is put in some Text. Now you're kind of-- you could start using this place holder text that's in here but it's going to give us some drama. It's better to use p-tags, rather than-- see this text here has no kind of tag around it. So it's better to work with a p-tag. So, click on this Image, I'm going to insert 'HTML'. Now I'm to go down here to find p-tag. I'm not going to go down there, there it is there. And I'll get it to be just after. So inside this p-tag, click it, goes on around the outside, and actually just kind of copy and paste the text from here. Now this text down here is no longer that useful. So I'm going to select all of that, and delete it. It was the place holder text for that original Div. Delete all the text.

Now remember, there's a non-breaking space that gets selected there to keep the Tag open, I don't need that. So, they are stacking underneath each other. So we'll Style the color in a second because it's black and it gets hard to see. But you can see, by default, they want to stack on top of each other. That happens all the time. Now we're going to fix that like we did down the bottom here for the Footer. Our Footer, remember, we float it left and right. Now we did do, down the bottom there is, we had some specific Tags to use, so we had like Social Icons and our Copyright, and we floated those Tags to the left and right. Problem is that we have to do that again now, and you're like, "Ugh." Wouldn't it be nice to create like a universal tag that we could apply to this p-tag? Because you can add more than one Class.

So this Image here, I'd like to apply a float left Class and this one, a float right one. So we're going to create that as a re-usable thing rather than coding it hard into these Classes. Which was fine, but not very re-usable. So, let's create a Class first, so we're going to go to 'CSS Designer'. Make sure, we're on 'All', 'css styles', make sure you're in 'Global'. 'Selector', I'm going to call this one '.float-left'. And his job is going to be, floating left. And then we're going to create another one called 'float-right'. And he's going to float right, that's going to be his job. So now we just need to apply it, so I'm going to grab the 'tick' here, we're going to say, you, my friend-- where is he? That one there. You, my friend, we're going to click on '+', and we're going to say 'float'. You can see, it's just a little easier now, we get to re-use this thing to the left. This thing kind of squidges up underneath it but it's kind of a bit trapped, so we need to say—

Now, if you're watching, you might be like "Why would he float it right? I have no idea. I don't want it floating right, I want that universal tag. So I'm going to leave it there, but that is totally my fault. What I actually want is for them both to float left. The nice thing about that is, if they float left they'll bang up next to each other, side by side, and you can see, what happens is, if you float them both left, they sit side by side if you just float one, the other one just tries to sneak in underneath and it causes lots of problems. So make sure you float them both left and right.

Next thing I want to do is I want to Style this Text here. Now I could probably make a Compound Selector and say, p-tags that are inside Hero Box-- let's look at the design. I might use p-tags again, definitely on this one here. This is where you run into problems, you'll be all clever, and you'd be like "Oh, I won't make a new Class with this because there was only one p-tag here," but then later in the design, you go "There's going to be two different p-tags" and we need a bit more specificity. So what we're going to do is, we're going to create a Class. Let's click 'Styles', 'Global', 'Selector', and let's put in a full stop '.', let's put in 'availability'. And we're going to do a couple of things. We're going to steal the color from Illustrator. So, with the text selected, we could use our 'Window', 'CSS Properties'. I don't know why I've gone this way. It's another way to look at. Let's double click the color. Copy it. Back into Dreamweaver, and I want my 'Text', 'color' for this one here to be 'Hex', '#', and that, hit 'return'. And let's apply it. So, over here in my p-tag, it's just going to have 'float-left'. But we're also going to have, we're going to add another one called '.availability'. You can have another one tag applied.

Next thing I'm going to do is play around with the Margins because it's not really sitting correctly. So what we're going to do is go to this first one, go to 'Margins' now, and this one here is going to be 7. You'll notice it kind of went up. 7 from the top, by default, it's aligning down on the baseline there. Sometimes you'll play around, and you'll go "Yes, 7 from the top makes sense." But then it kind of goes up like it did there, don't worry about it. Left on this side, we’re going to do 15. I measured these from Illustrator as well. So, we're getting there. Save it, let's just preview in the browser.

Double check, it's all working, and looking nice. Let's go and put in this 'H1' which is this big chunk here, so I'm just going to grab the Text while I'm here. And let's put that in. And actually before we go on, we'll just cut this video here because we're going to look at clearing the float, and I want to turn that into a separate video because you'll probably have to come back to that one to do it later on, because clearing the float is easy to understand but hard to remember the syntax. So we'll keep that as a nice little bundled video in the next one. Let's go do that.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024