How to add structure to your website using Div Tags

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
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.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hi there, this video we're going to build a yellow box, and then a pink box, we'll try to, at least. We're going to learn to do it using something called a Div Tag. It's a division of space, and it gives us the kind of boxes that we get to put a website inside of. All right, let's jump in, and learn. 

To get started let's close down the other documents we've been working on. We're not going to use those again. I'm going to create a new one, just to kind of separate everything, and allow different bits of learning. So, 'File', 'New File'. Let's 'Save' it. Let's call this one 'divtags.html'. Don't forget the HTML. We're going to add all of that Head Tag goodness, by putting exclamation mark '!' Hitting 'Return'. Puts all that junk in. We make sure we update the title. 'Div Tags'. We put in the description, but not at the moment because it's kind of like a throw-away project, just to learn, what a Div Tag is. 

So, the Div Tag goes on the body because I want people to see it. And what do we want it to look like? In your Exercise Files, there's a folder called Wireframes, and this one here called HTML Div 1. I'm going to open that. For no reason, we just, I don't know, I drew it out on my notebook, so I figured I'd show it to you. This is what I do when I'm wireframing. 

So it's not a particularly good or exciting wireframe, right? We want a yellow box and we want a kind of a pinky box underneath. So first box, second box, that's what we're going to make. To add it, we add a tag called Div. I'm going to make some space in here in my Body. I'm going to 'Tab' across for no good reason, other than it looks nice. We're going to put in a Div Tag. 

So Div Tag starts with the angle bracket, Div, close angle bracket, '<Div>' And it's very clever, puts in our closing of that tag. And everything inside of this is going to be in my square. Let's preview what we've made so far, so let's save it. Go to Google Chrome, let's go 'File', let's go to 'Open'. Where is this? 'New', 'Open File', that's what I want. There's my new Div Tag, click 'Open', and, I've got a title but there's nothing appearing on the page. So a Div Tag without any CSS is invisible. It's there, but we haven't styled it. 

So what we need to do is tell it to do some stuff, like the yellow, and give it a size. So we do that with our CSS, we do it in the Head Tag. Remember, before the head closes, I'm going to type in, do you remember what goes up the top here? You remember, Style. And close it off. Put a 'Return' in. I'm going to put all my Styles in here. I'm going to 'Tab' in, just because it looks nice. I'm just using my Tab key. And what we'll do? 

So we need to style for the Div. Remember we had H1 before, so we're going to style this Div. And what goes next? Curly braces, '{ }', perfect. Then let's style it, let's give it a color. Now when you're styling text it's always just referred to as color. When you're trying to do a background color you have to go the full background. There it is there, you can see, background color. What color we're going to use? I'm going to put in yellow. Remember what goes at the end semicolon, save it. Let's preview it in the browser, and, nothing appears because at the moment this Div Tag is yellow, but it has no dimensions. It either needs a height , or it needs some stuff in it. 

So inside this Div, I'm going to 'Tab' across, stuff in it. If I do that, save it, go back to my browser now. At least now, with some text in it, kind of forces that Div Tag open a little smudgy bit, so I can see it. Now it doesn't know how big it is, it's just showing me enough to squeeze the text in. And it's kind of spilling across, so let's give it a height and a width. In here let's just put in a P-tag, rather than just plain old text. So we're going to put in some Body Text, remember, paragraph for P. Let's just put in 'First Box'. 'Save' it. And let's style it. 

So up here, the Div Tag is yellow. I'm going to put a 'Return' afterwards, and let's give it a width and a height. So width, I'm going to give it - what did our little style sheet say - 600 x 400. So we're going to go 600 pixels for the width. Remember, has to have px, and you have to have the semicolon. And the height, the same, it was 400, right? 400, I wrote it, Dan, come on. Now, I've saved this, let's jump into my Google Chrome. Hit 'Refresh', and hey…

So that is my structure, that could be your navigation. Pretty big navigation, but it could be the middle of your website, or your footer. It's a nice big cube that we can start putting things like H1s or P-tags in. Cool, huh. 

Basically your site’s made up of structural bits, these Div Tags, and text elements, and images that go into it, and videos, but the Div Tags are the structure. Now what we want to do is, I want to put in this second box down the bottom here. So in VS code, I'll go to down here, make a second Div. Let's just copy the first one, let's just save some time, 'Copy'. Whenever copying, make sure you grab the opening and the close. It's easy to know where the closing is. If you click on it, kind of highlights it here. Just have your cursor flashing in, like the head here. There is the closing. 

I've got to make sure I've got all of that. Copy it, so I'm just using 'Edit', 'Copy', I'm going to 'Paste' it in. The tabbing is a bit weird, and because I'm a bit OCD about this. I'm going to make it all look nice. So first box, and second box, save it. Let's preview it in a browser. Preview, got a second box; hey. 

The last thing we want to do is we want to make it a color. We want to make it this pink. So, in VS code, I'm going to go up here, and this is where we run into our first problem. We're styling this thing called Tag, an HTML tag, that's Div. The problem with it is that, this Div appears twice but we can only color it once. So we're going to learn in the next video what something called a CSS Class is. It allows us to individually attack this first box rather than the second box, and style them differently, but for the moment we've put in our Div Tag, it's awesome, now we need two different kinds of Div Tags, that have different sizes and different colors, and we'll learn how to do that with a CSS Class in the very next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024