course content

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?Select Transition Property Transition Duration Transition Time Function Transition Time Delay Transition Combination Challenge: Add Transition

4. Animations

What is Animation?Specify Time of the Animation Control Animation Play Quantity and Direction Manage Animation State Animation Composition Challenge: Add Animation

5. Transformations

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

6. Adaptive/responsive websites and apps

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

Task

Evaluate the responsiveness and adaptiveness of the website presenting information about different food. The webpage is currently designed to be responsive in the first part and adaptive in the second part. There are 4 breakpoint spots to consider:

300px: Small smartphones
480px: Large smartphones
720px: Tablets
1200px: Desktops

Open the webpage in a new window using the "Open preview in new window" button in the bottom left corner of the sandbox. Change the viewport width and observe the differences in layout and styles at each breakpoint.

Note
If you need help with how to proceed, there are instructions in a recording below the sandbox.

Everything was clear?

Section 6. Chapter 5