Coding Exercises: CSS Logical Properties
1hIntermediate2022-11-23
Authors

Jen Kramer
Teaches web design and development
Course details
Are you ready to shift your CSS mindset using properties that work in any written language or device orientation? Join coding expert and veteran LinkedIn Learning instructor Jen Kramer to find out more about how to use the recently supported CSS logical properties specification, which allows you to make your models compatible with all possible directions of languages, including left to right and right to left as well as vertical languages read from either side of the screen.
Get up and running with these twelve practical coding challenges that test your capabilities and ramp up your skill set. Reorient yourself as a multilingual developer using logical properties to fit your designs, such as logical borders, padding and margin, writing mode, the logical box model, widths and heights, floats and text alignment, layouts, positioning, refactoring, and more. By the end of this course, you’ll be ready to start writing with multiple modes and layouts at the same time.
Get up and running with these twelve practical coding challenges that test your capabilities and ramp up your skill set. Reorient yourself as a multilingual developer using logical properties to fit your designs, such as logical borders, padding and margin, writing mode, the logical box model, widths and heights, floats and text alignment, layouts, positioning, refactoring, and more. By the end of this course, you’ll be ready to start writing with multiple modes and layouts at the same time.
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
Concepts
0. Introduction
- 01 - Challenge yourself with CSS logical properties
1. Challenges - Logical Properties
- 02 - Logical borders
- 03 - Logical padding and margin
- 04 - Writing mode
- 05 - The logical box model
- 06 - Widths and heights
- 07 - Floats and text alignment
- 08 - Article layout problems
- 09 - Absolute and relative positioning
- 10 - Refactoring with logical properties
- 11 - Flexbox layouts with logical properties
- 12 - Grid layouts with logical properties
- 13 - Multiple writing modes and layouts