CSS3, Sass and Less E-Learning Training

Cascading Style Sheets, ook wel CSS genoemd, zijn een verzameling opmaakconventies waarmee u het uiterlijk van een website kunt standaardiseren en verbeteren. Door CSS te implementeren kunt u de presentatie van uw website volledig scheiden van de inhoud en de site een consistente uitstraling geven. CSS-specificaties worden gegenereerd door het World Wide Web Consortium (W3C) en de nieuwste versie is CSS3. Sommige specificaties worden in verschillende mate overgenomen door verschillende browsers, dus cross-browserondersteuning is een belangrijke overweging bij CSS3. CSS wordt steeds flexibeler en krachtiger, maar beperkingen in functionaliteit kunnen worden overwonnen door het gebruik van pre-processors zoals Sass en Less. In dit pad wordt de implementatie van CSS3-specificaties gedemonstreerd en wordt besproken hoe CSS kan worden uitgebreid met Sass en Less.

Cursusinhoud

Introducing CSS

Course: 27 Minutes

• Course Introduction
• Introduction to CSS
• User Agent Style Sheets and CSS Reset
• Creating Styles
• Inheritance and Cascade
• Inline Styles
• Internal Styles
• External Styles

Working with Selectors

Course: 25 Minutes

• Selectors
• Grouping Selectors with Combinators
• Attribute Selectors
• Pseudo-Classes
• Pseudo-Elements
• Specificity

Text Styling

Course: 21 Minutes

• Working with Fonts
• Styling Text
• Positioning Text
• Text Decoration
• Styling the First Letter or Line

Working with Lists

Course: 9 Minutes

• Styling Lists
• Custom Bulleted Lists

Practice: Styling Text and Lists with CSS

Course: 5 Minutes

• Exercise: Style Text and Lists with CSS3 (CE)5

Working with Elements

Course: 29 Minutes

• Course Introduction
• Adding Borders to an Element
• Adding Rounded Borders to an Element
• Adding Blurred Edges to an Element
• Adding Elliptical Corners to an Element
• Adding Drop Shadows to an Element

Color and Page Elements

Course: 29 Minutes

• CSS and Color
• Making an Element Transparent
• Setting a Background Image or Color for an Element
• Applying Linear Gradients to an Element
• Applying Radial Gradients to an Element
• Creating Gradient Text

Spans, Divs, Shapes and the Cursor

Course: 19 Minutes

• Configuring Spans with CSS3
• Styling Divs with CSS
• Drawing Shapes with Basic CSS
• Changing the Mouse Cursor

Tabular Data

Course: 28 Minutes

• Styling Tables
• Configuring Borders in Tables
• Alternating Table Row Colors
• Highlighting Selected Table Rows
• Displaying Spreadsheets as Tabular Data
• Displaying Calendar Data

Practice: Styling Page Elements

Course: 5 Minutes

• Exercise: Using CSS to Style Page Elements

Navigation

Course: 47 Minutes

• Course Introduction
• Styling Links
• Styling Lists as Nav Bars
• Configuring Multilevel Navigation
• Configuring Tabbed Navigation
• Creating Flyout Menus
• Configuring Drop-Down Menus
• Styling a Site Map
• Applying Rollover Effects
• Applying Rollover Images

Transitions and Transforms

Course: 10 Minutes

• Using 2-D Transforms
• Using 3-D Transforms

Animations

Course: 17 Minutes

• Element Transitions
• Introduction to Keyframe Animations
• Animating Multiple Properties with Keyframes
• Advanced Animation Techniques

Practice: Creating an Animated Menu

Course: 5 Minutes

• Exercise: Create an Animated Menu

Working with Forms

Course: 45 Minutes

• Course Introduction
• Styling a Form
• Styling Submit Buttons
• Inserting Images in Form Fields
• Highlighting Form Fields with Focus
• Styling Fields by Validity
• Grouping Related Fields
• Styling a Form's Range Slider
• Styling a Form as a Paragraph with Inline Fields
• Modifying Form Input

Positioning

Course: 50 Minutes

• Block and Inline Elements
• Static and Fixed Positioning
• Static and Relative Positioning
• Stacking Order with z-Index
• Margins and Padding
• Positioning Text around an Elemenz
• Overlapping Text on an Image
• Floating Elements
• Clearing Block-Level Elements
• Overlapping Divs
• Centering a Layout
• Creating a Thumbnails Gallery

CSS Layout

Course: 15 Minutes

• Generating Columns
• The Box Model
• Sizing Boxes

Practice: Working with Layouts using CSS3

Course: 5 Minutes

• Exercise: Work with Layouts using CSS3 (CE)

Advanced Layout Models

Course: 18 Minutes

• Course Introduction
• Using the Flexible Box Model
• Using the Grid Box
• Using Regions
• Using Exclusions

Advanced Graphics Features

Course: 17 Minutes

• Using Shapes
• Using CSS Filters
• Using CSS Masking
• Compositing and Blending

Responsive Web Design

Course: 26 Minutes

• Media Queries
• Working with Multiple Screen Sizes
• Using Modernizr
• Making Images Responsive
• Resizing Elements Dynamically
• Generating Content using CSS

Managing CSS with Scripts

Course: 37 Minutes

• Accessing an Element's CSS Styles with JavaScript
• Changing an Element's CSS Styles with JavaScript
• Accessing CSS Style Sheets with JavaScript
• Adding a CSS Style Sheet with JavaScript
• Removing a CSS Style with JavaScript
• Enabling or Disabling a CSS Style Sheet with JavaScript
• Manipulating CSS with jQuery

Practice: Responsive Design and Style Management

Course: 5 Minutes

• Exercise: Create Responsive Designs and Manage CSS

Introduction to Sass

Course: 13 Minutes

• Course Introduction
• Getting Started with Sass
• Using SassScript

CSS Extensions in Sass

Course: 7 Minutes

• Nested CSS Rules in Sass
• Nested CSS Properties in Sass

Using Sass @-Rules and Directives

Course: 27 Minutes

• Using the @import Rule in Sass
• Using the @media Directive in Sass
• Using the @extend Directive in Sass
• Extending Complex Selectors in Sass
• Using Control Directives in Sass
• Using the @at-root Directive in Sass
• Using the @warn and @debug Directives in Sass

Mixins and Functions in Sass

Course: 9 Minutes

• Working with Mixins
• Working with Functions

Practice: Working with Sass

Course: 6 Minutes

• Exercise: Extend CSS3 with Sass

Using the Less CSS Pre-processor

Course: 11 Minutes

• Getting Started with Less
• Working with Variables in Less
• Working with the Extend pseudo-class in Less

Mixins in Less

Course: 13 Minutes

• Working with Mixins in Less
• Passing Rulesets to Mixins in Less
• Working with Recursive Mixins in Less
• Working with Guards in Less

Import Directives and Selectors in Less

Course: 5 Minutes

• Working with Import Directives in Less
• Parent Selectors and Combined Selectors

Practice: Extending CSS3 with Less

Course: 6 Minutes

• Exercise: Extend CSS3 with Less