Advanced CSS

Course Description

Now is a great time to reappraise your CSS knowledge as there have been some dramatic improvements in CSS which are now supported by the majority of your user's browsers. If you think you know CSS, here is your opportunity to confirm that you are up to date with the current state of the technology and to have a glimpse at what is coming down the track. This is a hands-on course where you will get to try out advanced and upcoming features of CSS in a classroom environment to unleash the possibilities that CSS offers.
3 days
Contact us for pricing
 

Prerequisites

This course is not an introduction so some knowledge of HTML and CSS is expected. We will be using some javascript (jquery) to handle events but a knowledge of javascript is not necessary.

If you are planning on targeting Internet Explorer then this course is probably not for you.

Platform

CSS is used by all web development stacks and we can customise this course to match your environment. Whether you are working with pure HTML and CSS, PHP, Java, Node.js, C# or Angular we can run the course to match your technology stack. If you are using something different let us know and we should be able to match your environment.

Advanced CSS Selectors

CSS level 3 selectors introduce lots of new ways of selecting elements on a page, we can use these to automatically style elements based on a number of criteria.
Elements
Attributes
Pseudo classes
Pseudo elements
CSS level 4 selectors

CSS Features You Might Have Missed

CSS variables.
CSS calculations.
CSS resets.
Gradient fills.
Rounded corners and shadows.
Outline text.
Knockout text.
Size units, in particular vh and vw.
Color functions.
Unset.
Vendor prefixes and auto-prefixer.

Scalable Maintainable CSS

Inheritance v's Cascade.
Understanding specificity, why specificity is important in a large project.
Doing specificity calculations.
!important.
Naming Conventions, what problems does a good naming convention help to solve?
Some Naming Conventions:
- Object Oriented CSS (OOCSS).
- Scalable Modular Architecture for CSS (SMACSS).
- Enduring CSS.
- BEM (Block Element Modifier).
Recommendations.

CSS Preprocessors (LESS and SASS )

Core features.
Advanced features.
Mixins versus Extends.
Functions and function parameters
Guards (conditionals).
Loops.

CSS Animations

Options for animation blink, java applets, flash, silverlight, javascript, jquery, animated gifs, css, svg.
Transitions.
Animations.
Which CSS properties are animatable.
Timing Functions.
Associated Javascript events (transitionend, animationend)
Triggering animations.
Animation using a 3D transform.
Using CSS animation on SVG elements.
SVG animation.

SVG & CSS

What are SVG images and what are the pros and cons of using them.
Where can I get SVG images?
4 ways to add SVG to your webpage, pros and cons of each.
Styling individual pieces of svg
Fonts, creating a SVG font and using it in your page.
Attaching Javascript events to SVG elements.
Using SVG to make non-rectangular UI elements.
Animating a line drawing using stroke dash offset.
Animating multiple SVG elements independently.

CSS Layouts

Traditional layout using float.
Responsive layouts.
Reactive layouts, using media queries.
Multi column layout
Flexbox layout.
Using flexbox to achieve 6 common layout requirements.
Introduction to CSS Grid Layout
Advanced CSS Grid examples

Upcoming CSS

Where can I find out about upcoming features?
Determining browser support for CSS features.
Navigating the w3.org documentation.
Trying out new features (Chrome Canary).
Shapes.
Clip-paths and Masks.

CSS Coding Standard Suggestions

We conclude the course with a list of some CSS coding standard suggestions to initiate a discussion as to what might be appropriate for your team.
CSSLESSCSS3SASSSVGAdvanced CSSModern Web DevelopmentWeb ProgrammingWeb DevelopmentFront End Web DevelopmentFullstack Web Development