Before we dive deeper into responsive design though,
let's have a look at what we will build.
Because, no big surprise here,
this course is all about becoming a web developer.
Therefore, we'll again
create a brand new website for this responsive module.
This is the website that we're going to build.
It's not a very spectacular website,
but it's a website which greatly allows us to dive into
responsive design.
The website contains typical elements
we learned about in this course so far,
so we have a page logo here.
We have two navigation items,
which don't lead to dedicated pages here.
You could of course implement this, if you want to.
We have a headline right here,
and we have two cards with different meals.
These two buttons, which would allow us to add our menu,
our meal, to our shopping cart are of course not working at
the moment, as this would require JavaScript,
which we'll explore soon in this course.
However, I just increased the zoom again,
to make it better visible for you. However, if we now,
again, access our developer tools,
then you will see why this side is a bit more advanced when
comparing it to the sites we built so far in this course.
Because in the dev tools in the left border,
so to say of these.
So I'm referring to this line right here.
If you click and hold the left mouse button to select this
line, then you can play around with it.
You see at the top here that you see the pixels,
so the pixel width of the content of the website here,
and we can change this width.
If we increase it, you see not a lot is happening,
but if we decrease the width,
which would be typical for smaller devices like tablets or
smartphones, which have well,
a smaller width when comparing it to big desktop screens.
So if we decrease that width here,
you see here that the text already changes to two lines,
but that's not the big thing.
But if we further decrease the width here,
you'll see that we have a very big change.
The entire layout,
the entire look of the website, and the information being
displayed changes on a certain breaking point here.
Let's go right here again to see what changes.
First, the font size of our headline decreases.
Second, the layout of our cart items changes.
On the desktop version,
we have a horizontal layout, left to right.
On the mobile version, which would be the
version displayed right here,
we have a vertical layout.
So a layout you typically know when browsing websites from
your mobile phone. They could,
of course also scroll down here to see the second cart item.
Besides this, we also have preferred very important change.
Our navigation items disappeared.
In the desktop version,
we had the "browse meals" and the "my orders"
navigation items.
In the mobile version, these disappear.
Instead, we have this strange looking icon here.
The icon is actually built completely in CSS and HTML,
and it's called a so-called "hamburger icon",
due to its look,
it kind of looks like a hamburger, you could say.
And if we click onto this icon though,
you see that the navigation items are back,
but in a completely different layout.
This has nothing to do with the desktop layout we had so far
where these items were placed up here.
This is basically an entire new page you could say.
And if we increase the width of the page again,
you'll see it disappears.
If you make it smaller.
Now, a lot smaller as the zoom level decreased.
You can see it right here. We have the mobile look again.
And if you click right here, then the new menu,
the new navigation menu disappears.
And if you have course closed or dev tools,
we are back in the desktop view.
So, this is the page we're going to build.
And as you see, this page contains all core concepts
we need to make sure our website looks good on both
mobile devices and desktop devices.
So this is the introduction.
Let's dive into the project now as a next step.