Зміст курсу

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: Fixed Positioning

Task

Create a website navigation bar that remains fixed at the top of the webpage for users to access at all times. Steps:

Apply fixed positioning to the navigation list.
Choose one property for horizontal displacement (left or right).
Choose one property for vertical displacement (top or bottom).
Test the functionality by clicking on different links and ensuring that the page scrolls while keeping the navigation bar visible.

index.html

index.css

index.js

Set the top property to 0 to keep the navigation at the top of the web page.
For horizontal positioning, you can use either left: 0; to align it with the viewport's left edge or right: 0; to align it with the right edge.

index.html

index.css

index.js

Все було зрозуміло?

Секція 2. Розділ 7

Зміст курсу

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: Fixed Positioning

Task

Create a website navigation bar that remains fixed at the top of the webpage for users to access at all times. Steps:

Apply fixed positioning to the navigation list.
Choose one property for horizontal displacement (left or right).
Choose one property for vertical displacement (top or bottom).
Test the functionality by clicking on different links and ensuring that the page scrolls while keeping the navigation bar visible.

index.html

index.css

index.js

Set the top property to 0 to keep the navigation at the top of the web page.
For horizontal positioning, you can use either left: 0; to align it with the viewport's left edge or right: 0; to align it with the right edge.

index.html

index.css

index.js

Все було зрозуміло?

Секція 2. Розділ 7

some-alt