We finished this responsive design module
and hopefully learned a lot about responsive design,
besides the fact that
we created another website from scratch in the optional part
of this module,
we understood that responsive design is all about adapting
our website to the user preferences.
These preferences are related to our unit choice.
On the one hand.
Up to this point in the course,
we mainly use the pixel and the percentage units,
but we also learned that we have more units available M and
REM.
Whilst the pixel unit is good,
but does not scale meaning it doesn't adapt to other screen
sizes or other preferences the user sets,
the font size for example,
we saw that with the percentage or the M and REM units,
we can achieve this goal.
While the percentage unit is
dependent on parent elements and specific properties
in these parent elements,
we learned that M and REM always refer to the font size
property of other elements of the root element in case of
the REM unit.
Therefore,
we decided to go with the REM unit in this module and also
throughout the rest of the course,
which does not mean that the percentage as shown right here
or also the pixel value as here chosen for the height are
not valid anymore.
Besides these units,
we also had a look at the general idea behind responsive
design.
We learned about the mobile first or desktop first approach,
which has implications on the way we design the responsive
part of our website.
In case of the desktop first approach,
we can create so-called media queries,
which we added down here,
which allow us to set different styling for a certain break
point and below this break point.
Here, we used one single break point,
but also multiple break points are possible.
What's 40 desktop first approach,
the max-width word keyword is important for the mobile first
approach.
So creating a website for the mobile phone,
look first, the main word keyword would be important here.
Besides these media queries.
We also learned that we can create mobile specific
interfaces.
This site draw here just with HTML and CSS.
For this learn
more about the creation of internal links,
internal references on an existing webpage by using the ID
as a reference in the anchor tag.
And we also learned about another pseudo selector,
the target selector,
which allows us to use a certain style once an ID here,
our SiteWatch D for example, is added to the browser URL.
Now with this, we turned our desktop only page into an
adaptive mobile and desktop website,
which looks good on all devices.
Feel free to dive deeper into the styling of the website and
to tweak our settings even further.
But generally we are done with the responsive design part
now, we know how to make our website responsive.
Therefore,
it's time to continue with the course.