What are PX & EM & REM
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
What are PX & EM & REM
Hi everyone this video, we're going to talk about why you can't use pixels for font sizes anymore. We're going to use REMS and ems and yeah, we'll look at the differences between them, how to calculate them. And in this video I get real self conscious about my accent. I feel like I have a really neutral accent until I start talking about reams and ems your like your you don't have a neutral accent and I feel like I do International man. Side note, do you know if I introduced myself in Ireland and I say my name is dan, they always say hi Dean, yep, I can text messages. Hey dan, I'll see you on the weekend. My name's dan dan. I'm daniel in Ireland, mainly stuff you don't need to know about. Let's get in Reims. Seems pixels. Alright, first up, let's close down what we're up to now. Just we're gonna move this in its own little document because we're going to do a little bit of an experiment. So let's go to file new. I'm gonna save this one and I'm going to call this one font craziness by h...
tml. Now we're going to be dealing with fonts because it gets used quite a bit for those but it's a measurement in general. Okay, you can use it to size boxes, let's add all of our regular doc type stuff down the bottom here, let's throw in a couple of things. Let's throw in two p tags. Okay, put your name in them, duplicate them now. Have we done duplicating before. If not we'll cover it again, You hold down the shift key and then you hold down on a Mac it's the option key on a pc. It's the key and then hit the down arrow. That duplicates the line you're on. Alright so we've got two of them. Let's call this one. What should we call this one? Let's give this one a class. Okay and let's call this one bad size. Okay. And this one here is going to have a class of good size. Alright. So at the top here we're going to style it, you should use an external style sheet but we're going back to old school, we're just gonna style it in the head here just to make it easy. Okay so let's start both of them up until now we've been doing we've been styling them saying bad style, bad bad size. Okay. Is font size Is let's say we want it to be I don't know 30 pixels. Okay. Unfortunately there's a bad size pixels are what's called absolute fonts. K they are the same on all the computers and they can't be changed their like you have to be 30 pixels is absolute font can't mess around with them. What we need is something called a relative font and that's where teams and rams come in. Okay. So let's let's just check what's going on first. Let's prevent browser close it, Make it open again. Alright so we've made him 30 pixels. So instead of using pixels let's do another font and let's do this one is the good size and this one here is going to have the font size of we're gonna use let's say three R. E. M's. Okay. Those are the used rims. There's ems and rims. We'll talk about the difference of two but rims is what we're going to be using and probably the most common contemporary common thing to use. Now let's see what they look like first and then we'll talk about what they are. So saving it proving the browser what I might do for this video is just have it here so that we can all see everything nice. Alright so three rims is bigger than 30 pixels. Why is that a rem or an M. Okay. We they have they're very common. They're very are very similar at least so three M. Or three rem doesn't matter. They are three of whatever the default font size is on the browser. So the browser if I put in a P tag with nothing in it. Okay so a P tag and I put in daniel scott down the bottom here. Okay there's the default font size. Okay I didn't style it. I haven't done anything to it. That is just a size. Okay and it is 16 pixels generally about that. Okay. Different browsers have slightly different looks to their font but google chrome which we're using is 16 pixels. Okay as its default font size. Okay 16 what a rim or an M does is it says I am three times whatever the default is. So three times 16 is all right. I can't do math about as well as I can spell It is so three rings at the moment. Okay, that is 48 pixels high. Why do we do that rather than that? Because we can just type in 48 and it should be the same. Right? 48 Pixels same size. Just type 48 heaps easier. Now, the reason we do this is for people that are that have a hard time seeing the site. Okay. So say that I am visually impaired and I just find that too small. What you know the default font size Way too small. I can go into chrome and say preferences and I can say actually in here I'm going to say I'm going to make it bigger. Okay, I'm gonna make it very large game and because that's what I need. Just what I need to see things, what you'll notice is very large. Let's go and check out our document. Now what ends up happening is this guy got bigger. This guy didn't remember they were the same size. Okay, let's check that settings. Let's put it back down. Medium. Okay, so they're exactly the same size. I've said Ub 48 and you End up being 48 but actually it's more just times in the default whereas I make it bigger. Okay, it gets bigger for me, You can see if I'm visually impaired. That is not good. This is great. Okay, so that's what happens. And that's the reason we, that google really wants to encourage it. Okay, so we'll use this so that people can use our site better. And one of the other reasons is that google will base your site on how accessible it is for people that need kind of some, you know, this extra help. So again, back to rankings if you're building a site you want google to love it so that it ranks you and one of its measurements. Okay. Along with a million others is is your site accessible to the people that need kind of these changes made. So that's why we use rims or teams watch this. If I change this three, uh actually let's go back to our regular size. Normal. Okay. And in here no one in here, the same size. If I change this through from reims or reems, it's not going to change. We'll talk about that next. The difference between reams and reams, but before then you need to get over my accent because reams and reams that probably sounds real bad. I know it's my accent and I know reams and reams sounds weird rims. Ems. There we go. Alright, this is going to be a bit of a brain bender. So let's get started. So let's got those two. Let's just get rid of this P tag here and save it. So it's gone. Okay, so let's say that I have got a P tag down the bottom here. Okay, tap it across. Mm hmm. Okay. And it's going to have a different word in here. It's gonna have pickle just because Okay, so this pickle I would like to give it a class of We've already got some classes I'm going to use let's say bad size, no good size. We don't want to use good bad sizes. So I've got good size so it looks exactly the same as the rest of these. But we know that on our website. We have body tags. But we also we never just have P tags hanging out by themselves, right there also inside containers which are inside main tags which are inside sections. So let's say this guy is inside attack. Okay. So I'm going to put a tag around the outside of him. I'm going to call this tag my box. Okay. And I'm gonna grab the div tag opens there and it closes on the other side. Tab him in. Make it all look pretty cool. We're okay with that. So I've got this guy is inside a div called my box looks the same. Now let's start as my box. My box. Alright folks, here we go. And let's say that's a good size. Bad size. Let's say we're using teams. Okay, so we're using games looks exactly the same. This is where the difference comes. Okay, I want my box though to do some stuff. Ok, It's going to do some things for me. It's going to say I am going to do two innings. So what ends up happening is they end up compounding. So my box is two M's and then good size applies itself as well. So you end up with five ng sort of like compounds up. The difference is if I just use rims so good size now if it's a rim, it ignores the wrapper tags size and just goes and says, I don't care what you do or what the rest of the world is telling me to do. I'm going to go right back to the source So our is route So route. Um, okay. It goes all the way back to the beginning and says, alright, the default still 16. So I'm three times 16. Okay. Whereas if you use ems you can end up with this weird like it's, it's not so complicated at the level we're at now because we don't have a lot going on, especially in this video, but even in our other websites, it's just not that big but when you get to frameworks and wordpress and big, huge things that you're using or trying to edit. It's sometimes you're just like, why are you so big or small? There's all these things going on if you make it a rim, it just says forget all the other things I've been told I'm just going to be three times the default now. Can you just use pixels? You totally can. Okay if you're like, man, that was like Narnia. I went, what is that inception? There's too much information. Things inside things. Rams Ems his crazy accent. You can just use pixels. Your website is not going to explode but we're just trying to be, I'm trying to do two things. One is, you need to be a good web designer. Okay for the visually impaired. And also you're going to run into these rooms and ems later on when you're working with other sites and templates and another useful thing is to know is it useful? It's with what sticks in my head and no, so what is three am say I want to pick a body copy size for this one here and I wanted to be, I don't know. I want it to be 20 pixels. Okay. Because that's what I designed it in, what is it in rims there are calculators online. You can do ends two pixels calculators or rims to pixel calculators. But weirdly my little calculator here, I can say if I wanted to be 20 pixels, I can times that by oh 6 to 5. Okay .06-5 write it down. Post it noted. Okay. And it will give you the rims or ems okay. Same thing. So that is what it's going to be. We'll use the proper ones rims. That is 20 points. Okay. So if I want it to be 48. Okay. I type in times .06-5 Again, three rims but that's probably not going to stick in your head like it has mine. So there are calculators just Google them. They're easy to do know that one is about 16. When I say about 16 different browsers kind of treat The default font size a little differently. You notice how Google didn't say 16 pixels? It said medium. Okay. Used to say pixels, notices medium. Alright. So I'm going to save and close this and we're going to go through and edit our big site now. So close this down. Make this bigger. Open it all up. My explorer. We need index style. Okay. Because we need to go back now and fix the things we did. Okay, so we did our font sizes. So what I'm gonna do is I'm gonna change my default font size from 16. Okay. To be a font size of font size Of, we've already looked at it. It was 1. rims. Okay. You could just put 1.1, like the .25. The extra 25 isn't really changing much. It's up to you, how how cool you are about that type of stuff. Let's have a little look. So all my default font size has gone up a little bit. Let's look at this one here in my XT document, it is 52. Okay, so in here I'm gonna find my H one and I say you, it is not what I want. Okay, I'm going to do what was it? 52. Okay. Remember 52 was so times point oh 6 to 5. Okay, so it's a little bit bigger than three rims. How much do I care about that? .25? Probably not enough to worry about, but let's put it all in dreams. Let's have a little look now and it is the right size save all. It's looking nice. At least it matches my mock up here. Now. One of the other things I just mentioned at the end of this is that when I'm looking at this design here, this font feels really light. Okay. Um, you know, it's displayed differently than it is on my website. Okay, where is my markup disappeared? No, it's over here. You are. So it just renders differently. So that is the right weight. Okay, because I have set up the top here and video visual studio code. Remember up here, I've said Roboto is 300. Okay, so it is displaying the right weight. The trouble is that XD will use roboto 300 differently than your website will. Okay. And the weird thing is is that if I look at this and safari and then on firefox they'll all do it slightly differently. It's kind of it bothers me as a designer and that fonts aren't looking exactly the same across lots of things, I guess that's the big kind of thing you need to let go of if you are coming from more of a traditional design background, that fonts sometimes just You just have to let things go because you can't force the aliasing of fonts. And one thing that kind of reminded me of is that we've only had one size in here, let's say that you do have to, there's 300 and um what is it? 300 and 500 and 700. So you got different sizes. We didn't implement them because we didn't have to. But let's say you do have different sizes that you picked in google fonts in here, you can go through and say actually want the body to use, it's this one here, it's font font weight. Okay. And you say actually I want this to be 600. Okay, and that's it. 600. It'll be a 600 font if you've got multiple options, I didn't have to because I've only got one. But that reminds me All right, let's move on, let's fix up all of this stuff whether we've been ignoring the gaps and spaces between. We'll do some petting space after paragraphs, all that fun stuff in the very next video
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