Style: Monki Mag-inspired Layout with HTML+CSS
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.
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.