Advanced CSS Techniques

1. Introduction

Research what learners can expect from this advanced HTML and CSS styling course. What do you need to know before starting the course? What topics will be covered in it?

Course Overview

Course Focus

Course Topics

How to Succeed

2. Item Positioning

Position and manage elements on the web pages. Learn about the different positioning properties, discover how to use the stacking order to control the visibility of elements that overlap each other, and finally, handle content overflow.

What is Positioning?

Relative Positioning

Challenge: Relative Positioning

Absolute Positioning

Challenge: Absolute Positioning

Fixed Positioning

Challenge: Fixed Positioning

Sticky Positioning

Challenge: Sticky Positioning

Stacking Order

Challenge: Stacking Order

Content Overflow

3. Transitions

Research the power of transitions and learn how to improve the user experience. Discover how to liven properties smoothly and gradually, creating seamless state transitions.

What is Transition?

Selecting Transition Property

Transition Duration

Transition Time Function

Transition Time Delay

Transition Combination

Challenge: Adding Transition

4. Animations

Learn about the animation property and how it can be used to create dynamic and engaging designs. Discover how to create complex animations using keyframes and how to control the animation.

What is Animation?

Specifying Time of the Animation

Controlling Animation Play Quantity and Direction

Managing Animation State

Animation Composition

Challenge: Adding Animation

5. Transformations

Explore the transformation property, which allows modifying the appearance and position of elements on a webpage. Learn how to scale, rotate, skew, and translate elements in two and three dimensions. Combine multiple transformations to create more complex effects.

What is Transformation?

Scaling

Rotating

Challenge: Adding Scaling & Rotating

Translate

Skewing

Perspective

Challenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

The principles and techniques used in adaptive/responsive design aim to make websites and applications accessible and visually appealing across different devices, screen sizes, and orientations.

What is Adaptive/Responsive Design?

@media Query

Adaptive - Responsive layouts

Inspecting the Web Page

Challenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

Learn about preprocessors in CSS and how they can help to write more efficient and maintainable code. Understand how to use preprocessors to simplify the workflow and generate cleaner CSS code.

What is Preprocessor?

Sass Syntax

Sass Variables

Sass Numeric Operators

Sass Nesting

@extend Directive

Folder-File Structure

Challenge: Adding Translating and Skewing

Task

Create an interactive information card about animals. Follow these steps to add dynamic effects on hover:

Apply a perspective of 400px to the parent element, a div with the class name container.
Utilize the translateZ() function to bring the card (div with the class name card) closer to the user by 50px.
Introduce a skew along the x-axis by 10deg to the card description (div with the class name card-description-wrapper).

index.html

index.css

index.js

For the parent container (div with the class name container), set the perspective property to 400px to create a 3D space for the card transformations.
To bring the card (div with the class name card) closer to the user, use the translateZ() function with a value of 50px. This will simulate the card moving forward in the 3D space.
Apply a skew effect along the x-axis to the card description (div with the class name card-description-wrapper) using the transform property with the skewX() function and a value of 10deg.

index.html

index.css

index.js

Everything was clear?

Section 5. Chapter 8

Course Content

Advanced CSS Techniques

1. Introduction

Course Overview Course Focus Course Topics How to Succeed

2. Item Positioning

What is Positioning?Relative Positioning Challenge: Relative Positioning Absolute Positioning Challenge: Absolute Positioning Fixed Positioning Challenge: Fixed Positioning Sticky Positioning Challenge: Sticky Positioning Stacking Order Challenge: Stacking Order Content Overflow

3. Transitions

What is Transition?Selecting Transition Property Transition Duration Transition Time Function Transition Time Delay Transition Combination Challenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the Animation Controlling Animation Play Quantity and Direction Managing Animation State Animation Composition Challenge: Adding Animation

5. Transformations

What is Transformation?Scaling Rotating Challenge: Adding Scaling & Rotating Translate Skewing Perspective Challenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media Query Adaptive - Responsive layouts Inspecting the Web Page Challenge: Inspecting 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: Adding Translating and Skewing

Task

Create an interactive information card about animals. Follow these steps to add dynamic effects on hover:

Apply a perspective of 400px to the parent element, a div with the class name container.
Utilize the translateZ() function to bring the card (div with the class name card) closer to the user by 50px.
Introduce a skew along the x-axis by 10deg to the card description (div with the class name card-description-wrapper).

index.html

index.css

index.js

For the parent container (div with the class name container), set the perspective property to 400px to create a 3D space for the card transformations.
To bring the card (div with the class name card) closer to the user, use the translateZ() function with a value of 50px. This will simulate the card moving forward in the 3D space.
Apply a skew effect along the x-axis to the card description (div with the class name card-description-wrapper) using the transform property with the skewX() function and a value of 10deg.

index.html

index.css

index.js

Everything was clear?

Section 5. Chapter 8