Plan of Attack

[00:00:00]
>> Kevin Powell: So all of our HTML is in place, we're ready to dive in and start actually coding some stuff up or coding some CSS and getting everything to look more like the actual page looks right now. And as I've been saying as we're going through this, hopefully you've been looking at the design files, you sort of had an idea of how you wanna approach all of these things.

[00:00:19]
And in the next group of lessons, I'm gonna sort of break it down and go through the different stages of things a little bit from the bigger picture and narrowing down. And so if you wanna take some time right now to look through it, cuz one example here is in I did header .p, but this would be our hero area, or whatever is at the top of the page.

[00:00:37]
I could limit the width of what I'm doing up there, just by doing something like this but if we look at the Figma design, as I mentioned earlier. This area here with this narrow text, is the same as this narrow area over here, then we have this area that's a certain width which matches things on other pages talked about containers and wrappers.

[00:00:56]
But even if you are setting things up and just maybe when you wrote your HTML, you put a container or a wrapper in each one of the sections. But how are you gonna make this one narrower than this section, and this one down here wider than this section over here?

[00:01:11]
We know we need columns, but how are we gonna create those columns and before I talk about how I like to do it, I'd like you to think a little bit about how you might start up approaching these things too. Just looking at the layout, you don't have to write any code necessarily right away, but just having an idea of the different things that you think would make it easier, reusable things that you could do in this one area that then you could reuse here and reuse somewhere else.

[00:01:35]
And then if you have some ideas for code that you'd wanna do for that, you can dive in and start trying to style some of that up as well. All right, so we're ready to continue making some progress on this and start getting some CSS together to make the layout start happening, but very quickly before we do that, and we have our plan of attack and all that.

[00:01:52]
So before we dive into that, I think this would be a good time we haven't talked about it in a little while, but I did mention we're gonna do some source control things. So we're not gonna do a big one right now, but since we're gonna start writing some CSS, if you open up the source control panel in VS code, if you initialized your repo before, you should see the changes.

[00:02:09]
In this case, I've changed, made changes to my index and my style sheet, obviously, and because I brought my assets in after all of those assets are showing up here as well. Down here below, there's also the source control thing, we'll talk more about that after, but for now, we'll hide that away.

[00:02:25]
Basically, all we wanna do is put in a message about what we've done. We haven't done a lot right now, but we could have say finished the HTML, something like that to give us a bit of a point on where we are. Could be a good thing if we muck things up and we wanna go back where we sort of are saving our place in the sand here a little bit, or creating like a little mark in history about where we're at.

[00:02:47]
So I'm just gonna hit commit I haven't staged anything, let's hit cancel. You can hit the plus sign next to every one of these to commit them individually, this is if you're doing it like this. If you already know how to use Git with command line, of course you can be doing that as well.

[00:03:01]
There's also the big stage all changes that's right here or if you do commit without making any of them, and you get this message, you can just hit yes, and it's going to commit all of those changes and then save them in that step. But we'll do it this way, where I'll just hit the big plus there, so it's staged those changes now you can see it's switched it from stage changes.

[00:03:21]
And then I can hit commit right there they're now committed locally on my computer, and then if I hit sync changes, it's gonna bring all of those changes up to GitHub as well. And you can see because it's the first time I'm doing that, I do get this message, this action will pull and push commits.

[00:03:37]
So you can hit OK, or in this case, I'm gonna push OK, don't show again, just Just cuz I know what this is doing and I don't want it to pop up every time I do this. So we do that, and just like that, all of those changes we've made are now on GitHub.

[00:03:50]
This could be good, again, we're creating that little point in history. If you're working on multiple machines, you go on another machine, you can get your project from there or if you're working the team, people have access to the work that you're doing there as well.