Most backend engineers treat CSS like a chore. Something you copy from Stack Overflow, tweak until it looks right, and never think about again. This is a mistake, and I am going to be blunt about why: CSS is a real programming language with a constraint-based layout engine, a specificity algorithm, a cascade resolution order, and a rendering pipeline that is as intellectually demanding as any database query optimizer. You have been underestimating it.
Grid and Flexbox are genuinely elegant systems. Grid is a two-dimensional layout engine that solves problems Rails developers used to hack around with Bootstrap column classes. Flexbox handles one-dimensional flow. Together they replace 90% of the CSS hacks that made frontend work feel dirty. Learn them properly -- not from snippets, but from mental models. Josh Comeau's course exists precisely for engineers like you who think visually but never had CSS explained in terms of how the engine actually works.
Refactoring UI will change how you see every application you have ever built. It is not a design theory book. It is a pattern library for making things look professional without needing a designer. Spacing, typography hierarchy, color usage, shadow depth -- all systematic, all learnable. If you are building a portfolio that needs to demonstrate full-stack capability, this is not optional.
Don't Make Me Think is twenty years old, under two hundred pages, and still the best thing written about usability. Read it in one sitting on a Sunday afternoon. It will permanently change how you evaluate interfaces.
The DOM API itself will feel primitive after jQuery and Rails UJS. document.querySelector, addEventListener, manual node manipulation -- this is what every framework abstracts away. Understanding it means you can debug React, Vue, or Hotwire at the metal level. That is the point.
Do not skip this module to get to React faster. Engineers who skip CSS and browser fundamentals write React components that look like developer tools and perform like molasses.