Style: Monki Mag-inspired Layout with HTML+CSS

check out photoshop-centric version here

As I mentioned the other day, I’m going to recreate the Monki-inspired Photoshop tutorial for Style members using HTML and CSS. While I was working on it, I created the prototypes that you can see in the picture above — we’re gonna make the same layout that I used in this Photoshop post (the one with the gray grid background). Okay, you might be wondering: we made it in Photoshop, so why are we doing this???

Why Bother With CSS?

• It’s common for blogs and websites to start as a Photoshop mockup that will later be converted into a web page. The thing is, web pages are made with HTML and CSS, and this tutorial is a simple exercise in the process of taking an image and turning into its web equivalent.
• Another reason for using HTML and CSS is that you can always change the font, background color, backgrounds, and best of all, you can add interactivity between elements — all with simple CSS — no Javascript! And, speaking of interactivity, I’ll show you how to get some cheap thrills by making these chocolates twist and twitch on a mouseover with a simple CSS rotate. Fun stuff.

Some of the Things We Will Do Today!

• add a background pattern to an html page
• create a box (with divs)
• rotate elements on a mouseover
• change the stacking order of an element (kinda like the layers concept in Photoshop)
• position elements on a page
• center and justify text

Please note that some of the concepts in this tutorial are covered in detail in my CSS Pretty eCourse. In case you need a review, I will link to those lessons in today’s tutorial at Style.