Responsive Web Design Training Courses

Web Design Responsive Advanced Training Courses

Course Details

Course Name: Responsive Web Design
Course Duration: 2 consecutive days - 9:00am to 5:00pm
Course Price: $990 inc GST
Course Participants: Maximum of 10 students
Break Times:
Morning: 15 mins at 10:30 am (approx)
Lunch: 1 hour at 12:30 pm
Afternoon: 15 mins at 3:00 pm (approx)
Finish: 4:30 pm to 5 pm
Training courses in Sydney with Raising the Bar

Course Dates

0

Sydney

Training Location: Level 2, 80 Mount St North Sydney NSW
Course Date Day Duration    

Affordable, on-site group training available for this location.
Group training can be tailored to your specific needs.
Find Out More! Contact us via email
or call 1300 937 782
(1300-WE-R-RTB)

Melbourne

Course Date Day Duration    

Affordable, on-site group training available for this location.
Group training can be tailored to your specific needs.
Find Out More! Contact us via email
or call 1300 937 782
(1300-WE-R-RTB)

Brisbane

Course Date Day Duration    

Affordable, on-site group training available for this location.
Group training can be tailored to your specific needs.
Find Out More! Contact us via email
or call 1300 937 782
(1300-WE-R-RTB)

Perth

Course Date Day Duration    

Affordable, on-site group training available for this location.
Group training can be tailored to your specific needs.
Find Out More! Contact us via email
or call 1300 937 782
(1300-WE-R-RTB)

Adelaide

Course Date Day Duration    

Affordable, on-site group training available for this location.
Group training can be tailored to your specific needs.
Find Out More! Contact us via email
or call 1300 937 782
(1300-WE-R-RTB)

Canberra

Course Date Day Duration    

Affordable, on-site group training available for this location.
Group training can be tailored to your specific needs.
Find Out More! Contact us via email
or call 1300 937 782
(1300-WE-R-RTB)

Course Prerequisites

Students should have experience with hand coding html5 and CSS3 as a pre-requisite for this course. Ideally students should have attended a HTML5 or CCS3 course of have attained equivalent skills.

Who Should Attend

The 2 day Responsive Web Design course is for students who already build websites and are confident in hand coding HTML and CSS and want to take the next step in web design. This course will take you through a series of projects developing responsive websites that are optimised for various screen sizes and devices and will cover important related issues dealing with responsive web design.

Course Outline

The Viewport Meta Tag

  • Setting The Viewport Meta Tag
  • Defining device-width
  • Setting initial-scale
  • Defining maximum-scale

Hi-Res Images and Effects

  • Working with Retina Graphics (Double-Resolution Images)
  • Halving an Image’s Width
  • CSS3 Shadows and Gradients
  • Using Custom Fonts
  • Creating Scrollable Areas
  • Horizontal Scrollable Areas
  • Optimise Scrolling for iOS Touch Devices

Mobile-Friendly Navigation and Forms

  • Creating and Styling a Mobile-Friendly Nav
  • Working with Text Shadows

Creating Mobile-Friendly Forms

  • Form Input Types (Text, Button, Radio etc.)
  • Fill a Page Using CSS Gradients

Media Queries and Retina Graphics

  • Working with Media Queries
  • Loading Hi-Res Images on Retina Display Devices
  • Creating a Simple Responsive Website
  • Understanding and Creating Fluid Widths
  • Setting Max-Width Using Media Queries
  • Mobile First Thinking Explained
  • Setting Min-Width Using Media Queries

Creating a Basic Wireframe

  • Creating a Basic Layout Using a Wireframe
  • Adding Placeholder Content
  • Mobile First Media Queries
  • Finishing the Wireframe
  • Structuring the Page for Different Screen Sizes
  • Media Queries for Min and Max-Width
  • Hiding Elements for Different Screen Sizes

Filling the Background

  • Identifying a Media Query Using a Visual Indicator
  • Page Background Styling
  • Using Custom Web Fonts

Starting With the Header

  • Adding a Logo and Nav
  • Styling a Logo and Nav for Various Screen Sizes and Devices
  • Showing Images on Large Screens Only
  • Complete the Header and Add a Slideshow
  • Header Styling
  • Adding a Slideshow Placeholder

Responsive Issues Explained

  • Styling Upcoming Shows on Different Devices
  • Using min-height to Match Element Heights
  • Limiting Flexible Content
  • Setting Max-Widths
  • Design Constraint at Break Points
  • Centering Page Design for Various Screen Sizes

Responsive Slideshows

  • Setting up a Slideshow
  • Styling Slideshow Images and Controls
  • Prevent Slideshow on Mobile Devices
  • Background-Size Polyfill for Older Browsers
  • Using Respond.js Polyfill for IE
  • Media Queries Polyfill for IE 7 & 8
  • Finalising the Code

Responsive Prototype Grids

  • Twitter Bootstrap
  • Bootstrap Grid System

Fluid and Nested Layouts

  • Fluid Layout Using Bootstrap
  • Creating Nested Sections

Completing Responsive Web Content

  • Utilising Responsive Bootstrap Styles