All right guys.
Welcome back to a new section here.
I'm really excited about this because it is the section where we are building the web site to be responsive
and we are also building a custom CSSA responsive navigation menu.
So get ready.
We are about to start off
or I guess we are back here and before we actually start building our Web site responsive we need to
do three small adjustments.
So the first one is I have my brackets we know open here with the live view enabled.
And here is the Web site.
So one thing that I want to adjust is first that the font size of these footer here already culprit's
section because in my opinion they look pretty big.
As of this cell if we go to the CSSA and I know that the glass of these is called in line.
So those three are getting selected.
And what I can do is basically change their font size from 20 to 15 and we can see that they're getting
smaller and in my opinion this looks much better.
The next adjustment I want to make is as you can see that these Here are links so my web site is laying
here.
And these three images are also links so they should be clickable and lead to somewhere for example.
So if I just go to the HD e-mail and scroll down to the last corporate section we can see that none
of those is a HGF link because you remember HGF is a link.
So if I just select this and remove it or just copy it and if I now right here right Tref which is going
to lead nowhere so far.
And if it pays my Web site here we can see that the Web site is becoming an actual link.
Ok so because it leads to nowhere so far what I can do here is write HTB as column seven column two
dashes and write double and double w my actual website.
This should be leading to my actual Web site and that's exactly what we want here.
OK.
Now the next thing you want to do is the same thing with the images here.
So if I just type again a if that's going to lead to nowhere so far.
And if I just cut these line of code and pasted here and do pretty much the same thing with the susah
just remember the WDR so D-W class D R and then change this to Twitter and then they dribble.
And now we can see that those are links as well.
So now we can do just let's say that we want this link to lead us to somewhere random to Facebook for
example.
All we need to do is write the same thing as above.
So this will lead to Facebook one cool feature is that if after this you write target
and then equals to blank its target equals under dash blank.
This will actually be open in another tab so it won't interfere with your current tab here.
So for example if I read the same thing right there this link will lead me to my Web site again.
But within a new tab Okay.
So that's perfect.
Now lets just edit out so this link here is not weird style like this.
But we can do is if we select all the links inside of the inline A-class or am I mistaken here that
line a.
And if we do text decoration to none.
If I refresh we can see that the underline is gone and now I'm going to send the color to black so red
there.
There it is.
So the second thing that I want to do before we get into responsiveness part is actually pretty important
as you can see that I have here a resize window plug in or add on.
OK I have downloaded this from the Chrome store and this is pretty useful when dealing with dynamic
web site that I've mentioned.
So here I can test the Web site if I click on any screen size I can test it and see how it looks live.
So we're going to use that as as well.
When we resize the window notice at these top and so the bottom right corner we can see that the actual
size of the viewport.
OK.
So this is pretty important as well.
We want this viewport size is the size of the Web site it's currently on.
So just download this go to Google dot com and type window resize or wrong and you can see there is
the add on here just install it and it will be added to Chrome if you press on here and then you will
be ready to go.
Or perfect title was The second thing that we want to do before there's a response from the start.
And now the last thing that I want to share with you is to explain what is responsive most of you probably
know and then show you how it's actually done so making a web site responsive means that it will look
equally good on a big screen TV for example and it will look equally good on a small mobile screen.
For example an iPhone.
So how is this possible.
How is this done.
Well all we actually are doing in easy words is basically we are changing and we are repositioning the
elements on the Web site as we are shrinking down the screen size.
So for example let's say that at this given screen size this iPhone as we can see is interfering in
sync with the other options.
So we have plenty of options here maybe to remove maybe to replace it or something else.
We can see this button here is behaving really weird.
These columns are overlapping and the web site looks a complete mess.
As of now being without media queries what we what media queries.
OK so media queries is basically a C says rules that we specify and we explicitly tell the elements
on how to behave at a different screen size.
So if this sounds complicated let's try a life example here and that's how we're going to continue doing
new website responsive.
So it's pretty easy go to your style that's VSS and other animations just right media.
Where is slash us on softness.
Okay.
And close a comment logis some whitespace here are.
Perfect.
Now let's say that I want for example this is just an example OK.
For example at a given screen resolution of 12 40 cell one thousand two hundred and forty pixels at
this exact resolution I want the logo to disappear.
Because let's say maybe it's interfering with something so so all I need to do is write.
So the correct markup would be media only screen and that open up for interest and inside right.
The max zoom with off.
How much was it.
I'm sore 12:40 pixels.
And then open up the curly brackets you see what the markup is.
Media only screen and maximum width of one thousand two hundred and forty pixels you don't necessarily
need to know what this means.
This is correct Mark.
And what basically happened here is everything inside these curly brackets so every rule every Caesar
street ruled that we will be writing inside Diskworld brackets.
It's going to apply once the website reaches sizes smaller than 12 for it.
So let's try it let's try and see it in action here.
So all I need to do is not write logo display none.
OK.
So let's see what happens here.
Let's increase the size.
Right now it's 13 50 pixels so if I refresh now the logo is still there.
But as I shrink down as soon as I reach the resolution that is written here the logo should disappear.
See watch the logo right there and it's gone.
All right.
So once I increase the size it's there once I reach 12 40 pixels the logo is gone.
So this is just an example here we can do.
For example we can do body display none and everything should be empty when we reach that screen size
and when we are increasing but the body's back and where we should know the body is gone.
So basically we can write any kind of rule that we want here inside these curly brackets and that is
actually how we are making the web so responsive.
So I hope this concept is clear for you.
If it's not read watch it again because this is very important and this will build up on the next lectures
where we will start making the web said responsive.
So stay tuned guys.
I'll see you in the next one.