coding character sheets
Title Slate in HTML/CSS
Let's walk through creating a title slate graphic for your next RPG campaign.
CSS Length Units
We go over the basics of length and sizing in CSS, including both relative and absolute values.
Tool: Inline Variants
We take a look at a tool for displaying different content based on a page's URL search parameters.
Tool: Encounter Tables
A tool for creating clickable tables that process inline dice rolls when selecting an entry.
On the Grid, part 3
We conclude our look at CSS Grid by talking about breaking source order, positioning items so they overlap, and more.
Tool: Inline Dice Rolls, updated
An update to the inline dice rolls tool, with new features including exploding dice and counting successes.
On the Grid, part 2
We continue exploring CSS grid, this time with tools for sizing grids dynamically and positioning items intentionally.
On the Grid
We begin our deeper dive into the true design sorcery that is CSS Grid.
Pop-Up Tooltips
A tool for adding interactive tooltips to your game, good for defining terms, etc.
Supporting the Blog
A few ways you can help support the blog, so I can keep doing it.
Fun With Backgrounds
We have fun with the `background-image` property and some features of CSS that let us mix and match our background to create more sophisticated effects.
CSS Custom Properties
We look at a flexible and powerful feature of modern CSS that lets you write cleaner code and do some really sophisticated styling.
Pseudo Science: Stupid CSS Tricks
Let's look at some powerful features of CSS that let you do creative and sophisticated tricks with your designs.
Stupid HTML Tricks
We look at a few specialized HTML elements that add a bit more detail and even interactivity to your page with very little overhead.
Tool: Inline Dice Rolls
A worked example of assorted JavaScript techniques that you can drop right into your page to add inline dice rolls to your game.
JavaScript Example: Random Tables
We walk through an example of using JavaScript to add a little interactivity to your page: a table that randomly selects one of its rows when you click it.
Tricksy: More JavaScript Topics
We explore a few slightly more advanced bit of JavaScript as we prepare for our first worked example.
Turn the Page: Document Object Model
An introduction to basic concepts of the DOM, the model that JavaScript uses to understand and manipulate the elements on your HTML page.
Model Kit: Objects & Arrays
An introduction to objects and arrays, ways to collect and model your data in JavaScript.
Cracking the Code: Introduction to JavaScript
We take our first steps toward adding interactive features using JavaScript. In this post, we go over some of the very basic concepts of programming.
Everything In Its Place: Positioning with CSS
An introduction to more precise positioning of elements with CSS.
Hitting Your Target: Advanced CSS Selectors
We dig into CSS selectors and look at more advanced ways to target elements and apply styles intelligently.
On Display
A brief introduction to Flexbox and Grid layout systems for CSS.
Sample: Dragon Statblock
We look at a complete sample document, a stablock for an adult black dragon from the 5e SRD, with complete Markdown, HTML converted from that Markdown, and CSS to style it all.
Thinking Inside the Box
An introduction to <DIV>s and some of the ways you can style these plain boxes.
Basic CSS Typography
Let's look at some of the basic CSS properties you'll want to use in just about every document.
Introducing Cascading Style Sheets
We take our first look at Cascading Style Sheets, or CSS, the language that defines what a web page looks like.
Advanced Markdown Topics
You may not use these options in every document, but they're nice to have around: images, blockquotes, tables, and more.
A First Look at HTML
We explore the very basics of Hypertext Markup Language, or HTML, and learn about elements, tags, and attributes.
My Markdown Habits
A look at my personal rules and best practices when writing in Markdown.
Writing in Markdown
A primer on Markdown, a great format for writing your text without worrying about complicated markup languages or layout.