 Hey everybody, welcome back to the channel. I'm actually recording this immediately after recording the previous one, so that's the reason why you'll see me looking exactly the same as I did in the previous video. But today we're going to be continuing on creating a Firefox start page, and we got a little bit done in the last video. We got the things created and things experimented on how to get the CSS working. We did some bug fixing because I'm a moron and don't know how to do things in CSS. I'm just learning right at the beginning. I will reiterate that this is not a tutorial. I'm going to make mistakes. I'm going to make not necessarily mistakes. I will make those, but I will also do things in incorrect ways that might work, but probably aren't the most efficient of ways. So this is not a tutorial. This is more of a watch me do things and learn as I go. So you'll learn something kind of video. Where are we left off? This is where what it looks like as of right now. So there's a couple things I want to get done in this video. I want to center these in the middle of the screen. I want to change the color to the color that I want to have them be. I want to put in the links if I can and I want to change the fonts. So the font part is probably going to be the hardest part because you have to include the fonts in the header and then you can call the fonts. It's going to be an interesting thing. I don't know if I'm going to get to that today or not. It might end up being in a part of three of this video, but for sure we're going to get the things centered, change the color so that they're not black on blue and we'll add the links. We'll at least begin to add the links. Alright, so this is where we've started here. I'm still on I3 and I still cannot for the life of me. Remember my key binding, so you'll just have to bear with me. I've been using DWM for the last two weeks and I've completely gotten used to a dynamic window manager and all the key bindings that go along with it. So we'll just let's see. Vim.index.html, okay, so this is the code that we have so far. So we have a class here of these headers. So we should be able to use a center on those. So I'm using the w3schools.com to learn how to do this. So let's see, so the display property justifies how an element is displayed. So a block level element always starts on a new line and takes up a full width available. Okay, so inline elements are spans, A, and images. By none is commonly used in JavaScript to hide or show elements without deleting or recreating them. Okay, so display doesn't work. I'm looking for height and width, I guess, maybe. See the height and width properties are used to set the height and width of an element. That makes sense. So height and width isn't going to help. Maybe padding? So padding would only work if you knew the specific dimensions of the container. So there has to be like a center, like margins maybe? Margin might work. But there has to be like a center, a center property, CSS position. The position property specifies the type of positioning method used in an element. That's not going to be it. Damn. I suppose I could probably put this on screen so you could see what I'm doing. Yeah, let's do that. Okay, so this is what I'm using here. I'm looking for center. Like I want to center something. How? A line, I bet you. Ah. So, let's see here. To horizontally center a block, a block element like div or h1, just use margin auto. Hmm. Okay. Well, we'll try that. Go to four and do margin auto. Okay. That didn't do anything. It might not do, might have to reload it completely. No, that did not work. That still shows this here. Okay. So margin auto did not work. The element will take up the specified width. Um, so we have to put a width there. Okay. So we'll go back here and put width, width. I'm betting that it won't work in a class. I bet you that's, I mean, we're going to try width, but this is not going to work because this is a class and it says it only works in elements like div. So we're going to have to create a div. All right. That's what we're going to do. All right. So just get rid of these because we don't need these and we have to look and see how to create a div. I don't know how to reference a div in a CSS file, so, um, selectors, examples, CSS class selector, universal selector is a star grouping selector. Um, okay. That's not it. Then, um, do, do, do, do, do, these are internalized. That's not going to be it. Syntax maybe. No. Probably search. Combiners. All right. Yeah. Div. Okay. The descent selector, all the following examples selects all the P elements inside the div elements. Hmm. I don't think that's going to, that actually defines the div elements. So let's search here. This is going to show everything that has div. The div tag defines a division or a section of HTML document. The div tag is used as a container for HTML elements, which is then styled with CSH manipulate or manipulate with JavaScript. The div tag is easily styled by using the class or ID attribute. Oh, okay. So that should, that should work. All right. I think I got this thing. I got this. Okay. So we'll delete this one here. And so go over here and insert here. Div. Okay. You're useless slash div. Okay. We want to do a class equals, um, we'll just call this, um, main. It doesn't matter what it's called. Okay. Save that. Okay. And go over here dot main, squirrely brackets, margin auto with, I don't know, 60. I think that's the way it was. Let's go. Um, let's see. There we go. Get away from here. Align. Yeah. With 50%. Okay. So like for 60%. Okay. So that we'll see if that works. All right. So we'll get rid of, we'll go and close this and start up, start it up again. Okay. That kind of worked. It did something. It moved it all over here, but it's kept it at the top. Okay. So that doesn't help me. All right. So, uh, dammit, where's the damn thing? Here it is. All right. Center align text. This. So just text align center. That's just to horizontally center a block on the div, just use margin auto. What if I want to use, so that, and again, it centered within the width. So we just, I wonder if we erased the width and see if that did that. That should, um, we'll just delete this line here. Okay. And we'll try close this and start up again. I did nothing. So it has to have the width. Okay. So if we just make this a hundred percent, I wonder, no, I did nothing. Well, I want to see if, no, a hundred percent does not work. So it has to be less than this has to be less than a hundred percent. Okay. All right. 40%. I know. Now we can just do, uh, yeah, that's closer. That's closer. Um, and we'll have to see how to vertically. How do you, so we want to margin left, margin right auto center and images. Set the number. Why don't we just do that? Okay. Let's try that. But the width has to be there too. So margin right auto margin left auto margin top auto margin bottom auto. Okay. Make this 30%. So that moved it closer to this way. I still didn't move it anywhere down. This is getting a little frustrating. Okay. Left line, left and right line using position. One method for aligning elements is to use position absolute. Absolute position elements are removed from the normal flow and can overlap elements. Using float center vertically using padding. There are many ways to center an element vertically in CSS. A simple solution is to use top padding. I'm vertically centered. Uh, I don't get how that's, that's just going to move it 70 pixels from the top. That's not actually centering the damn thing. To center both vertically and horizontally use padding and text to line center. Let's just copy and paste this damn thing and see if it works. Oops. Oh man. Oops. That is the wrong key one. Okay. So let's delete these. Yeah. Yeah. This is going to give a green border right now. I don't care. I just want that to work. Seven. Okay. So that centered it this way. It didn't really center it in the middle of the page. Cause it just moved 70 pixels down. Like I said it was going to. It did not work. Okay. So we can close that and get rid of some of these things. Uh, center vertically using line height. Another trick is to use the line height property with a value that's equal to the height property. Line height. 200 pixels. Hi. 200 pixels. Center vertically using position and transform. Position relative. Transport that. That's that's done using flex. Just know the flex works is not supported by a tenant earlier versions. I don't care. I'm not never. I'd never use a tenant in my life. You know, again in my life. This play flex justify content center align item center height 200 pixels. Border. That's what you want to find. Let's give that a try. Keep going. Keep pressing the alt key. That didn't absolutely nothing. I mean, it moved it down a little bit, but I want to move it down here. Why is that so hard? How have we not invented a way to center something just right in the middle of the freaking page? Right. All right. So we're going to play with that. We'll just include. So half of a 1080 screen would be 540 pixels. And I just made the whole thing. I mean, it's closer. And honestly, we want to add some more pixels, add more pixels of 940 pixels. There we go. Of course, it leads me to believe that this whole thing is going to be that size. Which means I'm not going to be able to put anything in here because it's going to be going to be below it. That's going to be a pain in the ass. All right. So I got it centered. It's not the way it should be centered. Let's see. It wants you to do it, you know, this way here. If we just use padding and then add that we should be able to put something underneath it. Keep doing this. Going to the wrong one. Four. All right. Let's delete this shit. And we'll add some. This needs to be more than 70 pixels. Make this 304, 570 pixels and we'll delete the board because we don't need the board. That was really hard. That was really hard. And it shouldn't have been hard. But anyways, they're centered. Okay. So now we need to change the color, which should be, which should be, should be simple. So let's go seven here. Okay. And these are the colors that I want to use this one here. Oops. I'm going to move this over to a different monitor so I can see that and go back over here. Header. We want to do. I wonder if just color would work. Color. Pound. E06. C75. That didn't do anything. That actually meant it removed the padding. So color. We're going to go to color. Boodoo do fonts. Font selection. CSS colors. Here we go. Background color. No. CSS text color. Yeah. The way I have it. Color. Oh, you want to know what? I know exactly what's wrong. Got to remember the semicolon. Look at there. All right. Centered. Centered and text changed. Even though I don't really need. Eventually these are going to go up a little bit higher. So the whole last 20 minutes of me trying to figure out how to center these things. You know, complete waste of time. But I should know how to raise these up by lowering, you know, not as many pixels. Okay. So the next thing we want to do. Is. H. So. A. Okay. H ref. Equals. HTTP. Okay. I'm just putting this here. Even though it should be under center. It's under social. It's just good. Facebook. You want to try to just try to make them. Window bigger. Okay. We're going to have to give this a class. And. So we want to do. Let's see. H ref. H ref. H ref. H ref. H ref. So we want to do. Let's see. H ref. I think the class goes before the H ref class. Equals. Link. Okay. Save this. This direction here. Go over here. Dot. Let's see. Link. Okay. And. Squirrely brackets. We want to. So. Link. I think we could do a color. We can at least do the color. Now. Pound. Let me go here. Find what color I want to be. I want it to be. E05. E05. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. E05C. What the hell? Okay, we're gonna make this into its own div here. Div class equal. Okay, so I'm gonna change this to an ID and leave this as a link. Oops, not question mark. Sometimes that autocomplete is not the best thing ever. I'm gonna, like I said, I'm gonna make this an ID instead of a class. ID equals. And go here, change this to the pound sign. Okay, and then we do a dot link. We should be able to do padding five, like five 80 pixels, zero, and then text align. Oops, center. Centerment, save this. Okay, so go here and control R, that didn't work. That didn't work. I don't know why it didn't work. Probably because this has to be a class. All right, let's change this back to a class, and we'll just, class, and we'll change this to a different name. We'll just call this section two. I think I forgot to save it. I think that's the reason why that didn't do the thing wrong. And now it's not appearing at all. Okay, we're winning. We're definitely winning here. And by winning, I mean completely flubbing this up. Section two, class equals section two, link. Let's delete this. Let's just delete this class for now. Just delete it, or delete this div, I mean. And we'll delete this too, okay? And we'll save this, seven, control R, reload. Nope, still not showing up. Okay, and it should. It should, why wouldn't it? Nothing in the errors. This is really weird. Okay, what am I doing wrong? Let's think about it for a second. You know, let's just make this not a class at all. Let's screw it for a second and see where it shows up. It didn't show up at all. Why doesn't it show up at all? Oh, it does, it just shows up down here. That's weird, because it's showing up below these because it's no longer in that div. Some bitch. But a div can be within a div. I'm pretty sure. I'm pretty sure that you can have nested divs. Dives, divs, four. Okay, so you wanna know what? So what we're gonna do is delete this and let's paste this and make a new div. Div, I'm eventually all in auto-complete works. Okay, this has to have its own class. Class equals link, okay? And it's probably not going to work. But we're gonna find out. Seven, cruel R. Well, it moved it up here. It didn't, it's not following the color thing. Maybe the color, border color, color values. Maybe links, but we've had it colored properly before. I don't remember how. So we got it in the right position. Instead of having this have the class link, we'll make this have the class link. That changed the color. Good, now we just need to figure out how to freaking do the positioning. I'm not sure how to do the positioning. And I need to move this over here about what would you say, is that about 100 pixels? 150 pixels? So this div is going to need a class. Class equals LLS, we're just gonna call it LS. Okay, and go over here. Dot LS, squirrely brackets. Padding from the left. I just wanna see if this makes it change 50 pixels. I'm just saying. Chances are that's not gonna make any change. Oops, that actually did work. It moved it that way. So we need to do padding right, 150, 180 pixels, see what works. Changes to 150 pixels and changes to the word right, seven, roll R. I noticed that the color is gone, which is weird. Why did the color go away? We'll worry about that after, so we need to add, that went about halfway, so we make it 300 pixels. Judging pixels is really hard. There are 300 pixels. I'm sure there's a way easier way to do this. Yeah, that's close. Now there may be 10 pixels, close enough. Now we just need to figure out why the color didn't work. Why the color didn't stay? Why didn't the colors stay? What if we added the color to this class instead? Color, pound, E, this one here. Nope, wrong one. E, this one here. Yeah, oops. That's probably not gonna work. That did not work. Nope. Why isn't the color working? Why isn't the color working? That's a little annoying. To be this close to being successful and having it not work. So actually what we need to do is change this class to social, okay? Because all these links here are going to be in the social section. And then we're gonna want another div, okay? And we wanna have this class, class equals fadfick, okay? And we want another div, class equals media, okay? And we want another div, class equals tools. It still doesn't explain the, the, what I'm thinking is move instead of these, instead of these having their own class, or each of these being the same class, we can make these different classes and have them each be the same class as these. The only problem is they have to be different colors. And we know that the class, wait a minute. Hold on a second. Maybe the reason why this doesn't, so we need, now we need to change this to be change word social and delete this. And we'll make a ID of social, color E5, this one here, okay? Give this an ID of social, ID equals social, okay? That was weird. I think selectors, I'm not sure if that requires a so an ID, yeah, it requires quotation marks, okay? So that should work, right? Paragraph one, yeah. ID equals paragraph one. ID equals social, that should work. Okay, save this and save this and go over here and go over here and scroll R, ha-zah, ha-zah, ha-zah. Okay, that is where we're gonna leave the video. This one wasn't quite as long as the other ones. When I went, it wasn't quite as long, I mean it was actually longer than the last one. Oh, time just flies when you're having fun. Anyways, that is it for us this time. I will probably make a third video in this series going through and filling out the rest of the links and then maybe trying to figure out how to put in a search bar. That's gonna be, if you thought I stumbled over just basic CSS, adding a search bar is gonna be way, way worse. That's just gonna have to wait a bit. I'll have to do some research off-air before I do that because I don't wanna go into that completely blind like I did this one. Anyways, thank you for watching. If you enjoyed this video, give it a thumbs up. If not, thumbs down. Make sure you hit the subscribe button if you want more Linux C and open source and now coding content, I suppose this is coding. I mean, they're obviously way better coders than I am. Anyways, if you'd like to hit the subscribe button and get the little notification icon so you don't miss any videos, we just did a podcast, I guess, after this video will have gone up after it. We just did a podcast, so you can make sure you check out the Linuxcast which is an awesome podcast available wherever you get your podcast. And we'll see you next time. Thanks for watching.