Add Google Maps to Your Website
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
Add Google Maps to Your Website
Hello, good looking people. This video, we're going to look at something called an embed code and we're gonna start with this one here. See this? It's a map. It's on our website. It's in directive, it shows us where our restaurant is. It's super easy to do. Google does all the work. All we do is copy and paste stuff. Okay, later on we'll add a video as well okay, from Youtube to our website and we'll add this called booking thing where somebody can make a reservation. We're not doing it. We're not coding it. We're not styling it. We're just going to these websites like youtube, google maps and open table and they are giving us all the things we need. We just copy and paste it and we look awesome. Alright, let's jump in now and work out how. Alright, so this is what we want to add, right? It's just a kind of a screen shot at the moment. It's not actually working. So we want to add it to our website and the cool thing about things like this, we're going to do google maps here, but you co...
uld have a calendar from google maps here. A spreadsheet from google, what else? You could have ticketing from ticketmaster or eventbrite, you could have facebook feeds or twitter feeds, they all use the same sort of method. It's called an embed code. It's generally in something called an I frame. So first of all, let's go get the code. So we're gonna do, we use google maps. Okay. And I've just loaded up with the new Zealand version but go to google dot com slash maps. Okay, I've gone too dot co dot nz But anyway, it doesn't matter. And then type in the business that you want to list. Okay, so type it in, find it. Um, and let's say, so these, this is where I'm going to move to, right, I'm pretty excited. It's a deer and a deer manner is like some fancy big estate manor house thing there. The carriage house at Adair Manor seems like a really cool place to add to my fictional map. So what I'm gonna do is I'm going to click on it so that I'm just kind of like isolating it over here because I don't want all of these things over here as well. So I'm just going to find the carriage house at a deer manner because whatever you see over here is going to be what's on your map, Still showing me the other restaurants, go away the restaurants so it has gone away. So a couple of things you need to do when you're doing a map is zoom in and out because this is the kind of size if you want to show it in relation to like Dublin, okay, Which is miles away. I live in Ireland from New Zealand, my wife's irish. Anyway, so you can decide the kind of scale. Okay, do you want it to be so you can see the kind of driving distance between Dublin? Oh Dublin is up there somewhere um or do you want it to be really kind of localized maps so people can see the street that's on very close. I get that right click and drag it until you get the right position and then what you're looking for now, I'm going to show you as it is at the moment, every time I teach this class and I make a video they go and move where this button is. Okay, so um you're not allowed to complain, google, changes it on me, you just got to dig it out and find it and if you if it is in a different place, right in the comments so that other students know where it's gone. And so what I'm looking for is an embed code. So where is at the moment it's under this one called share. Give you options for sharing and you're looking for this one called in bed. Okay, so embedded the map, click on that. And then what I wanna do is you've got the different sizes. I'm gonna pick a custom size, you could just pick one of these custom size now. How wide do we want it to be? I want it to be like, I know the width of my site is 10, so I might as well make it full width, 10, even and how high I'm just guessing 500. So let's preview it at actual size, that's what's going to look like right once it loads eventually, awesome. So all I need to do now is go to copy Beard map, yep, copy html and paste this on my site, It's too easy. So good. The good thing about it is going to make us look real good if this works, so where am I going to put it? I'll put it um inside the main, so just before it gonna put a couple of returns in and I'm gonna tap across and paste it there. Cool, so that's gonna be my frame, let's see if it works straight without any, sometimes they need adjustments, let's check, I can't remember and it's a preview in the browser, let's see how this goes. You ready? Yeah, which one is it? Yeah, it looks great, okay, it's kind of pushed over to the side but it's there, look at it, you can zoom in zoom out, people can check it out, find directions and it looks good on your website and we don't have to do any of this kind of like hardcore stuff, google does all the hard work for us now, why is it all messed up is mainly because we put it in a couple of things. One is we put it inside this main tag, which I forgot we added petting too. Okay, I'll leave this in the course because these are things that happen, you're like, what happened dan. I know because remember our main, we said earlier later on we said we had a giant padding. So what I'm gonna do is I'm going to say let's not have it in maine let's have it afterwards and tag Okay what tag? Let's use a section. Okay we could, yep section section is a nice thing to use. Okay. And what we'll do is you could just use a div just exploring using sections. Okay and put it in there. It's gonna say solve some of our problems because it's in a different the padding is not going to be affected. Hopefully. Cool. And that's fixed all of our problems. Nice. Okay, so there's our map. We've got some padding issues that we need to fix. Okay, but that's cool. Huh? Just dump it in and it looks awesome. Let's fix the padding and then I'll show you a quick little run through some other embed codes. So what I'm going to do is hear my section. I'm going to give it a class name. Okay, I'm gonna call this one. What am I going to call this one? Maps. Come and over here. What I want to do is I want to say if there's dot maps I'd like it to have um what do I want padding or margin have a look padding or margin will back let's do petting petting bottom Bottom and how many let's put in 100 pixels to see what it looks like. Here we go, a bit of a space there. My image is getting, it's not big enough to carry it. If you're working on a smaller screen, you're probably not going to run into many image issues. But here we go. Let's look at a couple of other embed code because the process is the same. We'll do two more real common one is Youtube. Okay, so go to Youtube, find a video that you like. Oh I know a good video. I'm dreading to actually this to launch. So it's going to show you all my search history. What does dan like to watch? Dun, dun, dun. Alright. And it's not too bad. Lots of car shows and home renovation, building stuff. Uh Yeah, you're like why aren't there lots of web design shows because I like to make web design videos, not watch them. Anyway. Ah So let's add a video. Let's find, oh bring her laptop. There's bound to be a good video there. Look at this guy grid and let's grab this one. Okay. It's one of my old videos on my other videos. So what you're doing is you find the video that you want to make sure it's got a handsome kiwi in it. Okay. And once you've found that you're looking for the share button now. Again, this might change you, youtube changed things around all the time as well. So you're looking for share. It'll be there somewhere and go to where we want to share a link in bed. See that one there. Look on this. Okay. There's an I frame like before. Okay, you can get it to start a different position. Do you want the player controls? So do you want the play button or not? I'm just going to copy all of this. That's just a copy. There you go. I'm gonna jump into my studio code. Where am I gonna put it? I'll put it just underneath this. I frame. Yeah, just put underneath here. I know we're going to get rid of it and just kind of showing you a for instance, pasted in. Let's see if there's any issues. Have a look. It's the old one. The new one. It looks like this. There's a map and there's a video underneath it. Now. You can do things like making it 100% width. What else can you do? Let's have a little look at the code Because we've said be height and width. Okay, I'm going to make it a width of 124. What does that equal? I'm not even sure. Can I delete the height. Think. You can just delete the height and let it do it for you. No, you have to work out what the ratio is and make it bigger. It's a really skinny video. I'm not sure what it is. So I'm going to leave it for the moment. It's a mess that my brain can't do now. It's 10 o'clock at night. It's too late for maths and let's have a little look. Yeah, adding videos. So I'm just going to mention a couple of other ones now that you can go off and do twitter does the same thing. So if you want to add your twitter feed to add a little bit of life to your website, go to twitter and they have an embed code so you can embed a stream of your tweets okay? You can go to facebook and put your facebook group on here as well in different posts. What else can you do? Mail chimp have one. So you want to add an email sign up. Okay, real quick and easy. Go to mail chimp, sign up and they will give you a little embed code that you can just paste on your site and they'll do all the heavy lifting, they'll grab the emails that confirm them for you, they'll add them to a list that you can send them emailers. One of the one I wanted to show you was open table. So open table, it's not really big here in Ireland, but I know it's big around the world. Anyway, let's say that you want to add a reservation because the moment we've just got this reasonably lame thing. Where is it? There we are there. He's got a button okay. But let's say they actually want to book a time and a place and you don't want to have to code all that because it can be, well it's really complicated. It can be, you can go to open table and if you've like been accepted into so you're the restaurant owner okay. Or the web designer for the restaurant, you're gonna have to get them to make sure they add their restaurant and they have to jump through some hoops to say yes summer restaurant and it's an open table. And what you can do then is they've got a widget creator. Okay. I found just a Brandon restaurant philadelphia. I've never been there. But this restaurant because it's on open table allows you to create a really quick and easy. Would you? Okay, so you can pick the size, do all this, copy the code, dump it into your site and hope it doesn't break it. So where am I gonna put mine and put it just underneath here paste, see what it does and say look There it is there. Cool. Huh? So it goes through and somebody can go, I want to make a reservation for now and for two people at seven PM and click find a table and it will send a booking request to open table. I guess I'll show you this all. I've said it a few times, but I want to show you this embed code stuff because not everything has to be done by you. You can stand on the shoulders of giants that have made cool little embed codes and you can just yank them out and stick them on here. Have we talked about other ones? A couple of other ones that I use is eventbrite. I created my kind of sit down classroom business based around event brights in bed codes allowed me to do some people to take tickets and book into my courses without me actually having to do much. Alright, I'm going to go through now and delete it. I will save it for this video, but I'll delete it for the next one. So when I wake up tomorrow and we start our next video, these guys are going to be gone because the map stays. But the rest of the stuff is just the stuff we've thrown in for learning. Alright. Good people. I'll see you in the next video.
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding