Obox Signature Series - $50 for pure quality

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:

User Comments

Paul's Gravatar

Paul    25 Feb, 2009 18:14:26 PM

Great work, keep it up!


Heather's Gravatar

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's Gravatar

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's Gravatar

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. :)


rob's Gravatar

rob    25 Feb, 2009 20:38:54 PM

Very nice!!! I'm just learning and this was really helpful :)


Philip Rawson's Gravatar

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's Gravatar

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's Gravatar

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


fonsogfx's Gravatar

fonsogfx    26 Feb, 2009 00:17:43 AM

Very nice Job! Keep those videos tuts comming.


Andy's Gravatar

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's Gravatar

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's Gravatar

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's Gravatar

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's Gravatar

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's Gravatar

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's Gravatar

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