Code examples from my “🦄 Creative ways to style figures and figcaptions” talk

Slides from the talk are available as a PDF.

These are code examples of screenshots/visuals I included in a talk I gave at the inaugural Localhost meetup in Perth, Australia, on 1st February 2017. The talk was focussed on the HTML5 figure and figcaption elements and demonstrated interesting ways to style them, drawing inspiration from print and media. I did not show the code for each example in the talk because it didn’t fit in with the goal I wanted, which was to visually show the audience what is possible.

The examples are very simple; I have used inline styling in the head of each HTML file. Photographs in these examples were taken by myself, Georgie Luhur, or Nicholas Cooke. They should not be used elsewhere without permission. Copy and text in all examples was written by me and are excerpts from published blog posts from my blog Hey Georgie. A list of blog posts used are below.

• The Longest Shortest Tour
• Woo-hoo: Blur, live
• Italy: Florence
• À bientôt, Paris!
• Italy: Varenna
• Heart of a Lion
• Real-life relationships on the internet

Feel free to use these examples and expand on them, work them into your layouts and designs, get creative or go wild. I’d also love to see what you come up with, so you can find me on Twitter at @georgiecel or contact me on my blog. 🤗

P.S. I didn’t intentionally choose the number 42, but yes, I am a fan of The Hitchhiker’s Guide to the Galaxy.