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.
Contact us for pricing
If you are planning on targeting Internet Explorer then this course is probably not for you.
PlatformCSS 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 SelectorsCSS 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 MissedCSS variables.
Rounded corners and shadows.
Size units, in particular vh and vw.
Vendor prefixes and auto-prefixer.
Scalable Maintainable CSSInheritance 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 )Core features.
Mixins versus Extends.
Functions and function parameters
Which CSS properties are animatable.
Animation using a 3D transform.
Using CSS animation on SVG elements.
SVG & CSSWhat 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.
CSS LayoutsTraditional layout using float.
Reactive layouts, using media queries.
Multi column layout
Using flexbox to achieve 6 common layout requirements.
Introduction to CSS Grid Layout
Advanced CSS Grid examples
Upcoming CSSWhere 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.
CSS Coding Standard SuggestionsWe 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