Creating Inside Page Exercise

[00:00:00]
>> So congratulations everybody, you have finished the homepage for your portfolio website, and it looks absolutely fabulous. So the next thing that you may be wondering about is, how do we go about creating an inside page for the next part of this website. And I am going to get you started on that, and then let you go through and see if you can figure out how to create the rest of this inside page.

[00:00:27]
So let's get started. Inside of VS code, you have a file that you should have downloaded back in chapter six when you downloaded all of the images from GitHub, there was an HTML file that was available to you that's It's called projectstart.html. If you open up projectstart.html, this is most of the information that you need for the header of this document.

[00:00:52]
The content here for the header is not marked up, you're gonna need to mark that up, change the background image from the comment to the Stars. And then in the section featured here, we have a lot of the resources here that you're going to need to lay out this section of the webpage, including the YouTube video.

[00:01:12]
We have three images that are here and some text, more images, more text, and then the footer down here on the bottom is all set, you don't need to do anything. So, what I am going to recommend that you do here at Project Start, we're gonna do a File, Save As.

[00:01:33]
And I'm gonna call this lime.html, as in magenta lime. And then we, what I'd like for you to do now is I'd like for you to take a look at Lime.HTML and see if you can make it look just like the page that we have on the course website.

[00:01:54]
So, this is the way this page is going to look. In other words, we need to swap out a different background image up appear on the intro. You gonna need to mark up the code here, markup the text to do something else. And then you're going to need to work on your Flexbox and grid skills to lay out this web page here.

[00:02:13]
So we will need to make the video nice and big. Three images across two columns of text, another nice big image, and then a little bit of text and the image next to it like this. So that is my challenge to you. See if you can go through and create the Magenta Lime webpage.

[00:02:41]
All right? So I hope you enjoyed that inside page challenge. That is a wonderful way to expand your skills and really dig into HTML and CSS and see if you can make the work all on your own. So I'm going to walk through what my answers were for this.

[00:02:59]
As always, we're gonna start with HTML markup. So I am going to scroll down here on my page. The nav bar is all set and ready to go. I'm going to scroll down here to the first part of the text here, which is inside of around line 85 to 88 where we get started.

[00:03:19]
I am going to turn on the word wrapping. So If I go to view, word wrap, this is gonna turn on the word wrap so that I can better see what's going on here. So inside of my header, then I'm gonna add an article because this seems kind of like a story to me.

[00:03:37]
I'm gonna wrap that all the way around my text. And I am going to set Magenta Lime, that is, the name of this project. So this is going to become my h2, Magenta Lime,h2. And then of course this is just a paragraph of text here. So here is the attack text, on my screen.

[00:04:06]
Okay, great. So that's the first thing here. Pretty simple to do, right here in the header of the document. We just add an article, an h2, and a paragraph. All set. Now I'm going to scroll down to the website tour. This is where we have the Stripe Background and we have the video and all the rest of it.

[00:04:25]
So the website tour is going to get an h2/h2. And then I have these images, I have three images, and then I have a whole bunch of text underneath. This actually lends itself to a figure once again, believe it or not, you can have a figure that has multiple images inside of it.

[00:04:50]
So this is the way that I marked it up. You may have marked it up differently and that's okay. Some people may have preferred to use divs or actually maybe very little markup at all, but I like it with the figures. So I'm going to put in my figure element here to start with.

[00:05:07]
And then we're going to have three images underneath, which is great. And then of course this text here will be our figure caption, figcaption. And that's end at the end of all over blah blah, </Figcaption and </figure. Okay, so each of the images is all set and ready to go.

[00:05:34]
It already has the source for each of those images that already has alt text for each of those images. And so for the Figure caption, all that we need to do is put in a paragraph. Cuz that's what that is, the big long paragraph. Okay, then I have this image here, which is the image with the diamond grids.

[00:05:58]
So that's gonna hang out here all by itself we can throw in a return here to sorta indicate that it's just gonna hang out here. And then we have another image that has text along with it lends itself again to a figure. So let's put in our figure and we'll put in our </figure.

[00:06:20]
And our <figcaption. </Figcaption and then of course, all of the text here. Looks like I lost a word there. Let's put it in a paragraph, and this is this. This track list flies in and out on click. Okay. And then </p down here at the bottom. Okay, cool.

[00:06:57]
So that is the HTML, that's all that we needed to do. Just two sections, a little bit of HTML in the intro section, a lot more HTML down in the featured section, for the website. So once that's all in place, then we're on to styling all of that text.

[00:07:14]
And, so I am going to go to, first of all, let's just take a quick peek at how this looks. Okay? So this is the magenta line page, that's the wrong image in the background, there should be stars now. And you'll see that we have the videos too small, the pictures are too big, all absolutely fabulous.

[00:07:35]
And what's going on here? Does anybody have any idea what's going on here? We mark these up as figures. What is that weird black thing that's there on top of the images?
>> The styling we set up before.
>> It's the styling we set up before for the homepage.

[00:07:53]
-huh, so, yes CSS is doing what CSS does, this is called featured. So it's pulling in all of those featured styles and applying it here, So it's gonna look kinda odd. All right. We have captions trying to overlap the image, and none of the styling is right. So we just have a bunch of things that we need to fix.