Discover Classes. Earn Rewards.

Web Development Level 3 Mobile & Responsive

at Training Connection - The Loop

Course Details
$1,495 5 seats left
Start Date:

Mon, Mar 09, 9:00am - Mar 11, 4:30pm (3 sessions)

The Loop, Downtown/Loop
230 W Monroe St Ste 610
Btwn S Franklin & Wells Streets
Chicago, Illinois 60606
Purchase Options
Class Level: Advanced
Age Requirements: 14 and older
Average Class Size: 5

What you'll learn in this html class:

Responsive web design is a relatively new approach to website design that ensures users have a great viewing experience on any device. It has become increasingly important over the last few years as mobile device ownership has exploded and traditional PC sales have slowed.

And now that Google is prioritizing mobile-friendly sites in its search results algorithm, it's essential to make sure your site is optimized for mobile by using responsive design.

Live face-to-face instructor. No minimum class size - all classes guaranteed to run!

Students should have completed Web Development Level 2 or have the equivalent experience before attending this class.

Detailed course outline

Flix: Setting the Viewport Meta Tag
This is the first in a series of exercises where you will work on a mobile website for Flix, a movie review website. In this exercise, you will learn how to set the very important viewport meta tag.

Flix: SVG (Scalable Vector Graphics) & .htaccess Files
Most of today's mobile devices feature high resolution screens that are typically 2-3 times the pixel density of older screens. SVG (scalable vector graphics) work really well for graphics such as icons and logos.

Flix: Mobile-Friendly Forms
HTML5 has new input types and attributes that you can use in forms. In this exercise you will see how HTML 5 input types improve mobile usability.

Flix: Creating a Scrollable Area
In this exercise, you will learn how to make one section of a page scrollable. You will add the "native" scroll bounce people expect on iOS devices.

Flix: Media Queries for Retina/HiDPI Graphics
In this exercise, you will learn how to use a media query to load a high-resolution background image for hi-res devices (which Apple calls Retina displays).

Mobile First vs. Desktop First
How you order media queries is important. Using a mobile first approach, we put mobile rules first, and with a desktop first approach, we put desktop rules first. In this exercise you will explore and weight the pros and cons of both options.

Box Model: CSS3 Box-Sizing & Calc()
In this exercise, you will take a deeper look at the box model, and see how padding affects the size of an element. You will learn how to switch to an alternate box model that makes building CSS layouts easier and more intuitive.

Jive Factory: Creating a Basic Wireframe
This is the first in a series of exercises in which you will create a responsive website for The Jive Factory, using the mobile first approach. We will start by designing the page structure using a wireframe.

Jive Factory: Finishing the Wireframe
In this exercise, we will finish the wireframe by adding the structure for the page at different breakpoints.

Jive Factory: Creating CSS Gradient Patterns
In this exercise, we will add a background pattern using pure CSS gradients. We will also choose a couple of Google-hosted fonts to enhance the typographic style of the site.

Jive Factory: Starting the Header
In this exercise, we will add the HTML for the Logo & Nav and add the CSS for mobile. Then we will style the header for phones and tablets.

Jive Factory: SVG Sprites & Styling the Header for Desktop
In this exercise, we will finish styling the header for tablets and desktops. You will also learn how to use SVG for sprites.

Jive Factory: Final Touches & Limiting Flexible Content
In this exercise, you will optimize the content for specific screen sizes. You will also give the page a centered look by setting some limits on how wide the content can get.

Jive Factory: Responsive Slideshow

In this exercise, you will learn how to create a responsive slideshow using a free jQuery plugin called FlexSlider2.

Off-Screen Side Nav Using Only CSS

In this exercise, you will learn how to create an off-screen navigation menu that is hidden from view until the user clicks a button. You will create this functionality purely with CSS. No JavaScript is required!

Full Screen Backgrounds & Viewport Sizing Units vh & vw

In this exercise, you will create a page header that fills the entire screen with an image and heading. This is often called a hero image.

Bootstrap: Getting Started
Bootstrap 3 is a powerful framework that can make web development faster and easier. In this exercise, you will start coding a page using Bootstrap's basic elements.

Bootstrap: More Elements & Nesting Grids
In this exercise, you will learn about some more of Bootstrap's components and use the grid system to nest columns within other columns.

Bootstrap: Controlling Grids & Layout
In this exercise, you will take a closer look at Bootstrap's grid. you will refine the layout so the content fits better at various breakpoints.

Bootstrap: Creating a Photo Grid

In this exercise you will learn about Bootstrap's fluid-width grid that fills the entire screen width.

Bootstrap: Skinning/Customizing Appearance

In this exercise you will learn how to customize the appearance of layouts created with Bootstrap, which is a process known as skinning.

Bootstrap: Adding a Slideshow (Carousel)
Bootstrap also comes with a handy JavaScript library. In this exercise, you will see how easy it is to add a slideshow to the page using Bootstrap's carousel.

Still have questions? Ask the community.

Refund Policy
Cancellations made more than 5 days before the commencement of the training, qualify for a refund less a $100 administration fee. 
Cancellations made 5 days or less before the commencement of the training, will not be eligible for a refund 
We are not able to offer refunds for no-shows or uncompleted courses.

Rescheduling requests made 5 days before the commencement of the training are free. Rescheduling that takes place within 5 days of the commencement of the training will incur a $100 administration fee. We do not charge for student substitutions at any time.

If your student wants to confirm her seat on the future class now, then there is a $100 transfer fee payable. Alternatively, as she may not have been aware of our terms, if she is willing to check back with us 2-3 days before a future class, and provided the class is confirmed to run, we will slot her in and waive the cancellation fee.

Money Back Guarantee
We offer a money back guarantee on our public classes.

If the training does not meet expectations, students can leave the class at the end of Day 1 (or by lunchtime in the case of single day courses) and request a refund. Students have to notify the training center manager before they leave and return all the training materials to qualify for a refund.

We are unable to offer a money back guarantee to students who leave a class later than the times noted above. Students can however still repeat the training (often with a different trainer).


Google Map

Training Connection

All classes at this location

Trains CTA - Blue and Red Lines - Monroe Station Walk approximately 4 blocks west on Monroe Street to Franklin Street. CTA - Orange, Pink, Purple and Brown Lines - Quincy station Walk approximately 1.5 blocks north on Wells Street, turn left (west) on Monroe Street, and go to corner of Franklin Street. CTA - Green Line Swap at Clark for Blue line or Roosevelt for Orange line. Metra - Union Station Walk 3 blocks east on West Adams (crossing river). Turn left (North) on Franklin and walk 1 block to Monroe Street.

Start Dates (1)
Start Date Time Teacher # Sessions Price
9:00am - 4:30pm TBD 3 $1,495
This course consists of multiple sessions, view schedule for sessions.
Tue, Mar 10 9:00am - 4:30pm TBD
Wed, Mar 11 9:00am - 4:30pm TBD

Benefits of Booking Through CourseHorse

Booking is safe. When you book with us your details are protected by a secure connection.
Lowest price guaranteed. Classes on CourseHorse are never marked up.
This class will earn you 14950 points. Points give you money off your next class!
Questions about this class?
Get help now from a knowledge expert!
Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Reviews of Classes at Training Connection (113)

(113 Reviews)
Web Development Level 3 Mobile & Responsive
Reviewed by Anonymous on 12/20/2017
The class was very informative! The instructor was very knowledgeable and willing to answer any and all questions. He knew how to adjust his teaching style, to match the learning style of the students, which helped me get so much more out of the class.
Similar Classes

School: Training Connection

Training Connection

Training Connection LLC is a computer and business skills training company.  

Our Training Philosophy

Our main focus is to provide exceptional computer desktop and business skills training. We strive to achieve this by following a 5 cornerstone approach:

1. Our Instructors

Without a doubt our most...

Read more about Training Connection

CourseHorse Approved

This school has been carefully vetted by CourseHorse and is a verified Chicago educator.

Ready to take this class?
Taking this class for work? Get exclusive perks & discounts for free.