CodeCampKidz

Responsive Layouts & Media Queries - Locked

Learn how to control the appearance of your page as the width of the viewing device expands and collapses. You will be introduced to CSS Media Queries and learn how to set them for screen widths triggering the use of specific CSS classes. You will gain control over how your rows and column align themselves by stacking Bootstrap column classes for specific screen widths.

In 9 steps you will build this project and learn:

• How to use Media Queries by setting min & max screen width to trigger the use of specific CSS classes.
• How to stack Bootstrap column classes to gain control over positioning as the screen width expands and collapses.

The Tools You Will Use:

HTML5:

<div>, <h1>, <h2>, <b>, <img>, <ul>, <li>

CSS3:

background-color, border, color, font-size, margin-left, margin-top, margin-bottom, container-fluid, row, col-lg-12, col-xs-12, col-sm-6, col-md-4, col-md-6, col-lg-2, col-lg-6

JavaScript:

JQuery, Bootstrap JS

Your Personal Project:

You will create a page of your choosing that demonstrates how you can use media queries and Bootstrap column sizes (lg, md, sm, xs) to change the look and element stacking as the screen width expands and contracts. Please submit a code review when you are finished.