Skip to main content

Box-sizing & Border-box

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

Daniel Walter Scott

Box-sizing & Border-box

Lesson 53 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 2000+ more >

Lesson Info

53. Box-sizing & Border-box

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

Box-sizing & Border-box

Hi everyone. This video is about box sizing and border box and it's magical. Nous Okay, we've got these boxes here. I want to add some padding to the inside to just to line all this stuff up. But when I do that padding added and the boxes got bigger. Okay, you just you add petting and it seems to make the boxes bigger. Weird. So we're gonna add box sizing and border box and magically we've got penning but they didn't get bigger. No more minus ng the petting from the size and width of the boxes. It's magic. Let's work out how to do it now in venus code. So what is this magic box sizing? Border box goodness. Okay. It relates to flex box again. Okay. It's one of its nice little add ons for html five. It's got great browser compatibility. And what it means is we can add petting without breaking our boxes. So you'll notice that we've danced around like we've put padding at the bottom of the P tag to push the bottom down. We added padding to the top of our icon. We added padding to the P. Ta...

g here on the left and the right to keep it away from the edges. Why didn't we just add it to the card itself? Just put a border around the outside. That's easy. All right, because it breaks it. Okay, so what we're gonna do is let's prove the point. Let's go to our card actually let's add a couple of classes do it 11 big go. So let's do card one comma. Card two comma and then card three. Okay so you can do them all in one big go. As long as there's a comma there you'll notice before we did a compound. Where is it this one here? This means these guys have a relationship to each other. Okay. Eight tags inside of cards. Whereas this thing we're making now is this comment and this and that. They're all like separate little things. So commas separate them out. If it was without the commas it would be looking for a card three that is inside of a card to that's inside of a card one which doesn't exist. Okay so we're going to add padding And we're gonna do it all the way around. Just do 20 pixels. Okay save it let's have a little look and it kind of blew out the edges here. Okay. Went too far so it didn't add it to the inside. Weirdly it added to the overall size. If we make it even bigger so we get it up to 50 you'll notice that just goes bananas. Okay they all start pushing into each other and ours is not breaking too badly but So the padding is there 50 pixels but it adds it to the size and that's where border box works. Okay so what we can say is actually add that padding but we're going to do box size box sizing and we're going to use border box and hit save and the good thing about it is it removes it off the wits now. Okay. And it's just a nice easy way to do it. We're going to remove the stuff of the petting, okay. And that we've done okay, also off the P tag, so we'll clean it all up because we just we kind of danced around it for a long time because I feel like you're ready now. Okay, ready for border box. Yeah, just because what you could do is you could go through here and say actually, okay, so we're going to do that and then we're gonna start minus ng off the width. So we're going to say width equals minus, and you can start trying to minus off what you add the padding to and it just does your head in. Okay, So that's what you have to do. So let's fix this. So we've got border box comeback border box, let's first of all get rid of all of the other things we did. So we did under the P tag, we did margin bottom, which we do need that. It's cards bottom. We did. So we did margin around this thing, we still need the margin just above it. Okay, so we'll do margin top, definitely. Okay, margin hyphen top, but we don't need all of the rest of this, what do we use? We used 30 left and right and 20 at the bottom. Okay. And you were like, why don't you just keep doing that way because we didn't get to learn border box. If we do it, just leave it this way and you're going to run into it in code and you're gonna run into that problem of just like, hey let's just put padding around it. Why is it adding to it? The same with that margin? It just adds it to it. But if you want to magically minus the margin or padding off the overall width of the box, use border box. So let's go and do that. Let's find I'm getting a little bit lost now you might be the same. Okay. Border box. So the petting in this case is going to be at the moment. If you just put in one attribute it goes all the way around remember? So the top in this case, what have we put over the I tag so pending top because that's what we put kind of in this topic here. So we're going to do this fella and say the top is going to be, What did I just say 30 Okay, 30 pixels Or G. Pixels. Okay, the left and right. It's going to be 30. Okay, don't use semi colons at the end of them. Okay, so Top right, bottom, I can't even remember now. 20. We'll have a look at it. Don't put that in there and the last one is 30 awesome. So that should work. Let's have a look here we go. If I saved it, I have Nice so it's kind of a backwards way to do it. Right. I just kind of kept this a little bit later on in the course. And so now probably when I first put my cards in, I'd add the padding before I dumped all this stuff into it and just make sure I use border box on those cards. You can use them in individually. So this could be in. I could cut that and put it inside all of the cards. Okay. And I have it in there three times. I've just kind of kept it separate for this video and the better. I'm not sure it's saving much type. But anyway, that makes sense. I hope it did without it. Turn it off. Let's have a look. Okay. The boxes just get its original 30% plus this padding and I could minus it off the 30% but minus thing pixels off percentages is mind blowing. Okay for me at least. So it's better just to add it to it and then turn border box on. All right, job done. High five. I will see you in the next video

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