Computer and Business Skills training

Sign Up
888.815.0604
Home / HTML and CSS / Level 3

Web Development Level 3
Mobile & Responsive Web Design

Course Description

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.


3 Days | $1495.00


Book this course

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.

    • The viewport meta tag
    • device-width
    • initial-scale

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

    • Adding SVG as an image
    • Setting SVG width & height
    • Configuring the web server’s .htaccess file for SVG
    • Additional configuration with the .htaccess file
  • 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.

    • Input types (search & email)
    • Making CSS background gradients fill the page

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

    • Creating a horizontal scrollable area
    • Optimizing the scrolling for iOS touch 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).

    • Using media queries to load hi-res images for Retina/HiDPI 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.

    • Mobile first thinking
    • Fluid widths
    • Min-width vs. max-width media queries

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

    • Reviewing the box model
    • CSS3 box sizing
    • CSS3 calc() function

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

    • Wireframing the basic Jive Factory layout
    • Setting up "mobile first" media queries

  • Jive Factory: Finishing the Wireframe

In this exercise, we will finish the wireframe by adding the structure for the page at different breakpoints.

    • Structuring the page for various sizes/devices
    • Min & max-width media queries
    • Using CSS calc() to gain control over fluid layouts
    • Hiding elements for specific sizes/devices

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

    • Editing the visual indicator for each media query
    • Fun with RGBA
    • Anatomy of a CSS gradient
    • Linear-gradients & repeating-linear-gradients
    • Linking to Google’s free web fonts
  • 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.

    • Adding the logo & nav content
    • Styling the logo & nav for various sizes/devices
  • 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.

    • Adding SVG Sprites
    • Styling the logo & nav for various sizes/devices
    • Fixing opacity inheritance

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

    • Improving Upcoming Shows on mobile
    • Constraining the design at certain breakpoints
    • Centering the design at certain screen sizes

  • Jive Factory: Responsive Slideshow

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

    • Getting the slideshow working
    • Styling the slideshow content & controls
    • Preventing hidden images from loading
  • 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!

    • Responsive off-screen navigation
    • Toggling the navigation with a checkbox
    • CSS transitions

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

    • Creating a full screen background
    • Using viewport sizing units vh & vw
    • Vertically aligning content
    • Darkening the background image via CSS

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

    • Adding content & laying out the page
    • Using Bootstrap’s grid system
    • Creating & adjusting columns
    • Adding a navbar & other components

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

    • Adding an email signup form
    • Nesting sections

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

    • Changing the grid at specific sizes
    • Showing & hiding elements at specific sizes

  • Bootstrap: Creating a Photo Grid

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

    • Bootstrap’s fluid container
    • Making images fill the grid
    • Nesting sections

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

    • Using Bootstrap's Optional Theme
    • Creating a fixed navbar
    • Adding icons using Bootstrap's Included Icon Font
    • Skinning or customizing the design
  • 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.

    • Adding Markup for the Slideshow
    • Hiding the Slideshow on Mobile


Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class.

Timetable

Chicago

230 W Monroe St
#610
Chicago
IL 60606View Map

Guaranteed to Run Limited Seats Left

Class times: 9.00am to 4.30pm

Servicing Arlington Heights, Aurora, Bollingbrook, Chicago Loop,
Deerfield, Des Plaines, Evanston, Highland Park, Joliet, Naperville,
Schaumburg, Skokie, South Chicago and surrounding areas.

Other Cities

Request onsite training quote

Los Angeles

915 Wilshire Blvd
#1800
Los Angeles
CA 90017View Map

Guaranteed to Run Limited Seats Left

Class times: 9.00am to 4.30pm

Servicing Anaheim, Burbank, Covina, Downtown, Fullerton,
Irvine, Long Beach, Northridge, Pasadena, San Bernardino,
Santa Monica, Van Nuys, Ventura and surrounding areas.

Related courses

Why train with us? Need Group training quotation? Fresh Starbucks brewed every dayFREE Class Repeat with each course