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.
Cost: Price on application
Duration: 3 days
This course is not available as part of our public schedule but can be provided on a customised client specific basis.
If you are planning on targeting Internet Explorer or Microsoft Edge then this course is probably not for you.
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.
CSS level 4 selectors
CSS Features You Might Have Missed:
Rounded corners and shadows.
Size units, in particular vh and vw.
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.
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).
CSS Preprocessors (LESS and SASS ):
Mixins versus Extends.
Functions and function parameters
Which CSS properties are animatable.
Animation using a 3D transform.
Using CSS animation on SVG elements.
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.
Using SVG to make non-rectangular UI elements.
Animating a line drawing using stroke dash offset.
Animating multiple SVG elements independently.
Traditional layout using float.
Reactive layouts, using media queries.
Multi column layout
Using flexbox to achieve 6 common layout requirements.
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).
Clip-paths and Masks.
Introduction to CSS Grid layout.
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.