Skip to content
Code
Camp
Kidz
Building skill one project at a time!
facebook
join us
chat
online
chat
offline
meet
online
meet
offline
Live Class Schedule
M-W-F 7:00pm - 8:00pm EST
Tu-Th 5:00pm - 6:00pm EST
Sa-Su 11:00am - 12:00pm EST
Join the live MEET
Zoom VideoConferencing
Sign Up
Login
Home
Features +
E-Learning
Our progressive skill building platform was designed for kids to be successful on each project.
New Projects
New projects are being developed and rolled out on a monthly basis.
Tablet Friendly
CodeCampKidz is presented in a responsive layout that will adjust to tablet displays.
Projects
Student Showcase
Pricing
x
LIVE HELP
SEND
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.
PROJECT OVERVIEW VIDEO
Would you like to watch the project overview video?
x
CLOSE THE WINDOW WHEN THE VIDEO FINISHES
×
Sign Up
Price Plan
Basic
Pro
Pro +
Account Information
First Name
Last Name
Userame
Email address
Password
I agree with the Terms and Conditions.
Sign up
×
Login
Email
Password
Login
Send A Message To The Instructor
x
{{ ErrorMessage }}
{{mail.DateSent | date:"MM/dd/yyyy 'at' h:mma"}}: {{mail.Subject | unsafe}}
{{mail.OpenText}}
{{mail.Comments}}
Reply
|
Delete
|
Mark As Read
My Information
Update your information or leave the defaults.
Update Parent Information
*
Update Student Information
*
Update Username and Password
*
*
Weekly Class Schedule
Yes! Please send me a weekly class schedule with one click registration. I understand I can opt out at any time. (An email address is required for this feature.)
{{ ErrorMessage }}