Choose your language:

France
Germany
Hong Kong

India
Ireland
Japan
Malaysia
Netherlands
New Zealand

Singapore

Sweden
United Kingdom
United States
Course Code

IN1403

Duration

3 Days

Previous work with front-end technologies, CSS, HTML, and JavaScript basics is recommended.

This course provides a formal exploration of Cascading Style Sheets, CSS. CSS represents the only technology available for rendering web content within a browser. This course provides basics through intermediate and even advanced techniques when working with CSS. After laying down the formal rules, and providing tips and techniques for creating cross-browser based solutions, it explores newer features such as CSS3 and emphasizes proper progressive enhancement principles. The course concludes with both lecture and hands-on exposure to modern CSS pre-processing frameworks, such as SASS, and popular CSS frameworks such as Bootstrap. Consideration for responsive solutions and mobile application development is included.

This course is designed for front-end developers and developers interested in the latest browser-based, front-end APIs.

 

Web Standards and Introduction
CSS History
Browser Support For CSS
Quirks Mode
Standards Mode
DTDs and Browser DOCTYPE Switching
Guides for Selecting DOCTYPEs
Using the JavaScript Console
Layered Semantic Markup
Semantic HTML
Progressive Enhancement
Browser Rendering Modes
Cross-Browser Development
Firebug Overview
Chrome Developer Tools
IE Developer Tools
Block vs. Inline Elements
Replaced and Non-replaced Elements

CSS Basics
CSS Rules
Inline Rules
Embedded Styles
Linked Style Sheets
Working with New and Old Browsers
Creating a Common Starting Point with Browsers
A Template CSS
Selectors
Descendent Groupings
Child/Sibling Selectors
Classes
ID Selectors
Contextual Selectors
Attribute Selectors
Pseudo-Elements
Pseudo-Classes
Determining Cascade Order
Specificities
CSS Inheritance
!important
General CSS Rule Layouts
IE and CSS incompatibilities

CSS Design: Fonts, Colors, Backgrounds
Numbers and Units
Specifying Colors
Font Properties
Text Properties
Background Properties
Creating Lists
Styling Lists
List Properties

CSS Box Model, Positioning, Visual Formatting
The CSS Box Model
Setting Borders and Margins
Special Styles and Colors
Shorthand Notations
Collapsing Margins
Box Paddings
IE vs. W3C Box Model Differences
IE Box Model Hacks
Height and Widths
Block vs. Inline Styles
Absolute Positioning
Relative Positioning
Floating Elements
Three-Column Layouts
Fixed Positioning
Clearing Elements
Two-Column Layouts
Using Rounded Corners on Layouts
Drop Shadows on Text
Drop Shadows on Images
Image Opacities

CSS3
New CSS3 Features
Cross-browser and Legacy Browser Support
CSS3 Selectors
New Color Support
Rounded Corners
Drop Shadows (Box and Text)
CSS3 Rules for Progressive Enhancement
Graceful Degradation
Borders and Images
Transitions
Animations
Transforms
Performance Enhancements

CSS Frameworks
Twitter Bootstrap for CSS
Bootstrap Base CSS for Text, Forms, Tables
SASS
Setting up a SASS environment
Using Nested Rules
Incorporating Variables and Mixins
SASS Inheritance

Responsive Design
RWD using the Presentation Layer
The Mobile First Philosophy
Understanding CSS Media Queries
CSS Grid Systems
Introducing ResponseJS
Send Us a Message
First Name
*
Last Name
*
Company
*
Email
*
Address Line 1
*
Address Line 2
City
*
*
Zip Code
Telephone
*
*
Choose one
*
Comments