1 Web dev math fundamentals
This chapter covers
- Improving web dev precision with math
- The benefits of learning web dev math
- How math is used in CSS and JavaScript
- The math basics for coding motion and animation, layouts, and user interactions
When you design or code a website, you might not think of yourself as doing math, but there’s likely at least a little mathematics behind most of what you do. Are you using relative units such as em or rem? There’s math behind those units. Are you applying an easing function such as ease-in-out to an animation? There’s math behind that function. Does your JavaScript code call the getBoundingClientRect() method on an element to determine its size and position? There’s math behind that method.
Certainly, it’s possible to design and develop websites without giving math more than a cursory thought. Whatever math lies underneath a unit such as em or an easing function such as ease-in-out might not matter to you as long as the job gets done. However, the whole point of this book is that if you take a bit of time to understand that math, you’ll find it makes a big difference in the precision and robustness of your web layouts and interfaces. The good news is that you don’t need a graduate degree to build better websites. You only need to understand a small set of concepts, and none of it is as complex as the CSS and JavaScript you already know.