Add HTML5 structure elements
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
Add HTML5 structure elements
Alright, let's start actually making the website. So our first project is going to be this restaurant, so we're going to put in the structure for it, the header, the main the nav. Okay. And it's going to look something like this is going to be the kind of main structure that we're building in this video, so hit a Nav main footer. Easy. Let's make it and that's what it looks like and we'll center it as well. That's the job of this video. Let's start coding alright. Depending on how well you've been following along and I'm going to close down everything in here except for going to open up my explorer. I'm in project one. Okay. And I've got index and style open to make sure those are open now in the style CSS let's delete all the code we've got so far and clean it out. Okay. And Salmon here, let's get rid of all of the body so that's nice and clean but if he returns in because crazy and we need lots of space, make sure that your style sheet is linked and the title. You've got a title. Any...
kind of title. What I also want to do before I move on is I'm going to close down the Explorer is I keep meaning to do it in every video but let's do it Now. Let's go to view. Um now I'm probably just gonna do this, we're gonna go to view a parents and see zoom in, you'll see if you want to do it in a sack, which you see all the text got a bit bigger. It's probably to help. May need help the editor from zooming around. You're probably getting dizzy as well going side to side checking CSS and html. So I made the text a bit bigger. You might be the same. You might be like, hmm, I wear glasses and I need to make this stuff bigger so view appearance and you can zoom in. Okay. So you're reset? We're ready to go once you get in the frame of mind, let's say we've, we've woken up. We've got to address, we've got a coffee and we're like, okay, we need to make a website for the city, a restaurant company. We've created our local folder. Okay. Which is called project one and we've created two files, index and CSS we've added our title and that's all we've done. Actually. We've connected the style dot CSS so you ready. Ok. Next thing I want to do is start adding my html five structure tags. Now we're gonna work off a diagram that I've hand drawn for you. Okay? It is in project one on your exercise files and it's called this one wireframe P one A So if you want to have that open on your other screen, like I am going to put it over there. Okay. Just to kind of work out the sizes and the colors and stuff. You don't need it. I do it anyway. Alright. So we're going to need our first one and the first one is hitter. Okay, so instead of writing div equals header, we're gonna ride. I actually don't even need the angle brackets anymore. Remember we're using new tricks so we're gonna type header. There it is there. Cool. Put a return in so there's a bit of space because I like space between the tags and now we're gonna style it over here in my CSS. The difference between what we're doing now and what we did before is we put when we write a class. Okay, we have to put what's the what's the thing that goes into the front of that period or full stop? Okay then we write header, but this isn't a class, you know, it's a class because remember we're right over here equals class. It's very clear when it's not a class, it's just a plain old tag. Okay, there's no class in front of it, We don't have to put that period so you only put that dot, if it's a class, this one we don't have to head up awesome. Then we put in our curly braces and we're gonna style it now, like before we're going to kind of open hours out to be a clear box, but often you wouldn't give it a background color in our height. Like we are in that kind of diagram that I showed you because you let the logo and all the text kind of fill the gap but we'll put the structure in first. Then we'll delete things like the height and the background color. Alright, so first up hitter you my friend get a background hyphen color. There you are. We're gonna use blue for this one. We're gonna have to save and we're going to go and launch our cool little live preview thing. Actually mine's still going from last time. Go live, started back up there it is there and great blue background. Why can't we see it? Because it has no height. So we either put content in it which you'd normally do, but because we're not doing content, we kind of separating this all out into separate videos that we can get our kind of knowledge going first. So we're gonna have a height of 118 pixels. Just that's what I decided for no good reason. Now let's go and preview. Here we go. Now. I'd like to give it a width because stretching all the way across it might be what you want. But for the moment we want it to be nice physical width. So how wide should you make your website? So this part of our course, we'll give it a physical width. So we'll say you know, you need to be a certain width later on we'll get it to adapt or respond. So when we get into a section about responsive design, we'll we'll get it to respond to different sizes but at the moment we're just going to target like a like a standard laptop size. Okay. And basically you're with can be anything it's up to you what you think you know the width should be but you're new so you need some sort of guidance. So often I'll make mine 10 24 pixels wide. That is a really kind of common generic web with Okay, it fits on like laptops by default or about About 1300 across. So 1300. So as long as it's less than that it will fit on most screens, other really common sizes are 9 60. Okay. Gets used quite a bit because it's well look at this later on but it's easily divisible by 12 which doesn't make any sense now but it will later on. It's the columns that we're going to use later on bootstrap which we'll look at later on as well uses 992. It's a framework that will look at but don't worry too much. Okay. It can be mashed keyboard. Okay. It's gonna be pretty small website that one but if I made it 8987 nobody would care. Wouldn't wouldn't break the browser as long as it's smaller than a laptop screen we're going to use 10 24. And the other thing is is you've got to say 10 24. Okay if you're at a web design group meeting and you start talking about 1024. They're going to know that you are a newbie you gotta say 1024. Alright let's save it and let's check it out browser. Cool. 1024 fits on my giant screen and that will fit on smaller screens. It's got a height and its background blue. And the main important thing is we used header instead of naming it a div giving it a class and styling it over here to the next one. A couple spaces I'm going to type in nav so nav return space. Here we go. I'm gonna do the same over here. Remember leaving that curly brace their type of novel. Doesn't need a full stop in front of it. Okay and we're gonna add a background color we're gonna cheat because it's already typed up the top there background colors are you'll get used to that's a really long winter type to get the right suggestion. Hate that one. Just a long group of characters. Anyway so let's check our diagram Where's my little diagram? He's going to be 40 high we'll use the same width. Okay but we use the height of 40 now this happens quite a bit. I do it and I forget to put the P. X. Back in what happens in the browser let's just check didn't appear. Okay save still didn't appear why you can see it because it's blue. Come on dan it's meant to be read it was there the whole time still not there? Ah Come on browser so it's meant to do automatically updating. Why is it not? Oh you know why? Okay, it's because I didn't save this side. I'm hitting command S it's controllers on a PC because I'm getting saved but I'm only in this document out of the habit this morning of hitting command s which saves both sides then it appears Alright, I'll pretend listen that I'm teaching you but really I just messed up. All right, so there's a nav, what else we got to do? We've got This section here which is going to be my main and this is going to be my footer. 400 100. Let's check it out. So over here I'm going to bulk them in. Okay, so I'm going to put in a note, I'm going to put in Maine okay return put some spaces between them so you can see and down the bottom here we're gonna put in footer now I noticed that I was kind of messing around with my cursor so it's all kind of I just put my curse in front of it, tabs it all lines up. You don't have to do that and I put a return in it to look like all the rest of them. All right, so there's my sections over here. Can I cheat paste that in that in? Okay. This one is going to be main. This one is going to be footer so we're doing lots of things one at a time But often when you're working you're going to start and kind of doing this a little bit more bulk kind of doing things so orange. It doesn't have to be the colors like there's some random colors in here. We'll look at kind of more code base colors later on, but I'm just using the ones that are pre filled in. It was 400 and 100, I can't remember. and 100. It is so height 400 And this is getting the right spot down. All right, save all and then go to browser and there we go. That's the kind of core structure and the big thing you're like, I want it centered. Why isn't he centering it. Let's do that one next. So what we can do is we could try and center every single one of these boxes and that would work. But what's really common is to wrap it all up in a div okay or in a container and make that centered so that these guys come along actually it's easier just to show you. So in V. S. Code. Okay, we are going to go in here and say the header. So just send us something. It's kind of weird to center kind of a structural element like this and there's no like make me centered. So it's kind of a trick. That's the way it gets done anyway. So there is so you can put in a margin. Okay, Which is the space around the outside. Okay. But you can put a margin on the left. Okay, I'm gonna click on that one and instead of putting in an actual measurement, you can just type in auto, make sure semi colon goes at the end. So Syntex has to be like that. I'm going to hit save. Okay. And what that does is let's have a little look at the website. Can you see I've done it to the header and it's because the margin is automatic, it just tries to be automatically as much as it can be. And so it just says, well I can be as big, I can be massive. So it goes massive. But to counteract that you say I want a margin on the right to the exact same thing and they battle it out and somehow magically they end up in the middle. So that's how you send the things. So we could do it for this and we could do it for this one as well and you can slowly work your way through it and there wouldn't be any technically problem with that except it just be a bit weird. So I'm going to grab all of this, Get rid of it. Okay, save it. So we're back to here and I'm going to put all of that stuff into a container. Now, there is no container. Um like predefined tags. We have to use our old school div tag. So at the top here. So I wanted to be before the header and I wanted to close just after the footer. So here I'm gonna tear about once and I'm going to say I would like a div with a class of container. Now I'm calling it container. You could call it banana nana. Okay, you can call it anything you like. Some people call it, nobody calls a banana just in case people got a rapper. It might be box. Okay. We're going to call a container for would be a really common one is container. So style that The problem is is it opens here and closes just here so it opens and closes straightaway. I need the ending of this. We did this kind of playing with our div tag box thing earlier on. That's the reason we did it is because I need this. I need to cut it. Okay, grab all little bits, bits and pieces and after foot of finishes I'm going to paste it in. So now if I click on this top one here, it opens their closes. There's they're all wrapped up. Let's tidy it up because it's looking a bit weird. We're going to do this. I've selected all of this. There's a sneaky shortcut to tidying it all up rather than tabbing it all yourself is to right, click it and go to this one that says format selection. Okay. And it just kind of indent everything nicely. The other thing I might do to kind of make this seem a bit nicer is I know I put returns in getting rid of them. Yeah, some trying to clear this up. So it looks nice for you editor. Can you speed this up a little bit and I'll see you guys in a sec. All right, you're back now. You might go that looked painful and it is. But it's kind of how I work. I liked everything to try and be as nice as I can and especially doing tutorials because it's nice to for you to be clear about where everything is and what it does. So it's nice and clear now that that's inside of a container, right? Because it's indented. And so all we need to do down here is we need to say style of container. Okay. And you're like he's doing it wrong and you're like definitely okay, that was an actual test that I set up. Okay, so you have to if you're signing a class, remember the period goes in front and then we can say we paste that. We don't so I've got to do it again. So margin, we do margin left and we're gonna make an auto semi colon. Same thing, margin. Right, auto semi colon save it. And because all of these fellas are inside of the container. They should not work at all. Not a test. Okay. Was it not working? Div class container right left. There are no errors down here. I've saved it all. What's going wrong? I know what it is. Okay. So I've added a width because I'm doing this a bit backwards. I added the width to these internal guys. The container needs a width. Okay. We need to swap them. So you need a width. Not Windows. Windows we need with more flustered. Okay. With 1024. Okay. And these guys can come off well actually they can stay on watch. Let's have a look. Okay, so the container now is with so now the margins no to push out from the sides there. And so we could leave these here. But because by nature Div tags will try and stretch to fill the space provided. And we've said the space provided is container. These guys don't need to be told twice. There we go. Looks exactly the same. Now in terms of the flow here, I want the container to be at the top. Just because later on when I come back into here, I'm looking for kind of when the when the CSS she gets quite long. I'm like, all right. The stuff at the top are the most kind of overriding things. So container and then here that these are I guess lower in the picking order. In terms of the structure for the site. Alright. So that's applying the html tags now in a previous um where is it? This one here? I showed you in wire frames. I made this one called Structure A and I put the knob inside the header. Okay, so we'll do that one first. That would just mean cutting that out alongside, grab this, cutting it out and putting the header inside of this one. Okay, so that would be a way of structuring that kind of design, let's say the other design didn't use main. They use section instead. Okay. Or so section open and close. They'd use that and style section over here but nothing would really change. Okay. I'm using Main because that's just the way that I like to do it and I get confused by sections and articles. Alright, buddies we've got our kind of basic structure for our site with some ugly colors. Let's start adding extra things because we've only done simple text and boxes. We'll start adding proper background colors and we'll start adding images and texts and all sorts of stuff in the upcoming videos. I will see you in a little bit after lunch
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding