Discover Classes. Earn Rewards.

Web Development Level 3: Mobile & Responsive is unfortunately unavailable

Thankfully we have 3 other HTML Classes for you to choose from. Check our top choices below or see all classes for more options.

HTML 5 and CSS Content Authoring: Level 1

ONLC Training Centers @ 1320 Tower Rd, Chicago, IL

Master the art of creating attractive and user-friendly web pages with this comprehensive course on HTML5 and CSS3 at ONLC Training Centers. Learn the essential web technologies to structure and present content effectively, while also exploring advanced features like multimedia integration. No prior web development experience is required.

(7) Beginner 18 and older

HTML Introduction

Computer Training Source, Inc. @ 420 N Wabash Ave, Chicago, IL

Master the art of designing and modifying web pages with HTML. Dive into the essentials of tags, links, images, style sheets, frames, and tables. Enhance your web development skills at Computer Training Source, Inc.

(21) Beginner 18 and older
$699

2 sessions

Gift it!

HTML Intermediate

Computer Training Source, Inc. @ 420 N Wabash Ave, Chicago, IL

Take your HTML skills to the next level with this intermediate course from Computer Training Source, Inc. Learn advanced forms, image maps, CSS, and more to enhance your web design techniques and create professional websites.

(21) Intermediate 18 and older
$699

2 sessions

Gift it!
See all HTML classes Chicago

Web Development Level 3: Mobile & Responsive

  • Advanced
  • 14 and older
  • $1,495
  • 230 W Monroe St, Chicago, IL
  • 22 hours & 30 minutes over 3 sessions

Start Dates (0)

  • $1,495
  • Training Connection - Chicago @ 230 W Monroe St Ste 610, Chicago, IL 60606
  • 22 hours & 30 minutes over 3 sessions
Showing 10 of 0

Class Description

Description

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.

Refund Policy

All cancellations and rescheduling requests must be made in writing and emailed to [email protected]

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

We are unable to offer refunds for cancellations.

While we make every effort to deliver classes as scheduled, we reserve the right to reschedule previously confirmed classes for a variety of reasons including but not exclusively, the illness of the Trainer. In such cases, we will endeavor to inform the Client as soon as possible of the new training dates. We are not liable for any additional expenses incurred as a result of rescheduling training.

We are not able to offer refunds for no-shows or uncompleted courses.

In any event where a customer wants to cancel their enrollment and is eligible for a full refund, a 5% processing fee will be deducted from the refund amount.

Reviews of Classes at Training Connection (158)

(4.6-star rating across 158 reviews)
  • Web Development Level 3: Mobile & Responsive

    Anonymous review 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.
See reviews for other classes at Training Connection
loading...
Hide Reviews

Similar Classes

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 & Answers (0)

Get quick answers from CourseHorse and past students.

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 valuable...

Read more about Training Connection

CourseHorse Approved

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

Training Connection

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.

Google Map

Give This Course as a Gift Card

  • Thousands of classes
  • No expiration
  • Unique and memorable gifts for any occasion
  • Personalized
  • Explore a passion, gain a new skill, discover a new hobby, engage in a memorable experience
  • Instant delivery
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™

Buy a Gift Card

Book this Class as a Group Event

Booking this class for a group? Find great private group events

Or see all Coding Group Events

Explore group events and team building activities ranging from cooking, art, escape rooms, trivia, and more.

CourseHorse Gift Cards

  • Creative & unique gift for any occasion
  • Thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...