Addressing CSS Issues

[00:00:00]
>> The next thing to do is to preview this page inside of our web browser and see how things are looking, how they're working, what's blown up, what kinda problems we need to fix. So make sure you have your HTML web page open here to start with. And then what we're going to do is, hopefully, if you've got it installed, you can right-click somewhere and you should have the option to open in a default browser.

[00:00:26]
So if you don't have Open in Default Browser as an option, you can add it. We're going to go to the bottom icon here on the left-hand side, it's called Extensions. If you click on that, you should do a search here for open in browser. And when you do that search for open in browser, you are going to look for the option that is called open in browser and it's put out by TechER.

[00:00:58]
It should look something like this, open in browser version 2 TechER, something like that. And then there should be an Install button or something, and you should just click it and it should just install. Did it work, worked? Okay, awesome. So once it's installed, then you should be able to right-click somewhere and then choose Open in Default Browser.

[00:01:24]
Does everybody have that option now? Perfect, okay. And my default browser is Firefox, so that's how it's gonna look. So here's what we've got going on. So you should have a white nav bar, it's there. [LAUGH] It's just white on white background. You should have your featured project.

[00:01:49]
That's looking pretty good. You should have your other projects, that should be looking okay. Contact me should be okay, the footer at the bottom should be okay. So basically everything except for the very top part of this webpage. Why did the nav bar quote not work? Does anybody have any ideas?

[00:02:14]
Did it really not work? Remember we actually wanted the nav bar to be on top of that comet image, and right now, our nav bar is where? Where is that comet image located in your code, in your HTML? Do you remember?
>> In the intro?
>> Yeah, it's a background for intro.

[00:02:47]
Okay, so let me flatten up my HTML here. So this section with a class of intro has got the image of the comet on it, and then the container is reducing the maximum width of the webpage, right? So what we need to do is we need to take our header here that we put at the very top of our document, header to /header.

[00:03:10]
I'm going to cut and I'm going to paste it inside of the container before Hi, my name is, whatever your name is. So after container before that paragraph with, Hi, my name is, whatever your name is, I'm gonna paste in that whole header right there. Okay, And once you've done that, then you can open in your default browser again, right-click > Open in Default Browser.

[00:03:49]
Woo hoo, did it work? Yay, okay, and now you can test this a little bit if you wanna make this narrower. Test the responsiveness of this. Okay, there's the nav bar adapting. Scroll down the page, take a look at other things, see how they're adapting, make sure all of that is working correctly, and then squash it up a little bit more.

[00:04:18]
Check out your hamburger button. Oops, something going on here, okay? So you can have absolutely perfect code in each one of those code pens. When you reassemble things, sometimes we have a few little things that break like this. And largely, those little things that break are gonna be due to the cascade, the big C in CSS, and inheritance.

[00:04:43]
So somewhere along the way here, we have some white text overriding our green text that was here, and we're gonna need to fix that particular problem. So we'll just kind of remember that. But otherwise, it's looking pretty good. And when we get down super small, however small you can get, things are otherwise looking pretty good.

[00:05:04]
You should be really proud of yourselves, okay? Now, we're ready to add some final tweaks here, and then our web page is gonna be done. So let us do that real quick. Inside of your style sheet, okay, and I'm gonna scroll all the way back up to the top of my style sheet.

[00:05:23]
I'm gonna flatten a bunch of things here. So I'm gonna flatten up my base. Inside of my header, I have here a header style, okay? And to this header style, remember that header is now inside of the intro section that we have there. I am going to add to this a margin-bottom: 6rem.

[00:05:56]
So what this is going to do is that header is now inside of the comet image. And what we have going on at the moment, Is my navigation is all pretty closely squashed into my text here. So by adding the 6rem margin-bottom, it's gonna give me a little bit more height.

[00:06:18]
And when I refresh the page, if I save my files first. This is always the hard part for me, is remembering to save my files. How about you? [LAUGH] It didn't work. Why didn't it work? Yeah, I have to save. How do you know you haven't saved but you've made changes?

[00:06:34]
Does anybody know?
>> That little circle there.
>> That little circle right there, okay? So if you see the little circle, you have a file that is not yet saved in VS Code. That is the number one mistake we all make when working with individual files. So make sure you save your work first and then things work much better.

[00:06:56]
So now when I refresh the page, and I have to refresh the right page. That's the next problem to fix. Now, when I refresh the page, then I have a little bit more breathing room there, that looks a little bit better. Everybody okay? Okay, the other thing is I have a note here that I changed the intro style just a little bit.

[00:07:23]
So if we scroll down to our intro styles, which was a separate layer, right now, I have the background-position on my intro style is 86%, 20%. I have a note here to change that to 10%. For whatever reason I thought that looked better. So let's see if that's true.

[00:07:46]
So for me, it's around line 356 in my CSS, change the background-position to 86% 10%. And let's see if that looks better. Makes the top a little bit more readable, I kinda like it. If you don't like it, you can change those numbers, right? Great thing about CSS.

[00:08:07]
Okay, now the next thing we have going on here is we have some weirdness going on with our navigation items here. So when I roll over Jen Kramer, my avocado meteor here turns green, okay, but Jen Kramer does not. We have projects and about and contact that don't turn green on rollover, but the SVGs for LinkedIn and GitHub, they do.

[00:08:37]
My button here for resume is in white text, not in black text. And when I roll my button over here, the background colour is changing, but it's still white text. And as we've already established, when I make this really small, and I take a look at the mobile version of this, we've lost all of the text here and we have no hover state either.

[00:08:59]
Okay, so generally speaking, when stuff like this happens, this has to do with the cascade, as I mentioned. And it happens to be, if we take a look at our CSS, Right now, I have header first and I have intro second. If I have styles set up inside of intro, right, they could also apply to the header at this point in time, true?

[00:09:33]
So if I have, for example, intro a, color white, that could very easily override some styles that I have up here, like header a, right? Header a hover, change it to green, and certainly down here in the nav, let me get down to the nav, wherever it went.

[00:09:58]
So there are a lot of places in here where we may have some conflicting styles. The simplest solution to this problem that I found was actually to take header, that whole entire layer. I'm just gonna highlight that whole thing, collapse like this, cut and I'm going to paste it right after intro.

[00:10:25]
Okay, so there was a ton of code, but I've just rearranged those two layers. So intro comes first and header come second. And I'm gonna save my style sheet. And then I'm going to go back to Firefox and we'll take a look. And now, I have hover states that work here again, see how easily that fixed all my problems.

[00:10:50]
All I did was just rearrange some things in my code, okay? My button is back to black text again. How awesome is that? Okay, so something to remember is that, and all this styling is back here as well. So something very important to remember is that as you are copying in, especially when you're copying from all these separate code pen files, that sometimes your CSS may, quote, get out of order.

[00:11:20]
If you're coding everything as a single document, that's not going to happen to you. Because when you start adding styles and quote, they don't work, you know there's probably something in the ordering of your style sheet. That is the cascade is being impacted in some way. With this copy paste thing, we don't necessarily know what's going on.

[00:11:41]
So we just have to experiment a little bit. And so this solved all of our problems. So we are almost completely done. Do we have questions at this point in time from anywhere? There's only one thing that we are left missing on this document and I'm gonna walk you through that here in just a moment.

[00:11:59]
>> Why did the behavior change when we brought it into a VS Code?
>> Well, we had always looked at these elements separately.
>> I see.
>> Right? We never saw them together.
>> We never put everything together.
>> Okay.
>> And now we're getting a few conflicts.

[00:12:14]
Yep. That's why we have some other things happening here. Okay.