Menu

HTML

The Empty Box

September 23rd, 2020

When I was in high school, we learned about “The Black Box” which is a concept in theater. If memory serves me right, the approach was a simple and elegant one: that you can take any space, any black box, and make it come to life with a story. I liked the idea that it’s…

Editing HTML Like A Boss In VS Code

September 16th, 2020

Here’s a seven minute video from Caleb Porzio that focuses on some of Emmet‘s HTML editing features. You might think of Emmet as that thing that expands abbreviations like table.stats>tr*3>td*3 into glorious, expanded, and perfect HTML. But Emmet has other HTML editing trickery up its sleeve. My favorite is “wrap with abbreviation” (which happens to…

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

September 4th, 2020

Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number of tools (revolving around HTML and CSS) we have at the ready, from responsive images to relatively new…

A Community-Driven Site with Eleventy: Preparing for Contributions

August 19th, 2020

I’ve recently found myself reaching for Eleventy (aka 11ty) above all other tools when I want to develop a website. It’s hard to beat a static site generator that provides advanced templating opportunities while otherwise getting out of your way and allowing you to just create. One of those sites is Style Stage, a modern…

HTML for Subheadings and Headings

August 6th, 2020

Let’s say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I’d say. What HTML do you go for? Dare I say, it depends? But have you considered all the options? And how those options play out…

SVG Title vs. HTML Title Attribute

July 30th, 2020

You know the title attribute? I can do this: <div title=”The Title”> I’m a div with a `title` </div> And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get… Which, uh, I guess is something. I sometimes use it for things like putting an expanded…

A Bit on Web Component Libraries

July 28th, 2020

To my mind, one of the best use cases for Web Components is pattern libraries. Instead of doing, say, <ul class=”nav nav-tabs”> like you would do in Bootstrap or <div class=”tabs”> like you would in Bulma, you would use a custom element, like <designsystem-tabs>. The new Shoelace library uses the sl namespace for their components….

Responsive Styling Using Attribute Selectors

June 30th, 2020

One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. <div class=”span-12″></div> <!– we want this for small screens  –> <div class=”span-6″></div>  <!– we want this for medium screens –> <div class=”span-4″></div>  <!– we want this for large screens  –> It’s common to…

Where Do You Learn HTML & CSS in 2020?

June 19th, 2020

The question of how and where to learn HTML & CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have,…

On Adding IDs to Headers

June 11th, 2020

Here’s a two-second review. If an element has an ID, you can link to it with natural browser behavior. It’s great if headings have them because it’s often useful to link directly to a specific section of content. <h3 id=”step-2″>Step 2</a> Should I be so inclined, I could link right to this heading, be it…