<section>
<?= t_head('Three-Column Fluid Layout', "10–15") ?>
<p>Download the following skeleton:</p>
<p class="resource"><a href="minilab15.html">minilab15.html</a></p>
<p>The HTML file contains a list with 6 columns. It already links to a <samp>base.css</samp> file which contains some default styles for everything on the page. (This includes sidebar/main column widths, but excludes widths of the list items in the central/right column.)</p>
<p>Create a file called <samp>default.css</samp> and add to it the necessary styles to arrange the list items into three columns per line, with percent widths and gutters.</p>
<p>Use the <code>:nth-child()</code> pseudo-class to remove right margin on the last item in each line, so that the 3 column widths plus the 2 gutter widths add up to exactly 100%.</p>
</section>
<section>
<?= t_head('Responsive Design', "10–15") ?>
<p>Edit your <samp>minilab15.html</samp> file to add a new <code>link</code> to a <samp>mobile.css</samp> file. Add the correct <code>media</code> attribute to the <code>link</code> tag to make <samp>mobile.css</samp> CSS file load only when the browser window is less than 800 pixels wide.</p>
<p>Then create your <samp>mobile.css</samp> file and add to it the necessary styles to change the layout to be 2-column instead of three. Remember to use <code>:nth-child()</code> to remove the right margin on the last column of each line.</p>
<p>After you’ve done that, you may find that the <code>:nth-child()</code> property from <samp>default.css</samp> is still being applied. Modify its <code>media</code> attribute so that it is <strong>not</strong> loaded when <samp>media.css</samp> is loaded, and vice versa.</p>
</section>
<section>
<?= t_head('Adaptive Navigation', '20–30', array('extra' => true)) ?>
<p>Now add a third stop point at 600px. Make the navigation bar move above the center columns and be all on one line, instead of in the left column.</p>
<p>Then add a fourth stop point at 480px. Make the navigation bar be replaced with a <code>select</code> dropdown, and create and attach a <samp>minilab15.js</samp> JavaScript file which handles navigation when the dropdown is changed.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Experiment with other map options, and creating prettier info boxes with more of the tweet’s data.</p>
</footer>