Newspaper style layout using just HTML and CSS

After reading a post about how Chris Pattle constructed the Simpsons characters completely out of HTML and CSS, I set myself a challenge to show that you can make just about any layout using simple HTML and CSS.

I grabbed a copy of The Guardian from 26th November 2013 and recreated it in HTML and  CSS using a text editor, Chrome browser and a bit of Photoshop.

Here’s the page I made:

http://codepen.io/hadders/pen/CbhEd

[codepen_embed height=”519″ theme_id=”10068″ slug_hash=”CbhEd” default_tab=”result” user=”hadders”]See the Pen <a href=’http://codepen.io/hadders/pen/CbhEd/’>The Guardian Newspaper made out of HTML and CSS</a> by Hadrian Cawthorne (<a href=’http://codepen.io/hadders’>@hadders</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

This really got me thinking about how we take for granted the simple tools within design applications like Indesign, QuarkXpress and Scribus where things like grids, guides, snapping and shapes are so easy to use, all you really need is knowledge of typography and design theory and a good eye for design.