Grow your CSS skills. Land your dream job.

CSS-Tricks Video Screencasts Now Available

Published by Chris Coyier

Alright I'm just gonna publish the link and see how it goes...
CSS-Tricks Video Screencasts

DISCLAIMER: These are my very first screencasts ever, so the quality is sort of rough, folks. I am going to keep at it though and I'm sure they will get better and more focused with time.

Also, I call them "podcasts" in the video, but it's not really a podcast yet since I haven't really figured out what I'm going to do about that. Ideally they will be subscribe-able through RSS (or maybe through iTunes?) at some point.


  1. Permalink to comment#


    could you create a .flv version, and integrate it into a flv player? I don’t want to install a quicktime plugin just to take a look. As for the flv player –

  2. @gog: I think I’m happy with the Quicktime workflow. That flash player is pretty slick, but it’s not really what I’m after. It’s too small and I don’t really need the side navigation thing. If enough people really really want flash, I can probably do that, but for now I think if people want to watch my free content, they can go through the trouble of installing a plugin.

  3. ray
    Permalink to comment#

    I thought those videos were pretty informative. I enjoyed hearing your thought process and your organization methods.

    Just one criticism is that you have a clear div with nothing in it solely to clear the float divs. You should remove that div and put the CSS property “overflow: auto;” on the div that surrounds the floats (think you called it main-content). This way it clears the floating divs with cleaner XHTML.

    Also wondering your thoughts on CSS positioning. Saw that you didn’t use any and thought you could have used it in combination with z-index to place the TV so that the antenna was next to the link.

    Anyway keep up the good work, hope to see more videos!

  4. Permalink to comment#

    Hey Chris.

    Cool to finally see it online.
    Congrats on that.

    all the best from germany, Oli

  5. toby
    Permalink to comment#

    Nice one Chris! This is a great idea.
    Found this really useful to see the work flow. For a first go I’d say you aced it!
    Keep them coming!

    P.S. One on IE issues and how you go about cross browser checking would be good!


  6. Permalink to comment#

    Keep it up Chris and I may have to rename my bookmark CSS-GOD

  7. Neil MacLean
    Permalink to comment#

    Great work. Really good. The videos were really helpful.
    I am looking forward to see what you do next. Subscribed!
    Maybe a little more volume next time but otherwise perfect.

  8. Permalink to comment#

    Hi Chris,

    Do keep the flash player mentioned by gog in mind if you ever consider doing a flash version of your videos. The player is actually immensely customizable — you chose the size, the inclusion/exclusion of the playlist, the colors, the buttons available, and much more… all by setting or unsetting a few Javascript variables. I use it pretty extensively in my 9-to-5 job. And we store all our videos on S3, to tie it all in with your S3 post. :)

  9. Oscar
    Permalink to comment#

    Hello Chris!!

    First of all, great job and great idea on the videos, they are really more easy to follow than plain text exxamples.

    Also that IE issues and cross browser checking suggestion will be really cool, cause I (and most likely a lot of people) am having a lot of porblems with IE.

    Thanks for the videos and keep doing a great job!!!!

  10. Thank you, everyone, for the encouragement and feedback. Stay tuned for a little refresh of the site look with easier access to the video section as well as a separate feed just for the videos.

  11. Oscar
    Permalink to comment#

    Hello, me again!!!

    Is there any way you can add HTML and CSS files just like you did with the Photoshop muckup?

    I just think they will be really helpful to understand the lesson 100%

    BTW I just recently started learning HTML and CSS and your videos are helping me a lot.


  12. @Oscar: I put up files for both the “conversion” screencasts as well as the new “forcing scrollbar” screencast. Hope that is helpful!

  13. Oscar
    Permalink to comment#


    Yeah, I just noticed them and actually they are really helpfull.

    Thanks for taking the suggestion into consideration and keep up the awesome work!!!

    PURA VIDA!!!

  14. Martin
    Permalink to comment#

    Hi Chris,
    I just want to tell you that the Screen Cast are excellent!
    But… Part2 and 3 are not accesible, are they offline?.
    Keep up the good work!

  15. Hey Martin, glad you are enjoying them! I think maybe they were unavailable because Amazon S3 was down this morning. Hopefully that won’t happen very often.

  16. Aloha Chris,

    I’m just curious, what do you use to create your screencasts? Thanks, and good job, btw! :)

  17. Permalink to comment#

    I had a problem using internet explorer. It looks great in firefox, and safari, but the listed elements for my navigation are out of whack in IE.

    I have four links, with the top margin at 81px as you can see below. But in IE, only the first link gets the top-margin attribute! The rest are aligned at the top of the page! What gives?

    ul#nav {
    height: 150px; width: 800px;
    background: url(images/bg-header.jpg) no-repeat;
    list-style: none;
    text-align: center;
    ul#nav li a {
    display: block;
    float: left;
    color: #ffffff;
    margin-top: 81px;
    margin-right: 34px;
    margin-left: 46px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 9px;
    padding-left: 20px;
    text-decoration: none;
    outline: none;

    (OK, so I’m having a lot of problems using internet explorer. I’m a complete novice at this, so ignore the rest of the amateur site, please! I’m working on it…)

  18. Looks like you need a ul#nav li { display: inline; } in there.

  19. Permalink to comment#

    I tried that but it didn’t work! Both inline and inline-block didn’t affect IE… :(

    Great site though, thanks for all of your tips and tutorials.

  20. Permalink to comment#

    I got it! Chris you were right- I had placed the { display: inline; } with “ul#nav li a”, and I had to make just “ul#nav li” in addition to everything else. I can’t wait to get my fixes live…

    Thanks for your help!

  21. Roy
    Permalink to comment#

    Very Usefull tutorial!

    Css-Tricks is definatly one of the best sites for information about creating your own personal webpage!

    Keep up the good work!

  22. Orama
    Permalink to comment#

    Hey Chris,

    Although I’m familiar with turning a PSD to xhtml/css, I learned some new techniques with this tutorial. Thanks a bunch!

  23. Chris:

    Thanks a lot for the screencasts. They were very informative. I learnt a lot, from organizing css code to some really cool techniques.

    Keep them coming.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".