Course Details close

Course Details

Price:
(inc GST)		 $ 990
Application:Responsive
Level:Advanced
Version:All-Versions
Duration:2 days
Location:
Level 2
80 Mount St
North Sydney
NSW 2060
Participants:Max 10
Length:9:00 to 16:30
Break Times:
(approx)		 10:30 (15mins)
12:30 (1hr)
14:45 (15mins)
Course Dates: View
Course Outline: View

Responsive Web Design Course

   (4.8 out of 5)

Quick links

Responsive Web Design Course

Course Overview

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

Course Inclusions

FREE Course Re-sit

8 months

When you book a public course at Raisng the Bar we offer you a FREE course re-sit for up to 8 months from the scheduled course date.

FREE Email Support

12 months

Free email support for up to 12 months from the scheduled course date.

Small Class Sizes

10 students

All of our courses are capped at a maximum of 10 students to maximise your learning experience.

Classroom Training

All of our courses are face to face, hands on, classroom based training delievered by .

Course Manual

Every student will receive a printed course manual with step by step instructions to use as a reference guide.

Computer Lab

No need to bring your own laptop. Our training courses are conducted in fully equipped computer labs with free Wi-Fi.

Course Certificate

Every student receives a certificate of completion at the end of course to recognise your new skills.

Course Dates

Course Date Price Add Course Qty Status

There are currently no public dates scheduled for this course.

If you have 3 or more people interested in this course, call us today to discuss group training - 1300 937 782.

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

Need Assistance

  • Send Email
Raising the Bar
Warning Icon Information Icon

OK
1300 937 782 Contact us