In this CSS3 training course you will learn the functions of CSS3 and the extension to Sass and Less. In the course you start with development of styles and styles in various page elements. You will also learn to work with CSS3 animations for the development of attractive websites. At the end of the course you will learn the advanced functions of CSS3 and Sass and Less.
Result
After completing this course you are familiar with the possibilities of CSS3, Sass and Less.
Prerequisites
There is no specific knowledge required.
Target audience
Web Developer
Content
Developing with CSS3, Sass and Less
13 hours
Creating Styles with CSS3 and Styling Text
start the course
introduce CSS3 and demonstrate how styles can be applied to content
describe user agent stylesheets and override them with a CSS Reset
demonstrate how to use a rule set to apply a CSS style
describe how CSS styles are inherited and cascaded
describe how to implement inline CSS styles and discuss their drawbacks
implement internal CSS styles
reference external CSS style sheets
describe basic CSS selectors including the universal, type and id, and class selectors
group CSS selectors using child and sibling combinators
use CSS attribute selectors to apply styles based one or more of an element's attributes
describe CSS pseudo-classes, reasons for their use, benefits and drawbacks, and use pseudo-classes to apply styles
describe CSS pseudo-elements, reasons for their use, benefits and drawbacks, and use pseudo-elements to apply styles
modify the specificity of a CSS selector
use the CSS3 font face rule to apply a web font face
use CSS properties to style text
use CSS properties such as direction, text-align, text-indent, text-spacing, and word-spacing to position text
use CSS text decoration (including level 3 shorthand)
use CSS pseudo selectors to style the first letter or line of a paragraph
use CSS to style lists
use CSS to create custom bulleted lists
practice styling text with CSS3
Styling Page Elements using CSS3
start the course
use CSS to add a border to an element
use CSS to add rounded borders to an element
use CSS to add blurred edges to an element
use CSS to add elliptical corners to an element
use CSS to add a drop shadow to an element
contrast display and visibility in CSS and use these features
use CSS to manipulate color
contrast and use CSS opacity or RGBA settings to make an element transparent
use CSS to set a background image or color for a page or other element
use CSS to apply linear gradients to an element
use CSS to apply radial gradients to an element
use CSS3 to create gradient text
configuring spans with CSS
style divs with CSS
use basic CSS to draw shapes such as triangles
use CSS to change the mouse cursor
use CSS to style tables
use CSS to apply cell and table borders and to remove white spaces between cells when borders are applied
use CSS to specify alternate table row colors
use CSS to change a row color when hovered over
use CSS properties to format spreadsheet data in tabular format
use CSS to display calendars
use CSS to style different elements on a html page
Navigation Elements and Animations with CSS3
start the course
use CSS to style links
use CSS to style a list to generate a vertical and horizontal nav bar and display descriptive information
use CSS to style nested lists for multilevel navigation
configure tabbed navigation using CSS
use lists and CSS to create flyout menus
use CSS to configure drop-down menus
use CSS to style a site map
use CSS to apply basic rollover effects to navigation options
use CSS to apply rollover images with an image sprite in navigation elements
use 2-D transforms of CSS to manipulate elements
use 3-D transforms of CSS to manipulate elements
use CSS to apply transitions to elements
use simple CSS keyframe animations
use CSS to apply basic animations to elements
apply advanced CSS animation techniques
practice creating an animated menu using CSS3
Forms, Positioning, and Layout with CSS3
start the course
use CSS to style a form
use CSS to style Submit buttons
insert images in form fields using CSS
use CSS to highlight fields when they gain focus
use CSS to style form fields according to the validity of their input
use CSS to group related fields in a form
use CSS to style a range slider on a form
use CSS to style a short form as a paragraph with inline fields
use CSS to modify form input
contrast how block and inline elements display
use CSS to implement static and fixed positioning of elements
contrast fixed and relative positioning and use CSS to implement relative positioning of elements
specify the stacking order with z-index
contrast the CSS margin and padding properties
use CSS to wrap text around an element
use CSS to overlap text on an image
use CSS to implement floating elements in your layout
use the CSS clear property to improve presentation of other elements after floated elements
overlap divs using CSS3
use CSS margin auto value to center a layout horizontally and auto value, absolute value and declared height for vertical centering
use CSS techniques to create a thumbnails gallery
use CSS to create a column layout
use CSS box model to create a layout
use the CSS box-sizing property
practice working with layouts using CSS3
Advanced Options, Responsive Web Design, and Management with CSS3
start the course
use the CSS3 FlexBox for layout
outline the support for CSS3 grid and use it for layout
outline the support for CSS3 regions and use them for layout
outline the support for CSS3 exclusions and use them for layout
outline support for and implement the CSS3 Shapes specification
outline support for and implement the CSS3 Filters specification
outline support for and implement CSS3 masking
outline support for and implement CSS3 clipping and blending
use CSS media queries to tailor content for specific devices
use CSS to display content correctly on multiple screen sizes
use Modernizr to detect CSS3 feature support
use CSS to configure responsive images
use CSS to resize elements dynamically
use CSS3 to generate content
access an element's CSS styles with JavaScript
change an element's CSS styles with JavaScript
access CSS style sheets with JavaScript
add a CSS style sheet with JavaScript
remove a CSS style with JavaScript
enable or disable a CSS style sheet with JavaScript
manipulate CSS with jQuery
implement advanced experimental CSS3 features and a responsive web design
Extending CSS3 with Sass and Less
start the course
outline the features of Sass and how to install and use it, outline Sass syntax and create a Sass stylesheet
outline the features of SassScript - variables, data types, operations, and use the interactive shell to work with SassScript
work with nested CSS rules and reference parent selectors using Sass
work with nested CSS properties in Sass
use the @import rule in Sass, use partials and nested @imports
use nested @media queries
use the @extend directive in Sass
use the @extend directive for multiple and chained extends
use control directives in Sass
use the @at-root directive in Sass
use the @warn and @debug directives in Sass
use @mixin in Sass
work with functions in Sass
use Sass to extend CSS3
describe Less, and how it can be used; install and use Less
work with variables in Less
work with the Extend pseudo-class in Less
work with mixins in Less
pass rulesets to mixins in Less
use recursive mixins to create loop structures in Less
work with mixin guards and CSS guards in Less
work with import directives in Less
use & to reference parent selectors and to generate selectors in a list
use Less to extend CSS3
Course options
We offer several optional training products to enhance your learning experience. If you are planning to use our training course in preperation for an official exam then whe highly recommend using these optional training products to ensure an optimal learning experience. Sometimes there is only a practice exam or/and practice lab available.
Optional practice exam (trial exam)
To supplement this training course you may add a special practice exam. This practice exam comprises a number of trial exams which are very similar to the real exam, both in terms of form and content. This is the ultimate way to test whether you are ready for the exam.
Optional practice lab
To supplement this training course you may add a special practice lab. You perform the tasks on real hardware and/or software applicable to your Lab. The labs are fully hosted in our cloud. The only thing you need to use our practice labs is a web browser. In the LiveLab environment you will find exercises which you can start immediately. Thelab enviromentconsist of completenetworks containing for example,clients, servers,etc. This is the ultimate way to gain extensive hands-on experience.
Sign In
WHY_ICTTRAININGEN
Via ons opleidingsconcept bespaar je tot 80% op trainingen
Start met leren wanneer je wilt. Je bepaalt zelf het gewenste tempo
Spar met medecursisten en profileer je als autoriteit in je vakgebied.
Ontvang na succesvolle afronding van je cursus het officiële certificaat van deelname van Icttrainingen.nl
Krijg inzicht in uitgebreide voortgangsinformatie van jezelf of je medewerkers
Kennis opdoen met interactieve e-learning en uitgebreide praktijkopdrachten door gecertificeerde docenten
Once we have processed your order and payment, we will give you access to your courses. If you still have any questions about our ordering process, please refer to the button below.
Unlimited access to our IT professionals community
Study advice
Our consultants are here for you to advice about your study career and options
Study materials
Certified teachers with in depth knowledge about the subject.
Service
World's best service
Platform
Na bestelling van je training krijg je toegang tot ons innovatieve leerplatform. Hier vind je al je gekochte (of gevolgde) trainingen, kan je eventueel cursisten aanmaken en krijg je toegang tot uitgebreide voortgangsinformatie.
