42. Setting up the About Me page - Responsive CSS Tutorial

there isn't a lot for the about me page there isn't a lot to do once again but there is a little bit that we need to do so I'm going to give you the the link to the Adobe XD file once again in the show notes as well as in the slides in just one second just to make it easier to get the text but also just see what text is bold in here because we do have quite a bit of text that you're going to want to make bold when you do this one and we also these h threes that are different from all the other h threes so that need their own style their own color their own font size and all of that set up on them but otherwise there isn't that much now the very beginning of this is exactly like we did before we can go to one of our pages copy all the content and paste it into a new page so I want you to try and do that and delete everything that you do not need we can keep some stuff but we do need to delete some other things so go ahead and give it a try place the content in see if it works the way you expect it all to work and of course as usual I'm going to be jumping in and taking a look at it with you in just a minute okay so let's go and make that new file so new file we can call it a boat me dot HTML again if you're going to have two words in it and you need name spacing do not put a space with your keyboard make sure that it is - separated on my recent posts we can copy all that come over to my about me and paste it all footer is good in my side bar the side bar is a little bit different on this one we do not need this first widget anymore since we're on the about me page so we can delete that sidebar widget and we don't need any of the articles but I am going to keep the main there so let's come through and just delete all of these articles they're all vanished they're all gone and we can just come in here and start working directly in the main and I'm just gonna fast forward when I do this part there's not a lot to it it's just you know we just have to place content and put the right two tags on everything so I'll be back with you in a second with all of the content in place so all of the content is in place we're ready to go now and do the last finishing touches on this so there's not a lot to do if we come in look I've also been really nice and I've set up all the links for you so if you go and look between all the different pages I have put those links in there so if we come through and look now all the links are working we can jump through between the different pages and everything is all awesome there's only two things is I need to change the color of that and looks like I made a little typo there somewhere - we want to change the color of my h3 s maybe change the spacing on them a tad and of course we want to make some modifications on this picture because if we look at the original design it should be able to crop itself similar to how these images were cropping so the first thing I want you to do is go ahead and do that we've seen it with those other ones if we come and look at my about me page I've given it the class of image full the idea here is that I see this page sort of acting as a template page as well so just like these are sort of template pages if you were to click on continue reading it could use this exact same layout for a blog instead of for an for the full blog post instead of for might just my about me page if you're going to do that I probably have the article tagged the whole thing wrapped in that so article open all the way at the bottom article close but in this case it's not really an article so I'm not going to include it now if you're wondering how you could do that where you're creating template pages that's not on the scope of this course but there are different ways there's languages like PHP which WordPress is built on so you could actually make your own WordPress theme or I use a language called Jekyll for my personal site right now I'm looking at changing that maybe to 11 T or there's many many others there's a few of them that I'm looking into for the next time I redo my own personal site which are called static site generators where it's mostly using HTML and CSS so you're setting everything up with those but then you can have the content if you write a new blog post it's sort of automatically putting the content into the template file that you created and we're well on our way of having something that could be taken to that next step once you're ready but I wouldn't get there yet don't get ahead of yourselves let's first master how to make the responsive page and then once you're super comfortable with that you can start worrying about templating so for the image I want you to go ahead and do that set up the image so it is cropping just like we did on the other ones I would do it with a maximum height so limit the maximum height or image you can have and also maybe add a little bit of margin on the bottom of it and in the next video I'm going to show you how I would