Course Details close

Course Details

Price:
(inc GST)
$ 990
Application:CSS
Level:3 Essentials
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

CSS3 Essentials Training Course

   (4.8 out of 5)
CSS3 Essentials Training Course

Course Overview

Students wanting to attend this training course should already be familiar with CSS and HTML and are looking to expand their knowledge with the new CSS3 standard. CSS3 is rapidly being implemented into all well known browsers including Internet Explorer, Firefox, Safari and Google Chrome and will ultimately become the corner stone of all web development. Web designers can fast track their learning in this area by attending the CSS3 Essentials course.

Course Prerequisites

Students should have completed the CSS Essentials training course or have equivalent experience. Although it's not a requirement it is strongly recommended that participants have CSS and JavaScript experience prior to attending the CSS3 Essentials course.

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

Introducing CSS3

  • What's New in CSS3
  • CSS3 Integration Overview
  • Using CSS3 For Your Website
  • Browser Support For CSS3
  • Web Browser Market Share
  • Progressive Enhancement Overview
  • Advantages of Progressive Enhancement
  • Benefits of Using CSS3
  • Reducing Maintenance and Development time
  • Increasing Page Performance
  • Better Search Engine Placement
  • Increasing Accessibility and Usability
  • A Case Study: Before and After CSS3 Implementation
  • Browser or Vendor Prefixes
  • Working with Non-compliant Browsers
  • IE Filtering Using Conditional Comments
  • Client Education With Progressive Enhancement
  • Managing The Client's Expectations

CSS3 Speech Bubbles

  • Managing Long Text
  • Graphic Effects With Sans Graphics
  • Rounding Corners
  • Adding the Bubble's Tail
  • Semitransparent Backgrounds Using RGBA or HSLA
  • Adding Image-free Gradients
  • Applying Image-free Drop Shadows
  • Applying Image-free Text Shadows
  • Transforming Content With Avatars
  • What are CSS3 Transforms?
  • Rotating An Avatar

CSS3 Notebook Paper

  • Beyond the Basic Background
  • Scaling the Background Image
  • Multiple Background Images for a Single Element
  • Applying a Graphic Border Image
  • Applying a Drop Shadow
  • Unique Font Embedding
  • Using @font-face to Embed Fonts
  • Choosing A Font
  • Converting Fonts

Styling Images and Links by Type

  • Understanding Attribute Selectors
  • Indicating File types with Dynamically Added Icons
  • Alternative Icon Ideas
  • Styling Full-size Photos and Thumbnails
  • Understanding the Troubles with Classes
  • Using Attribute Selectors to Target by Type

Using Pseudo-classes to Improve Efficiency

  • Target Specific Elements Without Using IDs or Classes
  • New Structural Pseudo-classes
  • Alternating Colors
  • Random Rotation of Images
  • Dynamically Highlighting Page Sections
  • The CSS3 :target Pseudo-class
  • Adding a Table of Contents
  • Changing Background Colour
  • Animating with Pure CSS

Different Design for Different Screen Sizes

  • Understanding Media Queries
  • Change Layout for Various Screen Sizes
  • Changing Horizontal Nav Bar to Vertical Menu
  • Text in Multi-columns
  • Change Layout for Small Screens
  • Change Layout for Mobile Devices
  • Understanding Device Width
  • Images on High-resolution Displays
  • Viewpoint Meta Tag
  • Working with Non-supporting Browsers

Flexing your Layouts

  • Create a Multi-column Layout Without Positioning and Floats
  • Making Block Content Flex
  • Working with Columns
  • Reordering Columns
  • Equal Height Columns
  • Horizontal and Vertical Centering
  • Create Flexible Form Layout
  • Static Footers
  • Flexible Box Model Alternatives
  • The CSS box-sizing Property
  • Future Layout Systems

Need Assistance

    • Send Email
Message Box Title
Warning Icon Information Icon

OK
1300 937 782 Contact us