- Read Tutorial
- Watch Guide Video
As I mentioned in the last guide we are going to implement some of the final items needed for this layout. Now this is going to be a little bit time consuming and may seem a bit monotonous because there are a number of files that we need to change. I'll show you what I did in between the last guide and this one I added my own content right here. So I added a very small paragraph and change the heading tag and that's it. Now if you click either on about me here or in the nav bar this goes to the About Me section. Once again all I did was add some content for my portfolio and said about me and them put a little hr tag in between. Then on the contact I created error I updated the page one then said Would you like to work together at my office address phone and then a link that will open up the email browser and also show you how you can do that. You may notice that I have this skewed to the left and that's because I am going to make room for how to implement a Google map.
So that is what we are going to do right now. If you go to a maps.google.com then right here you can go and you can type in whatever your address is. Obviously I'm not going to know what your address is so I'm simply going to type in the address for the office here. So I'm going to go and copy and paste that. And now I will just paste it in. I will include the suite number for the office that we have here in Scottdale. And now it's going to search as you can see at this moment I am at the office and the way that we can get this onto our site is by clicking share and then embed map. This is going to give us all of the code.
It's going to give us a few options it's going to give us a medium small large or custom size however you can change the size in your layout so it really doesn't matter. So I mean I copy that and opening up sublime. Let's open up the contact page and you might see some code that looks kind of weird here. But don't worry we're going to get all into how this works you'll see rows and then these columns and at the end of this guide you can go up in the show notes and I will push all of this up so you can see it. I didn't want to spend time going through this because we are going to repeat the process of building these columns in these rows. It's going to feel like about a million times over the next few guides. So I wanted to just give us kind of a starter. I wanted to make this guide all about how to add a map to the application. So I'm going to pace this in and that. Believe it or not is all you have to do.
So if you hit save and now come back to Google Chrome we can close out of that. Hit refresh and there you go. Now you have a map. Now if you want to see how to customize the size of this there are a few different options you see right here that you have width and height. So right now it's 600 by 450. We could make it square and save 450 by 450. Hit refresh. And as you can see that's changed it up considerably. And this is actually about the size that I want it for right now. And we're going to get into responsiveness and all of that kind of stuff later. Now this is a very cool kind of map embed option because you can actually users are going to be able to click and drag on it. They can zoom in so you can see exactly where our office is here and zoom out and this gives you everything you need. You also can get directions to here and all the kinds of things that you'd want to do with Google Maps. So that is how easy it is to implement a map. Now let me show you how I implemented the e-mail.
So this is kind of cool because what this is instead of just providing a text that says you know copy and paste this. What I did was I used in a tag an said inside of the href said mail to put my email address here. And then with this you can even by adding a question mark you can provide a subject so if you were to click this and if you have something like Outlook or something like that it will actually open up your email client and it will autofill right here Ill say portfolio contact and then that's all you need to do and then on the screen it actually just says email me. So if I were to click that it would open. Then someone could email you.
So this is the contact page. Now I wanted to do the log in and the registration forms but I started going through it and it is very time consuming. So that needs to have its own guide. So that's what we're going to go into next. It's going to be prepared for a long one because that it's not just one page where you have to style this log in, to sign up, the forgot your password. Everything like that and it's going to be a little bit time intensive but it's going to be good because you're going to be able to go through all kinds of styles and we're going to make this look very nice and clean.
So in the meantime though let's say that we built our contact page up something lets say git add. and now get this commit it's "updated styles and added a map for contact page". And now it can push up just this. Origin design and that is all we need to do. I'll see in the next guide where we start building now all of our styles for our registration and login pages.