Responsive Web Design with HTML5 and CSS3

The Responsive Web Design with HTML5 and CSS3 course is a comprehensive course focusing on building one website and using on desktop computers or mobile devices, whether they are iPhones, iPads or android smartphones. The course will start from the concepts of responsive layout, then move up to construction of responsive website using HTML5 and CSS3.

After completing the training course, you will be able to construct a website displayed beautifully in different devices. Students are expected to have the general knowledge in HTML, CSS and Javascript.

Classes are held in daytime or evening time.

What you’ll learn

Responsive Workflow

  • Planning and Strategy
  • Content Before Layout
  • Layout Consideration
  • Prototypes
  • Visual Design
  • Responsive Design Tools

Mobile Pages Issues

  • Mobile First
  • Understanding Screen Size and resolution
  • Deciding Which Devices to Support
  • Testing your site on real devices

HTML for Responsive Sites

  • Working with HTML
  • Basic Page Structure
  • Viewport
  • Structural Elements
  • Creating a Page
  • Clean and Semantic HTML

Essential CSS for Responsive Sites

  • The Cascade
  • Using the Cascade
  • Organizing Your Stylesheet
  • The Box Model
  • Display
  • Positioning
  • Float and Clear

SCHEDULES
 
RWD0031 - 廣東話 10 Mar enrol
 
RWD0032 - 廣東話 26 Mar enrol
 
RWD0041 - 廣東話 31 Mar enrol
 
RWD10041 - 廣東話 15 Apr enrol
 
RWD0042 - Eng 17 Apr enrol

Fluid Grids

  • The Role of Fluid Grids
  • Creating Your Own Response
  • Fluid Solutions

Navigation and Header Layout

  • Responsive Navigation
  • Navigation Links
  • Navigation Patterns
  • Header

Adaptive Images

  • Adaptive CSS
  • Scripted Adaptive Images
  • HTML5 Adaptive Solution
  • Ways to Display Images
  • Responsive Images

Understanding Media Queries

  • What’s a Media Query?
  • Media Query Structure
  • Using Media Queries in Stylesheet Links
  • Browser Consideration
  • Designing Responsively
  • Using Media Queries
  • Two-Column Layout
  • Setting a Maximum Width

Typography

  • Typefaces
  • Using Fonts
  • Sizing Text
  • Line Length
  • Whitespace
  • Margins and Padding
  • Changing Typeface for Screen Size