Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
  • Overview
  • Transcript

4.3 HTML: Portfolio and About Pages

Welcome back. In the previous lesson, I finished the HTML forward home page. And this is the result right here. Now, let's move on to the portfolio, which currently doesn't exist. But let's copy the, all of the code from the home page, and then create portfolio.html. Paste that in. Save it. And now we have the portfolio page. Now there are a couple of things I don't need from here. The header, I'll keep. The slider I don't need, so I'll replace it with a banner. So, I'm actually gonna delete all of this. Recent projects, I don't need. Instead, I need a portfolio item. So again, delete most of this stuff. And footer, I'll keep. Okay, now for the banner, let's take a look at the PSD. For the banner, we have a simple background image with a fancy box and an h1 inside that. So, section, and I'm gonna do a div with a class of page-banner. And I'm gonna give it an ID of page-portfolio. Now, inside I'm just gonna put a header with a class of fancy-box and fancy-gray. This is the third color that we're gonna use for this type of box. And inside, an h1, which is gonna say portfolio. Okay, now, next the portfolio item. On the portfolio item, we have the current project, which will be in h4, project name, description, navigation and then a slider. So, let's start with that that h4. I'm gonna wrap everything in a container and also main content. And remember these are classes that I also used in the index.html. Yeah. Right here. So, keeping things consistent. And then, we have a div, another div, with a class project-description and also center-content. Again, a div that I used in the footer. Cool, now we have an h4 plus an h2. The h4 is gonna say Current Project and h2 is gonna say Project name. And then we have a paragraph with a class of narrow-p. Remember, we used the same type of paragraph here in the footer, and in here I am just gonna put some lorem ipsum. Okay, after that I am just going to put an hr for the separator align. And then I'm gonna have a div with a class of project-nav. And inside, I'm gonna have two anchor tags. Both have a class of project-nav-. So, let me separate these. Href will be # for now, for both of them. This will be left and this will be right. And for content, we have left arrow previous project and next project, right arrow. So, left arrow Previous project and Next project, right arrow. Finally, it's the slider. So for the slider, I'm actually gonna grab the the code from the next HTML because it's basically a very similar slider. So I'm gonna copy all of this. But instead of HTML slides, we're gonna have images. So, I'm gonna keep the slider navigation. And instead of these slides, yeah, I'm gonna have three images, which source will be images/slide-$-bg.jpg. And the alt is going to be slide $ times 3. Save that, and let's refresh. And there it is, slide 1, 2, and 3. And then of course, there is the footer, which we already have. Finally, let's see the about page. Very similar in structure with portfolio, so copy this. Create about.html, paste that in, and let's see. For the banner, I'm gonna replace this with page-about. This one's gonna say About me and then instead of portfolio item we're gonna have about. Now, I'm gonna keep the class of container and main content, but I will add the class of center-content. [BLANK_AUDIO] 'Kay, delete these and delete the slide show, because we don't need that. Cool. Inside, let's see, we basically have a few paragraphs, and then address, and then this bit right here. So, I'm gonna have a paragraph with a class of narrow-p times 3. First one is gonna be a simple lorem ipsum. The second one is gonna be the address, so address line 1 and Address line 2. And the third one is gonna be this bit. And this right here will be an anchor tag actually, like this. Refresh, and this is the about page. Now this completes the HTML stage. The next stage in the project is CSS, and it's the stuff that will give the website its final look. So, that's coming up in the next lesson.

Back to the top