Events  Deals  Jobs  NFT NYC 2024 
    Sign in  
 
 
What's New in HTML & CSS: Gradients, Transitions, Animations & more!
Mon, Oct 27, 2014 @ 09:00 AM   $650   Noble Desktop, 594 Broadway, Ste 1202
 
     
 
 
              

      
 
Sign up for our awesome New York
Tech Events weekly email newsletter.
   
LOCATION
EVENT DETAILS
What's New in HTML & CSS: Gradients, Transitions, Animations & More

HTML5 offers semantic ease-of-coding, and other powerful features. Similarly, CSS3 offers us more sophisticated properties and elegant solutions for styling and even animating elements.

Learn how to better structure your page content with semantic elements, how to include native audio and video content, and how to implement client-side validation of forms without JavaScript. Create drop shadows, text shadows, rounded corners, semi-transparent elements, and gradient backgrounds purely with CSS. New CSS Transforms, CSS Transitions, and CSS Keyframes let you produce simple animated effects without JavaScript or Flash (we don't cover full-blown ad banner style animation in this class though).

This advanced level course is ideal for people who have experience coding webpages but want to update their HTML and CSS skills and learn current best practices. Knowledge equivalent to our Web Development 2 class is highly recommended, as is some experience with hand coding.

SECTION 1

Intro to HTML5 Semantic Elements
Topics
HTML5's Streamlined Doctype
The Outline Algorithm
The Header, Nav, Aside & Footer Elements
Article vs. Section
The Main Element
Figure & Figcaption
Validation
Styling the New Elements
Topics
The Simplified Style Tag
The Child Selector
HTML5 Enabling Script (Shiv)
Topics
X-UA-Compatible Meta Tag
Using the HTML5 Enabling Script (Shiv) for Internet Explorer
Setting New Semantic Elements' Display to Block

SECTION 2

Setting up SolarFlare
Topics
HTML5 Sectioning Overview
Using the HTML5 Boilerplate
Using Divs for Presentation
Getting Started with CSS3
Topics
Rounded Corners with Border-Radius
Drop Shadows with Box-Shadow
The CSS3 Gradient Stack
Using the IE Filter for Gradients
CSS3 Multiple Backgrounds
Topics
Working with Multiple Backgrounds
Combining Gradients with Multiple Backgrounds
Using the HTML5 Boilerplate Class .oldie
Using the RGBA Color Model & Modernizr
Topics
Using RGBA for Backgrounds
Using Modernizr

SECTION 3

RGBA for Gradients & Shadows
Topics
RGBA for Gradients
RGBA for Box Shadow & Text Shadow
CSS Opacity Rollovers
Topics
Setting the Opacity of Elements
Changing Opacity on Hover
Refining Styles for Navigation
CSS Transitions
Topics
Transition-Property
Transition-Duration
Transition Shorthand & the Transition Stack
CSS Transforms & Transitions
Topics
The Scale Transform
The Rotation Transform
Modifying the Transform Origin
Transitioning Transforms
CSS Animations Using @Keyframe
Topics
Using CSS @Keyframes
Animation-Name
Animation-Duration
Animation-Timing-Function
Hail, Ceaser! A CSS Easing Animation Tool

SECTION 4

HTML5 Forms
Topics
The Placeholder Attribute
The Required Attribute
New Input Types: Email
Using Attribute Selectors
The Pattern Attribute & Regular Expressions
Client Side Validation-No JavaScript Necessary
Adding Rich Media: Audio
Topics
The Audio Element
Autoplay & Controls
The Source Attribute
MP3 vs. Ogg Vorbis
Using a JavaScript Polyfill for IE 8
Adding Rich Media: Video
Topics
The Video Element
Autoplay & Controls
The Source Attribute
Theora Video vs. H.264 Encoding
Using a JavaScript Polyfill for IE 8
 
 
 
 
© 2024 GarysGuide      About    Feedback    Press    Terms