OK, guys, now we will know how to add images inside our Web site.
We will know how to add maps and videos from YouTube inside our Web page here.
The first thing we can do is to go to embed my map dot com, which is the alternative for the Google
Maps.
And then you can search for the address you want and then click enter.
Now, I searched for University of Michigan.
You can search for the University of Oxford.
And then we have this university, and then if we want to make it responsive, just click on make my
map responsive or if you want to edit that the width or the height, you can edit it from here if you
wish.
So but this is OK, we can click now on Generate Code and now we have this code, we can click on copy
copied and then we can go back to our code editor inside the final project and just add that are.
And now we pasted that could which we copied.
We can go back to our Web page and reload.
Waiting now we have the map.
Let's see if it is responsive or not, when we make the screen smaller, the map is responsible.
We will cancel this one.
The problem is with the image and not with the map, but the map is compiled, frankly, and the map
is great because we will use this map embedded inside our Web site.
And now we're going to know how to add YouTube images, YouTube videos inside our Web site.
We can go to the YouTube to whatever you want.
I chose you for Michael Jackson.
And now we can click on Scheyer when we click on Share.
Now we got options.
We will click on Impact.
And now we can coffee this this could from here at 0.01, you can choose whatever you want and when
we go back to our good and then we can basically here we can just add some space between them.
OK, and you can we can make something different here.
We can do this one and just make here we got the width of five, six oh pixels in the height of that.
This is for the is spot where you want to make it responsive and more pipe friendly so we can just give
it the width of one hundred percent.
We can go back to our Web page and reload and we just to the height, let's try to give it a height
of three one five inches.
But again, we can just add more.
We can just make it to six one five.
This is OK.
When we click here, we got a problem because we want to apply or we want to upload our website on a
server to make it work.
It would not work for the speech because it's not uploaded on a server.
But this will be also responsive because it's taking one hundred percent off their screen whenever where
whatever the screen with we will be taking one hundred percent of its screen and for the height we can
also make it from there.
So we wish to know we will later know how to make it from the CFS and now we know how to impact maps
and videos from the YouTube.
And now this is our final project for the team.
Well, the problem is with the image, right?
It's not compliance friendly.
I'm going to show you why.
When we make this screen smaller, we can drink.
We don't want that.
The best solution for this part before we move to the fees is to do the image jacket.
And here we can just after that we can.
And with one hundred percent or we can just add any you want.
We now have to add in numbers and the that now the image is the responsive.
It's always taking one hundred percent of the page.
OK, so now this our first project for each team, which is the last one in the next section we will
move to the phase three, which is responsible for the width and the responsive design of the images
to being friendly and prevent the x axis scrolling.
In the next video, we will move to how to add forms inside our website and then we will go to the scenes
section.
Good luck and have fun.