About Page Practice

[00:00:00]
>> So now that you have your homepage completely assembled here from chapter six, the next thing for you to do is all on your own, I want you to build an about page for the website. So, if you take a look at my screenshot here of how this should look there, some parts of this that should look familiar to you.

[00:00:18]
For example, you have a navbar appear here at the top, kinda looks like the navbar we already have in place. As is generally true on websites anyway, we have the same sort of footer here. And then in the middle instead of projects we have instead information about me, right, or about you, I hope.

[00:00:38]
So, what I'd like for you to do is to start by taking your homepage, and you're gonna simply save it, File Save As. So, index dot HTML inside of VS code, File Save As, call it about dot HTML. And then take a look at the HTML that you have there, think about what you need to keep and what you need to delete, because you don't need to keep everything that you had on the homepage.

[00:01:07]
Then you wanna modify that content to reflect your own biography. Maybe drop in your own picture, drop in your own biography, or you can use the provided information as I've given it to you, that's fine too. And then debug. So, you're gonna need to go through, you wanna look at the navigation on the top, click all the links, make sure it goes where you expect it to go.

[00:01:28]
Click anything else that's clickable on the page. Make sure it opens consistently either a new windows or not new windows. And if you have some extra time, feel free to expand on your bio, or add some more projects to the homepage, or whatever it is that you would like.

[00:01:46]
For those of you who are a little bit more advanced, I have some advanced additions for this webpage that you could think about adding. And I've given you some links for where you can go and read about these techniques a little bit further. So, here I've given you a link to a CSS-only hamburger button.

[00:02:02]
So, I mentioned I cover how to build this in the Frontend Masters advanced CSS layouts course, if you wanna watch that portion of that course, here are some instructions on how to build a CSS only drop down, that is accessible you can tab through it. Or you can add both of those things to your navbar, if you wanted to.

[00:02:23]
You could also think about doing a contact form instead of an Email button, that would be something to take the site to the next level. Or of course, you could expand the project section. So rather than the whole total of the project is what you see there on the homepage, which is how we currently have it configured.

[00:02:41]
Use that as an introduction to your project. Give it all like a read more kinda style, kind of button, which will take you to another page on this website that will give you much more detail, maybe some more screenshots, a link to the actual project itself, that type of thing as individual separate pages for the rest of the website.

[00:03:00]
That would be something for you to do. So, what I'd like for you to do now though, is just very simply to build, this about page. And, we're gonna give you just five minutes to go through and put this page together. And, then I will talk to you about how I approach this particular problem.

[00:03:20]
So, go ahead and give it a try, and I'll talk to you about the answer in just a minute. All right, so hopefully that about page went pretty well for you. There actually wasn't a ton of work to do believe it or not to create that about page.

[00:03:41]
You've already done most of the work on the homepage. It's a matter now for the about page of scaling back all the work that you did for the homepage to just the parts that you need for the about page. So, let's talk through my answers here and we'll start here with the CSS, and what you'll see here in the CSS is that nothing changed.

[00:04:01]
We already had all of the styling written for the homepage and this is a subset of that. And so, the projects layout that we used on the homepage is gonna carry into the about page. So, there really isn't any tweaks that you need to make here for that, all the changes happen in the HTML, what changes there are.

[00:04:22]
So, let's start on down here at the very bottom of our HTML document, this is the footer nothing changed. Footer is exactly the way it was on the homepage, shockingly, I know, you can't believe it. Then we have our gradient bar that comes right before the footer. Then you're going to simply repurpose the portfolio section of the page.

[00:04:47]
So, the ID here is still called portfolio, even though or projects, sorry, the idea here is still called projects, even though you have got this existing already on your homepage. So, what we have going on here very simply is one of those projects, so instead of here are the projects I'm proud of, this is now Jen Kramer.

[00:05:13]
Then we have our article, we have our image, and we have our text. It's all just listed right here. And then we have a gradient bar in between those. And then up here on the top of the page, we have our navigation. Now, There we probably need to make a few tweaks to this navigation.

[00:05:35]
Let's just take a quick peek at how this works. So, if we open this up, here we go, open this up in our default browser, so it looks good, right? But always go through and click your buttons on the top. So, here's one of the things that happens when you click on projects.

[00:05:56]
May wanna make sure it goes back to the homepage projects and not to the page that you're on. So one of the changes that hopefully you made, was for something like that projects link. It says here index.html, and then that hashtag or pound sign followed by that ID, write?

[00:06:17]
The portfolio or the projects depending on which ID you are using. You wanna be sure to go back to the homepage, and then skip down to that section of the page. If you just left this with only the ID, okay? And save this, and let me go back, refresh this page, and click on projects.

[00:06:39]
You're actually gonna skip down to your bio by default, all right? So, you need to always double check your links and make sure that they're doing what you expect them to do. This about page should link to itself, you should be able to click on Jen Kramer and go back to the homepage and make sure that that is working correctly.

[00:06:59]
Make sure that when you click on the Contact link that is linking you to the appropriate section of the page as well. So, all of that it's very, very important to go through and check all of those links and make sure that that is all working correctly. So, double check all of that as you put that webpage together, finally.