-
₹800
-
Duration: 12 Weeks
-
Delivery mode: Online
-
Group size: 11 - 20
-
Instruction language:
English
-
Certificate provided:
Yes
Introduction to CSS3
o What Is CSS3?
o The History of CSS
o How to Add CSS: Inline Styles, Head Styles, External Files
o General Syntax: Attributes, Selectors, Cascades, etc.
o Current State of Browser Support for CSS3
o How We’ll Check This: caniuse.com, IETester, tools.css3.info
• Selectors, Pseudo Classes, and Pseudo Elements
o E[foo^=”bar”], E[foo$=”bar”], etc.
o :nth-child, :root, etc.
o :before, :after, ::selection
• Fonts and Text Effect
o @font-face
o Using Web Fonts: Google, Typekit, etc.
o Font Properties
o Text Shadow, Text Outline, Text Stroke, etc.
o Word Wrapping
• CSS Units/Sizing: px, pt, em, rem
• Color, Gradients, Background Images, and Masks
o Opacity
o New Color Names
o Nonimage Gradients
o Multiple Background Images
o Background-size, Background-origin, Background-clip
o Image Masks
• Border and Box Effects
o Rounded Corners
o Resizing
o Outline Offsets
o Appearance
o Image Borders
o Box Shadow
• SAAS Introduction
o SAAS Intro
o SAAS variables
o Nesting,import,mixin,extend
o Function –String,List,Map,Selector
o block element modifier (BEM) convention
• Working with Colors
o Background
o Multiple Background
o Colors
▪ RGB and RGBA
▪ HSL and HSLA
▪ Alpha factor
▪ Opacity & Transparency
o Using currentColor
o Working with gradients
• Layout
o Introduction
o Positioning
o Box Layout
o Table Layout
o Vendor Prefixes
o Working with Columns
• Layout: Columns, Flexible Box
o Column-count, Column-gap, Column-rule
o Multiple Column Layouts
o Gaps between Columns
o Box-orient, Box-pack, Box-align, Box-flex, etc.
o Display: box
o Grouping and Changing Orientation
o Alignment
• Vendor Prefixes
o Current status of -moz, -o, etc.
o When and Why to Use
• Media Queries
o Targeting Device Capabilities: Width, Screen Size, Color Depth, etc.
o Building Responsive Sites: Implications for Mobile
• Implementing CSS3 in the “Real World”
o Modernizr
o HTML5 Shims
o jQuery
o LESS, SASS, and Other CSS Preprocessors
o CSS Grid Systems
o CSS Frameworks
• Transforms, Transitions, and Animations
o translate(), rotate(), etc.
o 3D: rotateX(), rotateY()
o changing, for example, the width of a div on hover (without JS)
o animations: @keyframes, animation