CSS Toolkit: Tips and Techniques for Layout and Styling

Course details

In this course, freelance developer Carrie Dils offers a deep dive into CSS, with a focus on practical techniques that bring flexibility, precision, and creativity to web design. Start with CSS foundations and learn when and why to use normalization, resets, and linting to create a stable and maintainable base. Explore methods for managing containers, ensuring consistent sizing, maintaining aspect ratios, and solving alignment challenges. Dive into advanced typography, custom properties, and techniques for adaptable color schemes. Plus, learn how to work with layout and positioning strategies that use grid, flexbox, and floats to build responsive and visually engaging layouts. When you complete this course, you’ll have the tools and insights to refine your skills and create well-structured, impactful designs.

Learning objectives
Analyze CSS setup options, such as Normalize and Reset, and apply tools like stylelint to write clean, maintainable code.
Use CSS units, box-sizing, logical properties, and float techniques to create adaptable container layouts across different contexts.
Design responsive, visually engaging text with CSS units, properties, and effects like drop caps, gradients, and text truncation.
Integrate custom properties, fallback values, and HSLA colors into your code to create dynamic themes, including dark and light modes.
Determine the appropriate layout model—Grid, Flexbox, or Float—for various design needs and construct complex layouts using advanced CSS positioning techniques.

Concepts

0. Introduction

01 - CSS power techniques
02 - What you should know
03 - Using GitHub Codespaces with this course

1. Working with CSS

04 - Should you use normalize, reset, or another approach
05 - Writing better CSS with stylelint

2. Working with Containers

06 - The vw unit and the classic scrollbar problem
07 - Consistent sizing with box-sizing - border-box
08 - Using logical box properties vs. top, right, bottom, left
09 - Changing writing mode
10 - Align elements horizontally and vertically in any container
11 - Centering psuedo-elements with absolute positioning
12 - Maintaining aspect ratio in containers and images
13 - Using float and clear in modern CSS
14 - Wrap text around custom shapes with shape-outside

3. Typography and Text Effects

15 - Understanding px, em, and rem units
16 - Setting optimal line lengths with the ch unit
17 - Responsive sizing with min(), max(), and clamp()
18 - Making sense of the line-height property
19 - Balancing text wrapping for better readability
20 - Truncating text length and number of lines of text
21 - Style text selection and highlighting
22 - Filling text with a gradient or image

4. Colors and Custom Properties

23 - Using fallback values with custom properties
24 - Nesting custom properties to create functions
25 - Creating light or dark mode with custom properties
26 - Why hsla() colors are just better

5. Layout and Positioning

27 - Should you use grid, flex, or flow
28 - Adding gaps and gutters to grid and flex
29 - Pseudo-elements are true grid and flex items
30 - Stacking elements using grid
31 - Nesting grid items with subgrid
32 - Adding fixed and sticky elements

Conclusion

33 - Next steps

CSS Toolkit: Tips and Techniques for Layout and Styling

Authors

Carrie Dils