Combining Sections into One Page

[00:00:00]
>> Jen Kramer: Now that we have, we have the about section written, we have our footer section written, and we have our project section written, and they're all in separate CodePens. The next thing I wanna do is combine all of those into a single page. So that is the next thing what we wanna do.

[00:00:16]
Here inside of your website, in chapter 6, we are getting ready to start on our light dark theme switcher, and we're gonna start that by combining everything into a single page. So what we're gonna need in order to get this done is the project's pen that we just finished.

[00:00:36]
So the layout we just finished in terms of our projects, and the mobile and the desktop version. We're going to need to open up the about page. So we wanna go back to this CodePen here, with the section that we wrote on the about. And we wanna go back to our footer.

[00:01:01]
>> Jen Kramer: And all of that information here. And now we're going to combine these all into one CodePen. So with the exception of that switch up there on the top, this is the way the page is supposed to look. We should have an about section, on top of a project section, on top of a footer section.

[00:01:18]
So, does anyone have any suggestions of how we should start?
>> Student 1: Probably we can create a single HTML page, and then copy each of those tags and put them there accordingly.
>> Jen Kramer: Yeah.
>> Student 1: And then the CSS consolidate that together as well.
>> Jen Kramer: There we go, we should just copy over each of our sections.

[00:01:38]
So, the good news is, with our projects markup here, all of the markup that we've written so far is here inside of this pen. So what I'm gonna do is I'm going to start with my about page here, and what I'm going to copy over is not the wrapper, but just the article part of this, okay?

[00:01:57]
And you can do that really easily by working with your arrows here. So I've just flattened that up. This is lines 2 to 30, all in that [LAUGH], and I can just copy that little bit of code and then come back over to my Projects pen here.
>> Jen Kramer: And there's the main, right?

[00:02:19]
So the article comes before the main. So I'll just hit return, and paste.
>> Jen Kramer: So there's my about section, followed by my projects. Wait a minute, why does this look different? This looks like the desktop version of it, and this looks like the mobile version of it. What's going on here?

[00:02:41]
>> Student 1: Media query has not been copied.
>> Jen Kramer: That's right, we wrote a small media query, a 750 pixel media query here for the about page, but it's 850 pixels here. So we're somewhere between 750 and 800 pixels right now, okay? If I go back to smaller than 750 pixels, we have the mobile version for both of these.

[00:03:05]
And if I make it bigger, now I have the desktop version for both of these. Nice, okay? So we have this interesting little in-between layout, right? It's desktop there, but mobile here. Looks good, okay? And then, so that took care of that. Now we're gonna go to the footer, we're gonna do the same thing.

[00:03:32]
We'll just use our arrows. We're gonna go basically line 2 to 53 for our footer. Copy that. And then here in our CodePen, once we get past our main portion of the page, we'll paste in our footer.
>> Jen Kramer: And, sure enough, down there at the bottom is the footer portion of our webpage.

[00:03:58]
Look at that. You've coded the whole thing. You're amazing. You're so good at this. Yay, all right. So, let me let me just point out to those of you who are watching who may be feeling a little bit overwhelmed at this point in time. You have a perfectly good webpage just like this.

[00:04:16]
You could launch this and be very proud of this webpage. And if you're feeling like, I've had enough in terms of code, and I'm ready to just get this up online and not think about it anymore. I would encourage you to skip forward to chapter 7, where I'm gonna walk you through how we take this out of CodePen and then get this up on the web so that everybody can see it.

[00:04:38]
And that's what we'll be doing in chapter 7. However, if you're one of those people who are like, yeah, that was really good. And now I want a little bit more, I wanna have this light, dark color theme. Then we're gonna continue on with here with that in chapter 6.

[00:04:51]
So, that is the next thing we're gonna work on.