Complete Home Page Practice

[00:00:00]
>> Okay, so now that you have your project in place here, you've got your VS code page that we finished at the end of chapter 4. That's the one that has the death bar, the introductory text, the contact text, and the footer. What I'd like for you to do now is to take the work that you've done on the projects, I would like you to slot it on into that VS code page.

[00:00:22]
You probably need to add a gradient bar in there somewhere, so you might need to think about where that's gonna go and how you're gonna fit that in. And of course, copy over the relevant parts of the styles. And then you should wind up with a webpage that is the complete homepage, should be completely done by the time you're done with that.

[00:00:45]
So as my instructions tell you to do, go to your CodePen we just finished, copy the CSS from that CodePen we just finished, replace all the CSS that you have in your document right now. Just copy and paste that right and over, erase what's already there. And then you're gonna wanna take that project HTML, copy that over, and plug it in the right location, and then evaluate.

[00:01:08]
So what's wonky? What's missing? What do you need to tweak? As I mentioned, the gradient bars, you may need to think about a little bit of other styling tweaks. And then I'll come back and I'll tell you my answer to the problem. So go ahead and give that a try.

[00:01:30]
All right, so hopefully that was a little easier than what you did the last time around, when we had to pull in all of those different code patterns. This time we only had one to work with, and hopefully, that went pretty smoothly for you. So if you take a look here in your HTML, it probably looks something like mine.

[00:01:50]
So you can add those div with a class of gradients, you can add as many of those as you need. You need one at the top of the project, so you need one at the bottom, so one in between the intro in the projects, one between projects and the contact, those are two gradients that you should have added.

[00:02:07]
But the rest of the HTML should be pretty straightforward, copy paste kinda thing. And then, of course, I copied over my CSS from that CodePen. And when I took a look at the web page, I saw something like this. And so why navbar my intro was good, but my projects are stretching all the way across the screen.

[00:02:30]
So we forgot to do something with that, and then there's those gradient bars that I dropped in here. So how do we going to narrow this up and get this in line with everything else that's here on the page? All we need to do is take a look at what we've done before, and what we've done before is we set a max width of 1200 pixels, and we centered it on the page.

[00:02:54]
So here in our CSS, what we ought to do then is add, we're gonna add a style here for the projects itself. We'll set the max width of 1200 pixels, and we'll set the margin to 0 auto. And once we've done that, we've saved our document, then when we go back to our web page, it should, in theory, all line up and look absolutely fabulous, okay?

[00:03:28]
And if we make the page a little bit narrower, we'll run into a couple breakpoints along the way. I think, my navigation breaks before my projects do, there's nothing wrong with that, that's just a thing And make the screen a little narrower still, and then you'll see our projects all stack very nicely on top of each other.

[00:03:54]
All right? So congratulations, you built that complicated seemingly difficult looking web page layout, by process of breaking things into little pieces. So what I hope you take away from this is as follows. So first of all, take a look at the web page and identify what is probably the easiest thing to code on it.

[00:04:18]
In this case, we started with this little bit of text right on up here at the top of the page, because it's just text. So we started with that, we put it into CodePen, we formatted it up, we got our quick win, which always energizes you. If you start with a hard thing, then it feels like everything else is hard, start with the quick win.

[00:04:36]
So we formatted that tiny little bit that felt really, really good, then we moved on to navbar, that was the next thing to work on. And from the navbar, we learned about accessible icons, we learned about how to format something to look like a button. That was then stuff we could carry into the footer of the webpage, where we also had icons, and we could format those to look like the way that you see it here.

[00:05:01]
And then we were ready to add on the contact section, which was also not that hard, and we had already styled up the button in the navbar, so then we could drop that into the contact section and add on, right? So, all along the way, we're sort of doing things and progressive levels of difficulty and recycling the little bits of code that we write as we go.

[00:05:22]
Then the last part that we tackled was the projects, because it looked complicated, and it was gonna take a little bit extra time to work on. So I hope that this approach, and particularly, where we just sort of work things out in CodePen. Where we could go really fast and see what the immediate results were, we can go faster there, then we can inside the vs code for this type of work.

[00:05:44]
And then bring it all back together inside a vs code to put the page together, do your final set of twerks, and you have a project that you can really truly be proud of.