In This Lesson You Will Learn
In this lesson we want to design a complete web layout and enhance it using media queries for mobile devices. The final layout should appear as shown below:
You will find the files you need for this exercise in the support material for this course in the folder responsive_layout.
The folder responsive_layout contains — apart from three screenshots of the finished layout — the index.html file, as well as the fonts folder containing the embedded font UglyQua, the images folder with the images you need, and the styles folder with the CSS file of the same name.
The content of the index.html file is pretty nearly ready to be used. The
<nav> element in the
<header> contains the
onclick="return true". This is a simple hack
for emulating the hover feature on touchscreens. This is sufficient for our
purposes, but in practice you can use more elegant and flexible solutions, e.g.
The styles.css file already contains a couple of basic definitions for the general formatting of HTML elements, as well as the two classes .italic and .figure_right which are used in HTML. The search box in the header was also already given a makeover (the CSS code contains some special browser-specific features for this).
Your job now is to create the layout. Use in places where you think it is a good idea variables and calc( ).