Converting your grunge design into CSS
Posted on 25 February, 2009 at 18:10 PM
There are already 16 Comments
About the Show
We have shown you how to create a grunge look and now we show you how to implement it into css and html.
In our very first CSS Tutorial David runs you through the basics of 'grunge css'.
Please feel free to comment about the quality of the sound / show.
Links mentioned in this post:
Related Shows
- (11) Episode 189 - Using Inspiration Effectively
- (21) Episode 187 - Design with the Lights On
- (16) Episode 186 - Apples and Oranges
- (15) Episode 185 - Design like a Dictator
- (8) Episode 179 - It's All About Themes
User Comments
Heather 25 Feb, 2009 18:41:32 PM
I always love seeing other peoples techniques and how they approach a design; great way to learn how to clean up your own way of doing it. Thanks for the video!
eck0 25 Feb, 2009 19:24:53 PM
I was wondering why you were using classes in your div's until the very end. great lil tut I may use this on an up comming project for a web site. thanks
Matt 25 Feb, 2009 19:50:04 PM
Cool tut Dave. I agree with Heather. It's great to see other peoples' techniques and how they approach a design. :)
Thanks for the tut. Looking forward to the next one. :)
Philip Rawson 25 Feb, 2009 21:24:22 PM
Well said, David. I know beginning in CSS/XHTML can be a little head-over-heels with all the tutorials out there. You put the information in a nice little package that's easy to unwrap and dig around in.
One Idea for your tutorial videos is to have a link underneath "Download this Show!" for a link to the source files you used in the tut.. something like "Download the Source Files" get what I mean?
Audio in the video was alright. I know some people who provide video tutorials actually use a high quality microphone via USB or MIDI, something similar to what radio broadcasters use. I have one and got it for just under $150 at Amazon.com.
Julie 25 Feb, 2009 21:54:10 PM
Hey guys! That was an awesome CSS post for your first time! It was really useful, cheers! :)
Katz 25 Feb, 2009 22:08:48 PM
Thanks for putting this up! I use the comments in css to keep my sections separate already, but I hadn't thought of tabbing them in - what a great idea to keep from tearing hair out when you have to go back to a site after a few months. I'm loving these From the Couch vids - *staying tuned for the next*
Katz
Andy 26 Feb, 2009 11:06:47 AM
Hi David,
Nice tutorial, I am curious though in your choice to use a class instead of id for the main containing div. As a standard we usually use id's instead of classes on structural elements that will only be used once in the page according to W3C.
Our rule of thumb is "Use IDs when there is only one occurence per page and its providing structure. Use classes when there are one or more occurences per page"
Thanks again for some great work you guys are doing :)
Andy
David Perel 26 Feb, 2009 14:06:09 PM
Another lovely response. I am so glad everybody enjoyed the tut.
@Paul, @Heather, @Rob, @Julie, @fonsogfx - Its a pleasure, I am relieved you all found the video useful! Thanks for watching :)
@Matt - Seeing other peoples techniques is something which has always interested me, its one of the many reasons we justified From the Couch... we thought that there will be someone who is keen to see HOW we do it.
@Philip - How you dude? We still plan on buying proper mics. Whenever I do a tut I literally have to almost hold my breath because of the feedback through the mic. So often after a tut I feel out of breath (lol, thank god they only 5 - 6 mins long!). So thank you for the tip!
@Andy - Andy and I have been chatting about this over email. We usually declare id's for Headers, menus, content containers and footers. I think from now on we will be doing to tuts to EXACTLY how we usually create sites. So expect the CSS tuts to go on a bit longer from now on as I explain each detail better. Thanks for the feedback Andy, I didn't consider your comments as negative, I considered them correct.
DigitalDoyle 27 Feb, 2009 03:28:12 AM
Excellent tute. Thanks for taking the time to do it. Looking forward to many more.
Found you guys from a link on Twitter yesterday and I've got you added to my feed reader so I don't miss a post.
Keep up the great work!
Austin 27 Feb, 2009 20:15:38 PM
Great tut.
I love the fresh feel of the whole site in general. Also, video tuts add a lot of character. Very enjoyable / informative. Keep it up.
Amy Lee 27 Feb, 2009 21:14:05 PM
I liked it. Quick and concise, a good intro tut for what's to come. I look forward to longer more detailed ones. I even like the pacing, fast but gives an idea to how you must work - FAST! which is another good thing.
Thanks for starting video tuts!
*Amy Lee
Gareth 02 Mar, 2009 09:00:30 AM
Hey guys,
Well done on the first tut. I've looked at a number of css video tutorials and am thrilled that yours was short, simple, straight forward and easy to follow and understand.
I will be waiting in anticipation for the next one.
Paulo Canabarro 04 Mar, 2009 06:34:21 AM
Hey man, great tut I am really beginning to understand how css goes and I really hope you put up some more stuff like this..
Thank you


Paul 25 Feb, 2009 18:14:26 PM
Great work, keep it up!