 Hey everybody, welcome back to the channel. Today we're going to be doing something a little bit different again, hopefully more successfully than my video yesterday. So yesterday I was working on Xmonad and it was a complete utter failure. You should definitely watch that video if you want to see utter entertainment. I mean, literally for 20 minutes I sat there and was trying to figure out how to get SXHKD working again in an auto start file and it was all because I forgot to, you know, start SXHKD. It was horrible. So hopefully today's better. So today I'm going to be trying to create my own Firefox start page. Now for a long time I've just been using others. So let's go ahead and jump over into the main page here so you can see what I have right now. This is just somebody that I grabbed off and read it. It's cool. It's cool. It's a little buggy, but it's cool. I want to do something like this, but I'm not HTML or CSS with by any stretch of imagination. So like with a lot of these videos, I will say this right up front, this is not a tutorial. If you are here for a, hey, this is how you do something and it's for sure going to work. You should find someone else to watch because that is not what this is. This is a, I don't know what I'm doing. You probably don't know what you're doing. Maybe we can learn how to do this together kind of video. And I like doing those because I am not a expert on anything and I like to learn things. So the first task we're going to do is I want to show you what I want to do, what I want to look like. Let's see here if I can find it. I mean a second here. Let's move this over to this here and we can close this by just something simple. I'm not looking for anything extravagant. Like what I have right now, just something that has a few categories, some links in a search box to DuckDuck to go. Whether or not I'll be able to do the search box, probably not in this video. That's going to take some learning how to do, I'm assuming JavaScript or something. I'm actually completely, I may end up having to pull somebody else's out and just paste it into mine. That's maybe possible, but anyways, this is what kind of what I want to do. This should be fairly easy. Set the background, set some H1 tags and then style them with some CSS and some fonts and then some links. That's literally all it is. The hardest part is going to be getting them, oops, is going to be getting the links and stuff to line up horizontally. I'm not sure how to do that in CSS. I'm sure it's astonishingly easy. Probably one of the first things you learn, but I mean I've learned nothing, so oops, wrong. I'm in I3 today and I've forgotten all my keybinding, so you're going to have to deal with that for a little while. So if I do this, yeah, all right, we'll get rid of that. The first thing we're going to do is open up a terminal and we'll zoom in so we can actually see. I always forget to zoom in so people can actually see this stuff. I remember it this time. So my start page is hosted on GitHub and it's a GitHub page and then I just have a plugin that is called, we're going to go and see what the extensions manage. It is called NewTabOverride. I will try to put this in the description if I remember. It just works. You just open up this thing and the settings or whatever, you put in the link to whatever page you want to open on a new tab and it's easy. So that's all that is. As for how to set up a GitHub page, I'm going to leave you to Google how to do that if you don't know how. That's all I did. It was really simple. GitHub has a very good tutorial on how to do it and you can see this is just the URL of my startup, mtwb47, which is my GitHub username.github.io, that's literally all it is. If you want to, with a GitHub page, you can actually forward this to an actual domain that you own if you have a domain of your own, which is cool. Anyways, the first thing we need to do is CD into my, where that's located on my computer, which is in documents, pages, mtwbdocs, and as you can see, that's literally all there is to it. And we're going to remove all that stuff, so remove-rassets and 128.png, index.html. And we're empty. Okay. So the next thing we want to do is create an index.html, make a touch, index.html. And that is, then we want to vimindex.html, okay. So basically, this is going to be a painful thing on how to, how Matt learns how to do CSS. So on my other monitor, I'm going to get some tutorials up and we're just going to work through this for the next, but maybe half an hour or so. And see how it goes. I'll just talk through myself. So first you have to have a, I do know these things. So we've got a copy and paste, and that gives us our doc page. So then we've got to close that tag, which is, yep, this one here. And we've got to actually start that tag, slash html, yep. Sometimes I don't know that autocomplete. So that's that. And then we need to do a head, head, oh, that's nice, cool. And we need to do a, and then it's just a matter of, so we find my thing here, do h1, h1, okay, and social, okay, and oops, we'll yank this and paste it a couple times and tab over, change word, fanfic, and media, and tools, and just save that. That was fairly easy. And we're going to see into that same one here and get, add, dash, all, get, oops. Get, add, dash, dash, all, get, commit, just page, whatever the matter. And get push, command origin master, and we'll enter my, okay. And that's uploaded to GitHub. Now it usually takes anywhere between three to five minutes or so for that to show up. So we'll look at that here in a minute. So while we're doing that, I will open up a CSS thing and see how to include a CSS sheet. CSS, I'm much more familiar with HTML than I am with CSS. So you'll notice that my CSS is going to be very, very weak. And coming straight from the W3Schools tutorials. So yeah, so external sheets are defined with the link element inside the head section of the HTML page. So it's after head, yeah. Okay, so I don't actually have, so we need to do this body. I always do that. I do know how to use them. I really do. I say this all the time, but I always mess up. Syntax is horrible. It does, but it doesn't matter. Okay, so what we need to do is let's see here. Link, oops, within this row equals style sheet. href equals just style.css, I think. Okay, and then close that out. Okay. And that means in here, we need to do to touch style.css. I guess bigger so that you can actually see. Clear that. And so now we should have a style.css in there. So we can fit them style.css. Okay. So do, do, do. So we have these things here. Now let's go see if if the new tab here is is ready. And we'll see what it looks like. Hi, look at that. There they are. Now we need the next task we have to do is set the, let's set the background next. That should be fairly easy. So let's see. Right. So what we want to do is do in this here, insert body, curly brackets, background, color. And now let's see here. I need to I'm so right now I'm using one dark is my I three thing. And all my window matters are going to be going over to one dark. So that's what we're going to be doing. And I just need to go through it. Let's say one dark color. I can't type with a dam today. It's been a horrible day for typing all around. All right. So the background we want to have is pound two eight two C three four. And we'll write that right that. And then we will open up another one here. Oops. I forget that I'm not in it. I'm not in a dynamic tiling window manager anymore. It's not good. I miss I'm missing DWM. I used to be such a big I three fanboy. And now every time I come back to I three, it's just so tedious. Now that's where it needs to be. OK, so CD documents, pages, all that, get, add all. We don't really need to do all that. It's just easier. Get commit, BG, get push, manager, master. OK. If you hear shouting in the background, that's just my family yelling at real fortune, solving the puzzles. Yeah, you can't help them. You can't have them either. They're mine. Anyways, let's give that a chance to to up, you know, propagate. And we'll do something else. Now we need to learn how to make these. Now we need to learn how to figure out how to make these go in line. So I think the way to do it is to create a div. And I think that's called a CS. So an ID. The selector is with a pound sign. Let's go back to the background to make sure I didn't know. Didn't have to do that. OK. So if I give an ID selector, does this show me the Yeah, so I could give these an ID and I think that would work. And we want to do is an inline block. So compared to display in line, the major difference is that display in line block allows you to set it with the height of the element. OK, so also with display in line block, the top of the page margins, I suppose I could, I can move this over here so you can actually see what I'm reading. So this is what this is what I need here compared to display block. The major difference is that display inline block does not add a line break after the element. So the element can sit next to other elements. The following example shows the difference behavior of display in line display in line block and display block. OK, so let's look and see what this is. So display in line looks like this in line block looks like this display block looks like this. OK, so in line or inline block would both work for me. I think I'm going to use inline block because it gives me more because I need that space underneath. Well, you want to know I don't know because I think inline is actually going to be work better. So the question is then this I really wish I had numbers here. I don't know why I have text if I don't know what how am I supposed to know what number that is? Of course, when I used I through all the time, I just knew anyways, so can I do that display in line with a an ID or does it need to be a div is the question I have. So the class selector selects HTML elements with a specific class attributes. I wish it would tell you what's the difference. You can also specify that only specific HTML elements should be affected by a class. OK, so if I do. I still don't tell you what's the difference. What's the difference between an ID and a class? I think I'm going to use class. So if I do this. Insert oops, class equals. Header dash block, I don't know if that will work. Center to large. We just call it header class header. That would probably work class header. And then we'll do that to all of these. Class equals. Header class equals. Header and class equals header. If this works, that's going to be crazy, because I don't expect it to work because after all my videos the last few times, everything I try has failed. So in here, I need to. Enter insert mode and do so. The class attribute is done by a period. So period. Header. And then. Squirrely, squirrely brackets and we do display. And in line, but just we'll try in line first. OK, and we'll just write that and open another one and CD. I should just let this open, I guess. Get add all, get commit, block, get push. So we can go now and see if the background took. Background did not take. Of course the background didn't take, because why would my life be easy? Why didn't it work? It doesn't make any sense that it didn't work, or does it just not propagate it yet? I'm beginning to realize that I don't know anything and that I should just stop trying, because obviously nothing's working. Why is it working? It should work. Body. That's the way it has it on the I3 school thing is for the backgrounds. It does not have. I'm a freaking dumb ass. Of course it's not going to work, because this isn't reading as a style sheet. All right, moron. OK, what's the difference between that? I appreciate that them added that semicolon, because I forgot that. But my guess here is that it has to, because this is even reading as a style sheet in Vrim. So my guess is that it has to have a, OK, but it won't show me that. I'm obviously being stupid. So I'm using an external style sheet. What does the external style sheet look like? This is, let's get this bag over here so you can actually see. This is dumb. This is what it's saying the style sheet should look like. And that's what my style sheet looks like. It doesn't have any CD loads. I'm going to go look at somebody else's. So yeah, I'm looking at somebody else's on my screen. And it looks exactly like mine. So why isn't it? Wonder if I just use background. Let's see if this is still not showing up. And that in my block thing didn't show up either. That's awesome. OK, let's close this here and move this back over here. And I could probably use my mouse to get to the thing, because I still don't know what workspace that is. I don't understand. We can do this. HTML body, OK. I mean, that's fine. But I don't know why. My guess here is that it's not reading the style sheet, because this link here is not the right way to do it. So maybe docslashstyle.css. And we could just do the whole HTTP colon back slash. Let's look at the mtwb47.github.io. That's not actually the URL though. The URL would be github.com slash docs mtwb47 slash github.com. We'll go find out some more. OK, so it's github.com slash mtwb47 slash mtwb47.github.io slash docs. That's probably still not going to work. That's probably dumb. But we're going to try it. Nothing else to lose. OK, but right. This install nioven does some weird things with the formatting. But you know, whatever. Git, add all. Git, commit, find, git, push. There's no way that works. I'm just telling you this right now. There's no way that that works, because it's not. All right, let's inspect the element. Let's inspect the page here. It's not even reading the CSS at the top. So I'm going to make this bigger here. See if you can see this, it's not even reading that there's a CSS style sheet called in head. Do I even have a header? A head tag? I do. But I have everything here. Oh, this is dumb. I'm so dumb. I bet you that works better. I bet you, oops, wrong one. All right, if that mistake didn't fix things, I don't know. It's going to take a while for that to propagate. That's the hardest part, but doing this on video. It's going to take a little while for this to propagate. I might be able to open it up locally and see if that'll work. .slashindex.html. That's because it's not a script dumbass. That's dumb. Let's open it up in a file manager, like an actual file manager. No, he means pages. I'm on my other screen in Thunar, if you wonder what I'm doing. Seriously, Vivaldi, you're terrible. Why the hell? OK, so even locally, it's not. So let's move Vivaldi over here, and so you can see. This is it local. Local, it's not even showing the page source. So it shows that it's calling the style sheet here. I wonder if I change that style sheet back. If I change the back just to style sheet, because it's in the same directory. Dear Neoven, please, for the love of God, stop adding these extra spaces. You're driving my OCD insane. OK, let's go ahead and open that up again. Ha, ha, ha, ha, this is good. All right, you can't see it yet. Huzzah, ha, ha. Look, inline worked, background worked. And all it took was changing that head tag so it actually closed out like a normal person. And I'm still not sure why Vivaldi is the one that's opening, but who cares? Close all these and just close that and go back to four. I figure out this was four. I'm getting back into I3, I remember. Anyway, so as you saw there, I wasn't up for very long, but there's not a lot of space between these things. So let's, I'm missing DWM right now. Let's close this and good. So what we want to do is put, I'm hating I3 because I'm missing all my key bindings. Anyways, what we need to do here is add some padding between these, so let's look at padding on W3 schools in line with how's padding? Padding, CSS right here. So this padding has, okay, so CSS padding. The CSS padding properties are used to generate space around an element's content inside of any defined borders. Within CSS, you have full control over the padding. There are properties for setting the padding for each side of an element, top, right, bottom, and left. So what we need to do is do padding, colon, and we want to do, just do padding, right, colon, and five, 10 pixels, semicolon, okay, seven. All right, I'm going to go open it up again here locally because that seems to be working, okay, it works. Okay, now we need to figure out how to get it down here. And, okay, so let's see how, first let's find out how long I've been recording. I've been recording for 34 minutes. This is ridiculous. These videos are astonishingly long, but we've made progress. This is real progress. I also have to remember that I actually did hit record, which is a good thing. I've done that many times before. As you know, if you've watched these videos before. So I think this is where I'm going to stop for today. This video is completely too long. And I'm going to just split these into two videos, one for today, one for tomorrow. And tomorrow we'll continue on with these things that you'll get another half an hour video of me actually going through and centering this, adding some links, changing the font. Those are the things that we still need to do left. Anyways, we'll go ahead and switch to the scene here. If you really liked this video, thumbs up. As you can tell, I'm a complete HTML and CSS noob. But I think I did okay. I knew some things, but I just knew the basics and I've forgotten most of it. So that is it for today. If you liked it, thumbs up, thumbs down. Subscribe, hit the bell notification icon in case you want more Linux, open source, coding kind of things from a complete noob who doesn't do tutorials. So I just sit here and do these videos and if you learned something by accident, even if it's what learned what not to do, fantastic. We'll see you tomorrow with the part two of this video. Thanks for watching.