Understanding the rules before bending them. CSS is often treated as unpredictable. Styles override each other. Layout shifts unexpectedly. Developers respond by increasing specificity, rearranging rules, or layering fixes on top of fixes. The problem is rarely CSS itself. The problem is mental models. The CSS Codex is a structured 4 week, 12 part series designed to build a clear, scalable understanding of how CSS actually works. Each article builds on the previous one. Every concept connects forward and backward. By the end, the Codex forms a cohesive system rather than a collection of isolated tips. This is not about tricks.It is about rules.It is about discipline.It is about building…
-
-
There is a moment in every campaign where the dice feel heavier than usual. The party looks at you. The dragon looks at you. You look at your character sheet and quietly wonder if you put your points in the wrong place. No one talks about that moment when they describe the adventure. They talk about the victory, the treasure, the clean strike that lands at just the right time. They rarely talk about the quiet confidence gaps that open up beneath your boots. I have felt those gaps more times than I expected. When I first stepped deeper into software development, I assumed confidence would rise in a straight…
-
I have shipped features that looked beautiful and worked perfectly with a mouse, only to discover later that they were nearly impossible to use with a keyboard. It felt like building a grand stone keep with polished banners and glowing torches, then realizing I forgot to add doors. Users could admire it from afar, but they could not enter. Fixing keyboard navigation after the fact is humbling. It forces me to examine every assumption I made about interaction. It also reminds me that accessibility is not an optional side quest. It is part of the main campaign. When I return to an existing codebase to repair keyboard support, I approach…
-
The first time I truly understood the DOM, it felt less like learning a new API and more like discovering the rulebook behind the dungeon screen. For years I treated the browser like a mysterious Dungeon Master who simply made things appear. Click a button, something happens. Submit a form, data vanishes into the ether. Change a class, styles rearrange themselves like obedient goblins. It felt magical. It is not magical. The DOM is structure. It is state. It is a living tree of nodes that the browser maintains with ruthless logic. When I stopped treating it like a spell system and started treating it like a rules engine, everything…
-
If you have ever played a long running Dungeons and Dragons campaign, you know that the party rarely falls apart because the fighter showed up in plain armor and swung a dependable sword. The chaos usually starts when someone insists on building a wild multiclass sorcerer bard warlock experiment that only works under a full moon during initiative order. I have learned that software development works the same way. The code that saves projects is rarely flashy. It is steady, readable, predictable. It is, in the best possible way, boring. Early in my development journey, I chased cleverness. I wanted elegant one liners, intricate abstractions, and patterns that made other…
-
There is a moment in every campaign when someone insists it is only one more item. One more rope. One more potion. One more mysterious glowing artifact that absolutely will not awaken something ancient. Then the party slows down. Movement decreases. Initiative suffers. The dragon closes the distance. I used to treat images that way in my projects. It is only one more image. It will enhance the design. It will elevate the aesthetic. What could it possibly cost. More than I expected. I learned this while refining one of my portfolio builds. The layout was clean. The typography was intentional. The JavaScript was efficient. Performance metrics were solid. Then…
-
When I build a form, I no longer see text inputs and buttons. I see the gates of a city. On one side stands a traveler. On the other side stands my application. Between them is a portcullis made of HTML, guarded by validation rules, warded by server logic, and lit by the flickering torches of user feedback. If I design it poorly, the traveler turns away. If I design it carelessly, something darker slips through. Forms are not paperwork. They are the social contract of the web. They are where trust is negotiated. And in my experience, trust is the most powerful magic in any system. The Gatehouse: Structure…
-
When I started teaching, I thought my job was to know the material. Know it cold. Know it forward and backward. Be ready for every question. What I learned instead is that knowing something and explaining something are two very different skills. That realization followed me back into software development. In the classroom, I could solve a problem in my head in seconds. But when I tried to explain it the same way I solved it – jumping steps, skipping assumptions, compressing logic – I would lose half the room. The students weren’t confused because the material was impossible. They were confused because I had teleported from A to D…
-
I used to think that if my JavaScript ran without errors, I had done my job. If the feature shipped, the console stayed quiet, and the tests passed, I’d mentally roll for loot and move on. Victory secured. XP gained. On to the next quest. But somewhere between shipping features and revisiting old projects, I started noticing something uncomfortable: working code is not the same thing as readable code. And readable code is the difference between a clean campaign journal and a pile of crumpled notes written during combat. One of the first times this hit me was with a small function that filtered active users and displayed their names…
-
There was a time when I treated layout like it started at display: flex;. If something wasn’t aligned, spaced, or distributed exactly the way I imagined, I didn’t pause to understand what the browser was already doing. I just reached for Flexbox. It felt like leveling up. Normal document flow, on the other hand, felt like the starter dungeon. Functional. Necessary. But not where the “real” mechanics lived. That assumption was wrong. Because CSS flow isn’t the tutorial. It’s the physics engine. Flexbox is a powerful positioning spell layered on top of it. And if you don’t understand the world’s physics, you end up burning high-level slots to solve low-level…
