Step 1: Keep Design and Gray box it

Following a technique advocated in “transcending CSS by Andy Clarke“, I’ve taken the current design and ‘gray boxed it”.  (I want to point out that my goal is to learn HTML5/CSS3, not to create a wholly new design).  I simplified the site to its simplest elements:

Gray box for HTML5 wellys.org

From the graphic, you can see its a very simple layout; navigation, header,  rows of three articles and a footer. Each article has a title(h1), a comment(p) and notes(aside).

I’m going to start off from scratch, building the file first using HTML5 then adding CSS3 to create an identical gray box site. This allows me to create the site without the complexity of the exact content.

Each version will continue to exist and I will add versioning as I go.

Step 1