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.
Hi,
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 – http://www.jeroenwijering.com/?item=JW_FLV_Player
@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.
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!
Hey Chris.
Cool to finally see it online.
Congrats on that.
all the best from germany, Oli
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!
Cheers!
Keep it up Chris and I may have to rename my bookmark CSS-GOD
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.
Thanks
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. :)
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!!!!
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.
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.
THANKS!!!!!
@Oscar: I put up files for both the “conversion” screencasts as well as the new “forcing scrollbar” screencast. Hope that is helpful!
Hello!!!
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!!!
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!
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.
Aloha Chris,
I’m just curious, what do you use to create your screencasts? Thanks, and good job, btw! :)
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…)
Looks like you need a ul#nav li { display: inline; } in there.
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.
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!
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!
Hey Chris,
Although I’m familiar with turning a PSD to xhtml/css, I learned some new techniques with this tutorial. Thanks a bunch!
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.