1300 888 724 8.30am to 5:30pm AEST (Mon-Fri) info@dynamicwebtraining.com.au

Responsive Web Design Course

(4.78 out of 5) 54 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.

Course Details

Course Dates

  • Sydney Class Dates

    Book Now

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

    02 - 03 Jul 19 Tue - Wed
    29 - 30 Aug 19 Thu - Fri
    21 - 22 Oct 19 Mon - Tue
    19 - 20 Dec 19 Thu - Fri
    10 - 11 Feb 20 Mon - Tue
    08 - 09 Apr 20 Wed - Thu

  • Melbourne Class Dates

    Book Now

    Level 12, 379 Collins Street, Melbourne , VIC 3000

    06 - 07 Jun 19 Thu - Fri
    01 - 02 Aug 19 Thu - Fri
    23 - 24 Sep 19 Mon - Tue
    18 - 19 Nov 19 Mon - Tue
    16 - 17 Jan 20 Thu - Fri

  • Brisbane Class Dates

    Level 6, 371 Queen Street, Brisbane , QLD 4000

    Classes scheduled on demand in Brisbane

    Please Join our waitlist and we'll notify you when a new class is scheduled or contact us to disucss your training needs.

  • Canberra Class Dates

    Level 4, 54 Marcus Clarke Street, Canberra , ACT 2601

    Classes scheduled on demand in Canberra

    Please Join our waitlist and we'll notify you when a new class is scheduled or contact us to disucss your training needs.

  • Adelaide Class Dates

    19 Young Street, Adelaide , SA 5000

    Classes scheduled on demand in Adelaide

    Please Join our waitlist and we'll notify you when a new class is scheduled or contact us to disucss your training needs.

  • Perth Class Dates

    Level 1, 140 St Georges Terrace, Perth , WA 6000

    Classes scheduled on demand in Perth

    Please Join our waitlist and we'll notify you when a new class is scheduled or contact us to disucss your training needs.

Course Units

Expand full topic list

Unit 1: Setting the Viewport Meta Tag

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

See more

Unit 2: Hi-Res Images and Effects

  • 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

See more

Unit 3: Creating a Mobile-Friendly Nav and Forms

  • Styling Mobile-Friendly Nav
  • Working with Text Shadow

See more

Unit 4: Creating Mobile-Friendly Forms

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

See more

Unit 5: Media Queries For Retina Graphics

  • 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

See more

Unit 6: Creating a Basic Wireframe

  • 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

See more

Unit 7: Adding the Background

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

See more

Unit 8: Start the Header

  • 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

See more

Unit 9: Understanding Responsive Issues

  • 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

See more

Unit 10: Responsive Slideshow

  • 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

See more

Unit 11: Grids for Responsive Prototyping

  • Twitter Bootstrap
  • Using the Bootstrap Grid System

See more

Unit 12: Fluid and Nested Layouts

  • Using Bootstrap’s Fluid Layout
  • Nesting Sections

See more

Unit 13: Making it Responsive

  • Using the Responsive Bootstrap Styles

See more

Related Courses

Course Reviews

(5.00 out of 5) Greg W [ 09 May, 2019 ]
This course was excellent and what I was hoping to learn. Linda is a great instructor and I like the hands on approach of the course not just theory.
(5.00 out of 5) Andrew R [ 11 February, 2019 ]
Great course! Mark covered everything and took the time to explain things I didn't understand. I would highly recommend DWT courses.
(5.00 out of 5) Kristine R [ 13 March, 2018 ]
Linda was really great! Everything was explained well and all she covered in class was clear and easy to follow.
(4.80 out of 5) Malcolm A [ 13 March, 2018 ]
Linda provided a great learning environment. The pace of the class was just right and the content although dense was very useful. I really learned a lot.

Read all course 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