Voiceover: Let's take a small break
and talk about a very important thing in modern web design,
responsive web design.
You have probably heard of it by now.
So, in this lecture we will set up our project
to that we can easily build a responsive website.
So, what is responsive web design?
Building a responsive website means that that website
will work well on any device
and with any screen resolution.
Working well means that that website is easy to read
and to navigate without needing to constantly zoom in
and zoom out, which is really annoying.
Here are just two examples of responsive websites.
You can see that they change with the browser's width
which means that they respond to the screen size;
therefore, the name responsive web design.
According to Google, 50% of all internet traffic
already happens on mobile phones
and this will even increase in the future.
In fact, Google recently announced
that mobile-friendly websites will be ranked higher
on their Search Results page.
So, it's really important
to embrace responsive web design right now.
So, there are three main ingredients
to responsive web design.
First is the fluid grid.
In a fluid grid all layout elements are sized
in relative units like percentages
instead of absolute units like pixels.
in the CSS section we used a static layout
and defined width with pixels.
Now we are leaving that behind and work with percentages.
We will set up the fluid grid in a minute.
And the same goes for images so as to prevent them
from displaying outside their parent elements.
And finally, media queries allow us to specify
different CSS rules for different browser width.
With media queries we can target different devices
like mobile phones and tablets
and make the website respond to their screen size.
So, now that we know the main ingredients
to responsive web design let's go back to brackets
and set up the fluid grid.
We will then build our website using that grid
in the next lectures.
We will take care of the media queries part later
after building our webpage.
While we build the webpage it's just important
that we always use the grid.
Now, the fluid grid we will use in this course
is based on this little responsive grid system,
which claims to be spectacularly easy responsive web design.
So you can build any layout you can imagine
with this fluid grid.
I actually made some changes that makes things easier for us
and compiled everything in one file.
Please go download that file
from the lecture description right now.
We will come back to this website later
so I can show you how that grid works.
So I hope you downloaded the file by now.
I actually already have it here on my desktop
so I will copy it.
And then we put it in the Vendors folder
because once again it's a file that we got from the internet
and then in the CSS folder.
And here we go, alright.
So now back to brackets.
Let's include that file.
I'll do it here.
Again, before the style CSS, which is our CSS file,
and let me just tell you another trick
which is I can
since I don't want to write all of this again
and instead of copying which is a little annoying
I can just do
duplicate, which is Command + D
or probably Control + D on Windows.
So right here just Command + D and here we go.
'Cause all I want to change now is this file.
So I want the grid file, right.
So now the grid file is included in our project.
Now let me show you how that grid works.
So on this website is a little example.
So all our content will be inside columns,
as you can see here.
And each of these group of columns is a row.
So in each row we can have two or three or four or five
all the way to 12 columns
which all have the same width.
And now as for the responsive part,
if we resize the browser window
all of them shrink
and that means that they are defined with a relative width
because their width is always relative
to the browser window.
So they get smaller and smaller
as I decrease the browser window.
And that's what responsive web design is all about.
And after a certain amount of width
they even stack.
So when they get too small we can't see any content
in this column here, right?
Then they will all stack
just like this.
In our website, since we will use this grid,
we'll do the same.
Okay, so then let's see the CSS file
that we just included and it's down here.
Let me just open it.
And if I click it twice, double click,
then it appears up here in the working files.
So we have a row
and columns
and then different spans
and each of this span will be a column.
For example this span one of two
is just columns.
But don't worry, we will use that in the next lecture
and then you will understand everything
just how this works.
Alright, let's get back to our HTML file.
And as I said, the content will be in rows.
So let's just define the row
and I will simply call it row.
And what I want for this row
is a maximum width
of 1,140 pixels
just as we used in our previous project.
So this is the only value
that will have an absolute value in pixels.
We will define all other layout margins
in pettings and percentages
and not in pixels.
And now I also want to center this row
on the webpage so all our rows will be centered.
So do you remember how we did that?
We'll just set margin
and then to center a container
inside another container
as you remember we set the left margin to auto
and the right margin to auto.
You probably also remember
that we can use a shorthand to set margins just like this.
Top and right
and bottom and left.
Alright, but there's an even simpler way of doing this.
So let me show you that as well.
Which is we can say zero and auto
and then top and bottom will be zero
and left and right will be auto.
Let me delete this
and now this row will be centered.
You can just try this out.
So I'll say div and class will be row.
Alright, just put us here.
And let's see how this looks like.
Okay, you'll see it's perfectly centered.
So now we have everything in place
so we can start building the first section of our webpage
which will be the header.
So don't wait, and join me in the next lecture.