Course Content

Advanced CSS Techniques

1. Introduction

Course Overview Course Focus Course Topics How to Succeed

2. Item Positioning

What is positioning?Relative positioning Absolute positioning Challenge (relative, absolute positioning)Fixed positioning Sticky positioning Challenge (fixed, sticky positioning)Stacking order Challenge (stacking order)Content overflow

3. Transitions

What is transition?Select transition property Transition duration Transition time function Transition time delay Transition combination Challenge (add transition)

4. Animations

What is animation?Specify time of an animation Control animation play quantity and direction Manage animation state Animation composition Challenge (animation)

5. Transformations

What is transformation?Scaling Rotating Challenge (scaling, rotating)Translate Skewing Perspective Challenge (translate, skew)

6. Adaptive/responsive websites and apps

What is adaptive/responsive design?@media query Adaptive - Responsive layouts Inspecting a web page Challenge (adaptive/responsive layout)

7. Preprocessors

What is preprocessor?Sass syntax Sass variables Sass numeric operators Sass nesting @extend directive Folder-file structure

Advanced CSS Techniques

Challenge (translate, skew)

We create the information card about animals. One card has an animal image and a short description. We want to add interactivity to the card by hovering the mouse. The task is:

add the perspective of 400px to the parent element that is div with the container class name;
make a card (div with the card class name) closer to the user by 50px (translateZ() can help);
add skew along the x-axis by 10deg to the card description (div with the card-description-wrapper class name);

Solution

Everything was clear?

Section 5. Chapter 8