Skip to main content

Add HTML5 structure elements

Lesson 17 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Add HTML5 structure elements

Lesson 17 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

17. Add HTML5 structure elements

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final 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

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

Student Work

RELATED ARTICLES

RELATED ARTICLES