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 Dates
-
Sydney Class Dates
Level 11, 32 Walker Street, North Sydney , NSW 2060
Classes scheduled on demand in SydneyPlease Join our waitlist and we'll notify you when a new class is scheduled or contact us to disucss your training needs.
-
Melbourne Class Dates
Level 12, 379 Collins Street, Melbourne , VIC 3000
Classes scheduled on demand in MelbournePlease Join our waitlist and we'll notify you when a new class is scheduled or contact us to disucss your training needs.
-
Brisbane Class Dates
Level 6, 371 Queen Street, Brisbane , QLD 4000
Classes scheduled on demand in BrisbanePlease 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
All courses facilitated in, Online Live format ,
Classes scheduled on demand in CanberraPlease 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
All courses facilitated in, Online Live format ,
Classes scheduled on demand in AdelaidePlease 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
All courses facilitated in, Online Live format ,
Classes scheduled on demand in PerthPlease 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
Enquire Now
Fill in your details to have a training consultant contact you to discuss your training needs.