Course: Developing with CSS3, Sass and Less
duration: 13 hours |
Language: English (US) |
access duration: 90 days |
Details
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
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. The lab enviromentconsist of complete networks 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
Orderproces
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.
read more about the order process
Een zakelijk account aanmaken
Wanneer u besteld namens uw bedrijf doet u er goed aan om aan zakelijk account bij ons aan te maken. Tijdens het registratieproces kunt u hiervoor kiezen. U heeft vervolgens de mogelijkheden om de bedrijfsgegevens in te voeren, een referentie en een afwijkend factuuradres toe te voegen.
Betaalmogelijkheden
U heeft bij ons diverse betaalmogelijkheden. Bij alle betaalopties ontvangt u sowieso een factuur na de bestelling. Gaat uw werkgever betalen, dan kiest u voor betaling per factuur.
Cursisten aanmaken
Als u een zakelijk account heeft aangemaakt dan heeft u de optie om cursisten/medewerkers aan te maken onder uw account. Als u dus meerdere trainingen koopt, kunt u cursisten aanmaken en deze vervolgens uitdelen aan uw collega’s. De cursisten krijgen een e-mail met inloggegevens wanneer zij worden aangemaakt en wanneer zij een training hebben gekregen.
Voortgangsinformatie
Met een zakelijk account bent u automatisch beheerder van uw organisatie en kunt u naast cursisten ook managers aanmaken. Beheerders en managers kunnen tevens voortgang inzien van alle cursisten binnen uw organisatie.
What is included?
Certificate of participation | Yes |
Monitor Progress | Yes |
Award Winning E-learning | Yes |
Mobile ready | Yes |
Sharing knowledge | 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.
FAQ
Niet gevonden wat je zocht? Bekijk alle vragen of neem contact op.