A Miscellany

Contents

What is this?

miscellany
NOUN (plural miscellanies)
group or collection of different items; a mixture:

A recent, brief twitter exchange led me to a realisation: despite the fact that I am currently studying computing and design, and that an interest in UI/UX work was a key factor in doing so, I actually think there is something inherently beautiful about semantic HTML.

With that in mind, I was led back to a great article from 2007 by Robert Nyman - Explaining Semantic Mark-Up.

In turn, that led me here.

Ok - so what is this?

This webpage is a way of collecting useful items, probably in annotated list form, that will help me as I study design. I was a pre-sunset del.icio.us user, so clean listing is something I found useful in the past - in an age before Pinterest et al made it a graphical mess.

My basic intention is to start with a blank piece of virtual paper, and add to it as and when things come up.

The Miscellany

Inspiration

100+ Years of Design Manifestos

A brilliant list of (mostly) 20th century design manifestos from some of the world's leading designers and design thinkers.

Reference Guides

HTMLDog

HTMLDog is a lexicon and tutorial guide for HTML, CSS and Javascript. Don't leave home without it.

HTML5Doctor - HTML5 Elements Index

“A complete index of HTML5 elements, each with a short description, code snippet and and often a link to an article with our prognosis.”

Syntax Guides

Gruber, John (2004) - Daring Fireball: Markdown

"Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)."

Nyman, Robert (2007) - Explaining Semantic Mark-Up

Look at a document in pure HTML. Does it make sense? Is it well structured? “If the answer is yes, the document is probably marked up in a nice understandable semantic fashion.”

Useful HTML Tricks

Typepad (2012) - Using Anchor Tags

A short tutorial on using anchor tags properly.

Bootstrap & Resources

Bootstrap

“Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”

Tutorial Republic (2015) - Bootstrap: Getting Started

A tutorial “demonstrating how to create a basic Bootstrap template using the Bootstrap v3.0 compiled version”.

Gordon, Zac on Treehouse Blog (2015) - How to Build a Responsive WordPress Theme with Bootstrap

As above.

CSS Help

Gawley, Kyle & Henderson, Jordan - Bear CSS

Upload an HTML document, and this tool generates a template based on the elements, classes and IDs used in the markup.

Learn CSS Layout

Assuming a basic knowledge of CSS elements, this tutorial site “teaches the CSS fundamentals that are used in any website's layout.”

Typecast (2011) - The Goldilocks Approach

Based on using ems (to allow designs to be resolution independent) the Goldilocks Approach provides a set of “boilerplate CSS and HTML files based on current best practices”, giving a jump-off point for responsive design.

WordPress Tutorials

WordPress Codex - Child Themes

The central WordPress instructions on Child Theme creation.

WPBeginner - How To Create a WordPress Child Theme

An expansive tutorial based on the WP guidelines. See also the tutorial from Elegant Themes called, How To Create A Child Theme, And Why You Should Be Using One.

This page is curated by @petehuey. Got a suggestion of something worth adding? Hit me up, yo.