Tags: html

CSS Mega Dropdown – CodyHouse [↗]

A responsive and easy to customise mega-dropdown component.

This is a couple of years old, but I came across it whilst searching for inspiration. Anyhow, it looks pretty good to me and I thought it was worth a bookmark.

HTML & CSS Is Hard – A friendly web development tutorial [↗]

Learning HTML and CSS is hard, but it doesn’t have to be. This 14-chapter tutorial is one of the friendliest HTML and CSS guides on the Internet. We’ll walk you through everything from selecting a good text editor (which is surprisingly important) to building full-fledged, professional-quality web pages from scratch.

This is possibly the most comprehensive guide to web development ever. OK, possibly not, but it is really rather good. The next time somebody asks me where to start, I’ll know where to point them.

Style List Markers in CSS [↗]

It’s possible to do this styling now, though, thanks to CSS counters. The trick is to remove the list-style, then apply the markers through pseudo-element counters.

Nice tip for styling HTML list markers with CSS. See demo.

The Essential Meta Tags for Social Media [↗]

Follow along as Adam whittles down the necessary meta tags for social media to display rich previews. If you referenced their docs directly, you might end up with a dozen, but in reality, you might be able to get away with as few as five.

A nice guide for adding social media metadata markup to your web pages. I’ve been using my own WordPress plugin for this and it seems to be working quite well. Also, this reminded me of Metadata Markup by Jeremy Keith, who covered the same topic towards the end of last year.

HEAD [↗]

A collection of HTML head elements.

It’s taken ~27 years for the list to get that big, with a lot of the items only appearing recently. I wonder how big the list will be in another 27 years? Are we to expect the average web page to contain more meta than content?

Anyhow, all pondering aside, it’s a useful list.

Foundation for Emails 2 [↗]

We know building HTML emails is hard, especially responsive emails. That’s why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding emails, and more time on other things, like building amazing products.

I really do not like working with HTML emails. In fact, I normally opt for sending plain text, if I can get away with it. However, this looks like it might help to lessen some of the pain.

The Current State of Telephone Links [↗]

Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always.

There is enough web traffic on mobile devices and plenty of desktops apps that are capable of making calls, that it’s worth knowing more about phone links.

A nice guide on how to use HTML telephone links. Details current browser support and how to use them in structured data for inclusion in Google’s local business listings.

Reverse Engineering The Web

I love it when I’m looking at someone’s HTML and I come across comments like this:

<!-- Ah, I see you want a peek at the source code. -->
<!-- That's the great thing about the web: -->
<!-- reverse engineering. -->
<!-- If you have any questions, feel free to write to me: -->
<!-- jeremy at adactio dot com -->

I’ve been following Jeremy Keith for a long time and I’m a big fan of his work. If you’re looking for tips on how to best format your markup, his blog and his code would be a great place to start.