CSS

Duration : 1 Day

CSS Stands for Cascading Style Sheets, CSS is a language used for connecting the formatting of a document written in a markup language. Even though most frequently used to set the pictorial style of web pages and user interfaces written in HTML and XHTML, the language can be useful to any XML document, as well as plain XML, SVG and XUL, and is appropriate to rendering in communication, or on other broadcasting. Along with HTML and JavaScript, CSS is a basis technology used by most websites to design visually good looking web pages, end user interfaces for web applications, and end user interfaces for many mobile applications.

CSS3 training presents new client-side web designers and developers to CSS3, and responsive Web Design. Attendees absorb the CSS skills needed to make professional looking web pages that will render on any screen, from phone to tablet to desktop. CSS (Cascading Style Sheets) consist of a set of organizing rules that we use to control the layout and appearance of the content on a web page. CSS is that you can write all the CSS rules in one document and hold onto that document separate from the HTML content and link the two together. CSS3 offers some new and thrilling features to enhance the appearance of the website. CSS3 makes it easier for the designers that will make the guests go crazy over them to be applied.

This Advanced CSS3 Professional Learning program you will allow to learn basic JavaScript coding and use HTML5 APIs (application programming interfaces) to extend the functionality of Web pages with modern features such as geolocation, drag-and-drop, and canvas and offline Web applications. In addition students will create Web pages using the HTML5 building tags, embed video and audio and develop cross-browser user-input forms. They will study techniques for code validation and testing, inline form field validation and mobile design for browsers and apps, including Responsive Web Design (RWD). They will use CSS3 in the direction of position and format content and to create effects such as transformations, transitions and animation.

Evanta Technologies offers modified and private CSS3 online training at your office or at our locations. Whether or not you would like preliminary CSS3 course, our CSS3 can assist you get the skills you need quickly and effectively.

Cascading Style Sheets (CSS) could be a language used to separate the content of a page from the style specifications to reduce repetitive code, provide a homogeneous look and feel across the pages of web site, and to create website updates and maintenance quick and straightforward. Style can include elements like colors, fonts, improved accessibility, and page layout while not having to use tables.

CSS also makes it straightforward to tailor the format of your information to different devices visiting your website, an approach referred to as responsive Web Design. CSS3 standards are maintained by the World Wide Web Consortium (W3C). Evanta Technologies CSS3 classes, covering all the far-flung complete CSS3, can get you started applying Cascading vogue Sheets to enhance the appearance of your web pages and teach you customs to centralize style specifications for your entire web site and across devices. Request rating for CSS coaching for your team.

Evanta Technologies courses are delivered as private, customized, on-site training at our client’s locations worldwide for teams of three or more attendees and are custom tailored to their specific needs. Please visit our client list to see organizations for which we’ve delivered personal in-house training. These courses may also be delivered as live, private online classes for groups that are geographically distributed or wish to save lots of on the instructor’s or student’s; travel expenses. To receive a custom-made proposal and worth quote for private training at your website or online, please contact US.

 

Day -  1:
INTRODUCING CSS3 :
  • What CSS3 Is and How It Came to Be
  • A Brief History of CSS3
  • CSS3 Is Modular
  • Module Status and the Recommendation Process
  • CSS3 Is Not HTML5
  • Let’s Get Started: Introducing the Syntax
  • Browser-Specific Prefixes
  • Future-Proofing Experimental CSS
  • Getting Started
SELECTORS :
  • Attribute Selectors
  • New Attribute Selectors in CSS3
  • Beginning Substring Attribute Value Selector
  • Ending Substring Attribute Value Selector
  • Arbitrary Substring Attribute Value Selector
  • Multiple Attribute Selectors
  • The General Sibling Combinator
  • Selectors: Browser Support
PSEUDO-CLASSES AND PSEUDO-ELEMENTS :
  • Structural Pseudo-classes
  • The nth-* Pseudo-classes
  • first-of-type, last-child, and last-of-type
  • only-child and only-of-type
  • Other Pseudo-classes
  • target
  • empty
  • root
  • not
  • UI Element States
  • Pseudo-elements
  • The selection pseudo-element
  • DOM and Attribute Selectors: Browser Support
WEB FONTS :
  • The @font-face Rule
  • Defining Different Faces
  • True vs Artificial Font Faces
  • A “Bulletproof” @font-face Syntax
  • Using Local Fonts
  • Font Formats
  • The Final “Bulletproof” Syntax
  • The Fontspring Bulletproof Syntax
  • Licensing Fonts for Web Use
  • A Real-World Web Fonts Example
  • More Font Properties
  • font-size-adjust
  • font-stretch
  • OpenType Features
  • Web Fonts: Browser Support
TEXT EFFECTS AND TYPOGRAPHIC STYLES :
  • Understanding Axes and Coordinates
  • Applying Dimensional Effects: text-shadow
  • Multiple Shadows
  • Letterpress Effect
  • Adding Definition to Text: text-outline and text-stroke
  • More Text Properties
  • Restricting Overflow
  • Resizing Elements
  • Aligning Text
  • Wrapping Text
  • Setting Text Rendering Options
  • Applying Punctuation Properties
  • Text Effects: Browser Support
MULTIPLE COLUMNS :
  • Column Layout Methods
  • Prescriptive Columns: column-count
  • Dynamic Columns: column-width
  • A Note on Readability
  • Different Distribution Methods in Firefox and WebKit
  • Combining column-count and column-width
  • Column Gaps and Rules
  • Containing Elements within Columns
  • Elements Spanning Multiple Columns
  • Elements Breaking over Multiple Columns
  • Multiple Columns: Browser Support
  • Creating a responsive web page with Multipage columns
BACKGROUND IMAGES AND OTHER DECORATIVE PROPERTIES :
  • Background Images
  • Multiple Background Images
  • Background Size
  • Background Clip and Origin
  • background-repeat
  • Background Image Clipping
  • Image Masks
  • Background Images: Browser Support
BORDER AND BOX EFFECTS :
  • Giving Your Borders Rounded Corners
  • border-radius Shorthand
  • Differences in Implementation Across Browsers
  • Using Images for Borders
  • Multicolored Borders
  • Adding Drop Shadows
  • Border and Box Effects: Browser Support
COLOR AND OPACITY :
  • Setting Transparency with the opacity Property
  • New and Extended Color Values
  • The Alpha Channel
  • Hue, Saturation, Lightness
  • HSLA
  • The Color Variable: currentColor
  • Matching the Operating System’s Appearance
  • Color and Opacity: Browser Support
GRADIENTS :
  • Linear Gradients
  • Linear Gradients in Firefox
  • Linear Gradients in WebKit
  • Using Linear Gradients
  • Adding Extra color-stop Values
  • Radial Gradients
  • Radial Gradients in Firefox
  • Radial Gradients in WebKit
  • Using Radial Gradients
  • Multiple color-stop Values
  • The WebKit Advantage
  • Multiple Gradients
  • Repeating Gradients in Firefox
  • Repeating Linear Gradients
  • Repeating Radial Gradients
  • Gradients: Browser Support
2D TRANSFORMATIONS :
  • The transform Property
  • rotate
  • Position in Document Flow
  • transform-origin
  • translate
  • skew
  • scale
  • Multiple Transformations
  • Transforming Elements with Matrices
  • Reflections with WebKit
  • 2D Transformations: Browser Support
  • TRANSITIONS AND ANIMATIONS
  • Transitions
  • Property
  • Duration
  • Timing Function
  • Delay
  • Shorthand
  • The Complete Transition Example
  • Multiple Transitions
  • Triggers
  • More Complex Animations
  • Key Frames
  • Animation Properties
  • The Complete Animations Example
  • Multiple Animations
  • Transitions and Animations: Browser Support
3D TRANSFORMATIONS :
  • 3D Elements in CSS
  • Transform Style
  • The Transformation Functions
  • Rotation Around an Axis
  • Translation Along the Axis
  • Scaling
  • The Transformation Matrix
  • Perspective
  • The perspective and perspective-origin Properties
  • The Transformation Origin
  • Showing or Hiding the Backface
  • 3D Transformations: Browser Support
Working with CSS preprocessors LESS & SASS :
Why CSS is Painful:
  • Overview
  • The Color Problem
  • The Duplication Problem
  • The Cascade Problem
  • The Calculation Problem
  • The Importing Problem
  • Summary
LESS is More :
  • Introducing LESS
  • less.js
  • Less on the Server
  • dotless
  • LESS Basics
  • Hello World LESS
  • Using Variables and Operations
  • Mixins
  • Creating a Mixin
  • Nested Rules
  • Refactoring Rules
  • Other Features
  • Using namespaces and scoping
  • Summary
Using SASS :
  • Introducing SASS
  • SASS on the Server
  • Using SassAndCoffee
  • Variables
  • Using Variables
  • Rules
  • Refactoring Rules
  • @import
  • Importing SASS and CSS
  • @extend
  • Inheritance in Rules
  • @mixin
  • Creating Mixins
  • @function
  • Creating Functions
  • Control Directives
  • Demo  Using @if, @where and @for
  • Summary
Responsive Web Design – Basics :
  • Viewport meta tag and CSS  media queries
  • Limitations of responsive web design
  • Responsive image with picture element
  • Learn more about HTML  and CSS
  • Introduction to RWD frameworks
  • Why use frameworks?
  • Skeleton
  • Bootstrap
  • Zurb Foundation
  • Who is using these frameworks?
  • Tools required to build responsive websites
  • Web browsers
  • Code editors
  • Responsive bookmarklets
MEDIA QUERIES :
  • The Advantages of Media Queries
  • Syntax
  • Media Features
  • Width and Height
  • Device Width and Height
  • Using Media Queries in the Real World
  • Orientation
  • Aspect Ratio
  • Pixel Ratio
  • Multiple Media Features
  • Mozilla-Specific Media Features
  • Media Queries: Browser Support
FLEXIBLE BOX LAYOUT mechanism:
  • Triggering the Flexible Box Layout
  • The box Value in Firefox
  • Inline Boxes
  • Making the Boxes Flexible
  • Unequal Ratios
  • Zero Values and Firefox Layouts
  • Grouping Flexible Boxes
  • Changing Orientation
  • Changing the Order of Flexible Boxes
  • Reversing the Order
  • Further Control over Ordering
  • Alignment
  • Same-Axis Alignment
  • Multiple Rows or Columns
  • Cross-Browser Flex Box with JavaScript
  • Stop the Presses: New Syntax
  • Flexible Box Layout: Browser Support
  • Creating a responsive web page with Flex-Box layout
TEMPLATE LAYOUT mechanism – Using Prolyfill medium :
  • Setting Up the JavaScript
  • Using position and display to Create Rows
  • Multiple Rows
  • Slots and the ::slot() Pseudo-element
  • Creating Empty Slots
  • Setting Height and Width on Rows and Columns
  • Width Keyword Values
  • Setting Both Row Height and Column Width
  • Default Content: The @ Sign
  • Template Layout: Browser Support
Introduction to Grid Systems & Frameworks :
  • Introduction to Grid Systems What is a Grid-Based Design?
  • Popular Grid-Based Systems
Responsive Layouts  with Grid Systems in 960 GS| Unsemantec | Bootstrap |Zurb Foundation, Fluid Grid system & Skeleton
  • Coding With the 960 Grid System
  • Exploring Unsemantic
  • Using Unsemantic
  • Twitter Bootstrap
  • Coding Columns in Bootstrap
  • The Bootstrap Fluid Grid
  • Foundation
  • Coding Columns in Foundation
  • Skeleton
  • Grid system in Skeleton
 Create Your Own Responsive  Grid System from Scratch ? :
  • Why Create Your Own System ?
  • Pros &Cons
  • HTML for a Four-Column Layout
  • Calculating Widths
  • Resetting Styles
  • CSS for a Four-Column Layout
  • Creating a Three-Column Layout

Reviews

No reviews

Post Review

Name
Email
Review Title
Rating
Review Content
View All Categories

Quick Enquiry

Technology Portfolio