• Search
  • Cart
  • Courses

Responsive Web Design

(4.71 out of 5) 39 Student Reviews

About the course

During this 2 day course, participants will learn how to build a Responsive website through a variety of step-by-step projects. The participants will work on a Responsive site that will adapt to a device screen size. In addition this course also covers important issues relating to mobile optimised websites.

Who should do this course?

This Responsive Web Design course is suitable for anyone involved in the Web, from business owners to agency designers, corporations to developers.

Pre-requisites

Working knowledge of HTML5 and CSS3 is a pre-requisite for this course. Prior to attending this course, participants should have completed our HTML5 and CSS3 course or have equivalent skills.

Quick Facts

$ 990 incl GST

Duration: 2 Days

Max. Class Size: 10

Avg. Class Size: 5

Level: Advanced

Times: 9.00am - 5.00pm approx.

Course Dates

19-20 Jun 17Mon - Tue

14-15 Aug 17Mon - Tue

12-13 Oct 17Thu - Fri

07-08 Dec 17Thu - Fri

29-30 Jan 18Mon - Tue

More Dates

Address

Level 11,
32 Walker Street,
North Sydney , NSW 2060

View map

Click Here external link for Google Map

03-04 May 17Wed - Thu

08-09 Jun 17Thu - Fri

31 Jul - 01 Aug 17Mon - Tue

27-28 Sep 17Wed - Thu

20-21 Nov 17Mon - Tue

Address

Level 12
379 Collins Street,
Melbourne , VIC 3000

View map

Click Here external link for Google Map

Upon demand

This course is currently upon demand in Brisbane

Address

C/O Support Technology
Level 6, 371 Queen Street,
Brisbane , QLD 4000

View map

Click Here external link for Google Map

Upon demand

This course is currently upon demand in Canberra

Address

C/O Atlas Business Services
Level 1, 33 Ainslie Place,
Canberra , ACT 2601

View map

Click Here external link for Google Map

Upon demand

This course is currently upon demand in Adelaide

Address

C/O The International Visualisation Centre (IVC)
19 Young Street,
Adelaide , SA 5000

View map

Click Here external link for Google Map

Upon demand

This course is currently upon demand in Perth

Address

C/O Saxons Training Facilities
Level 1, 140 St Georges Terrace,
Perth , WA 6000

View map

Click Here external link for Google Map

Please Join the waiting list and We'll notify you when a new class is scheduled or if a place becomes available.

Course Units

Expand full topic list

Unit 1: Setting the Viewport Meta Tag

See topics

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

Unit 2: Hi-Res Images and Effects

See topics

  • Double-Resolution Images (Retina Graphics)
  • Setting Width to Half the Image’s Width
  • CSS3 Gradients and Shadows
  • Adding Custom Fonts
  • Creating a Scrollable Area
  • Creating a Horizontal Scrollable Area
  • Optimizing the Scrolling for iOS Touch Devices

Unit 3: Creating a Mobile-Friendly Nav and Forms

See topics

  • Styling Mobile-Friendly Nav
  • Working with Text Shadow

Unit 4: Creating Mobile-Friendly Forms

See topics

  • Input Types (Search & Email)
  • Making CSS Background Gradients Fill the Page

Unit 5: Media Queries For Retina Graphics

See topics

  • Working with Media Queries
  • Loading Hi-Res Images for Retina Display Devices
  • Simple Responsive Site
  • Understanding Fluid Widths
  • Max-Width Media Queries
  • Mobile First Thinking
  • Min-Width Media Queries

Unit 6: Creating a Basic Wireframe

See topics

  • Wireframing the Basic Layout
  • Adding Placeholder Content
  • Setting Up “Mobile First” Media Queries
  • Finishing the Wireframe
  • Structuring the Page for Various Sizes/Devices
  • Min and Max-Width Media Queries
  • Hiding Elements for Specific Sizes/Devices

Unit 7: Adding the Background

See topics

  • Adding a Visual Indicator for Each Media Query
  • Styling the Page’s Background
  • Adding Custom Web Fonts

Unit 8: Start the Header

See topics

  • Adding the Logo & Nav
  • Styling the Logo & Nav for Various Sizes/Devices
  • Adding Images for Large Screens Only (Don’t Load on Mobile)
  • Finishing the Header & Adding Slideshow
  • Styling the Header
  • Adding a Placeholder Slideshow

Unit 9: Understanding Responsive Issues

See topics

  • Styling the Upcoming Shows for Various Sizes/Devices
  • Using min-height to Ensure Element Heights Match
  • Limiting Flexible Content
  • Setting Max-Widths
  • Constraining the Design at Certain Break Points
  • Centering the Design at Certain Screen Sizes

Unit 10: Responsive Slideshow

See topics

  • Getting the Slideshow Working
  • Styling the Slideshow Content and Controls
  • Preventing the Images from Loading on Mobile
  • Supporting IE 8 and Older with a Background-Size Polyfill
  • Respond.js Polyfill for IE
  • Using a Polyfill to get Media Queries Working in IE 7 & 8
  • Final Code Cleanup

Unit 11: Grids for Responsive Prototyping

See topics

  • Twitter Bootstrap
  • Using the Bootstrap Grid System

Unit 12: Fluid and Nested Layouts

See topics

  • Using Bootstrap’s Fluid Layout
  • Nesting Sections

Unit 13: Making it Responsive

See topics

  • Using the Responsive Bootstrap Styles

Reviews

(5.00 out of 5) Ben N [ 19 December, 2016 ]
Excellent course, tied everything together well. Had great pace and energy. Good course content.Kept it interesting.
(4.60 out of 5) Sandee S [ 19 May, 2016 ]
Aaron is a good instructor who explains things clearly and offers real world examples and practical tips.

See more reviews

(4.00 out of 5) Sophie [ 17 March, 2016 ]
Provided great tips and tools to help with efficient way of working with code. Lots of information and knowledge was passed on that will help with work in the future.
(3.70 out of 5) Rebecca M [ 23 March, 2015 ]
I valued the tips and hints related to code structuring and additional CSS that weren't necessarily directly in the course material but will be very useful.

Read all reviews

Enquire Now

Fill in your details to have a training consultant contact you to discuss your training needs.

Your details

Other Ways To Get In Touch

You can also Book Online or call us on 1300 888 724

Back to Top