http://css-tricks.com/video-screencasts/ en-us Copyright CSS-Tricks.com Tips, Tricks, and Tutorials Chris Coyier CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. Code samples can be extremely helpful, but sometimes it is even more helpful to watch someone as they code. In CSS-Tricks Screencasts will show you real live CSS and HTML code being written and tested right on the screen. Topics will vary but will always center around design and usability. no Copyright CSS-Tricks.comcss,web,design,html,tutorialTechnology/Software How-Tochriscoyier@gmail.comChris Coyiercss,web,design,html,tutorial http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/taxuFbJAjJw/ http://css-tricks.com/video-screencasts/76-jquery-tour/ CSS-Tricks #76: A Tour of jQuery on a Live Site I’m busy, you’re busy, we’re all busy trying to meet deadlines and get things done in this crazy web world. I love learning new technologies when I can, but I’m the first to admit that I reach for tools that I already know well because I can be instantly productive that way. jQuery is one [...] Fri, 20 Nov 2009 15:04:19 +0000 38:33 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=taxuFbJAjJw:qwjXhgoHk9c:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=taxuFbJAjJw:qwjXhgoHk9c:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=taxuFbJAjJw:qwjXhgoHk9c:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=taxuFbJAjJw:qwjXhgoHk9c:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/taxuFbJAjJw" height="1" width="1"/>http://css-tricks.com/video-screencasts/76-jquery-tour/http://vnfiles.ign.com/ects/css-tricks/VideoCast-76.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/APEWc9aHXFo/ http://css-tricks.com/video-screencasts/75-how-not-to-design-a-checkout/ CSS-Tricks #75: How Not To Design a Checkout You’ll have to forgive me here folks, this isn’t a very constructive screencast. I was frustrated at the crappy checkout process for a software product I was trying, so I thought I’d screencast it as a lesson to us all on how not to design a checkout. It was confusing, frustrating, error-prone, and make me [...] Thu, 29 Oct 2009 00:11:20 +0000 11:17 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=APEWc9aHXFo:0yWeeHyOCK0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=APEWc9aHXFo:0yWeeHyOCK0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=APEWc9aHXFo:0yWeeHyOCK0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=APEWc9aHXFo:0yWeeHyOCK0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/APEWc9aHXFo" height="1" width="1"/>http://css-tricks.com/video-screencasts/75-how-not-to-design-a-checkout/http://vnfiles.ign.com/ects/css-tricks/VideoCast-75.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/DSy19f6o-8c/ http://css-tricks.com/video-screencasts/74-editable-css3-image-gallery/ CSS-Tricks #74: Editable CSS3 Image Gallery We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit [...] Sun, 18 Oct 2009 23:23:49 +0000 42:02 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=DSy19f6o-8c:RZZIC8lpqEE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=DSy19f6o-8c:RZZIC8lpqEE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=DSy19f6o-8c:RZZIC8lpqEE:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=DSy19f6o-8c:RZZIC8lpqEE:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/DSy19f6o-8c" height="1" width="1"/>http://css-tricks.com/video-screencasts/74-editable-css3-image-gallery/http://vnfiles.ign.com/ects/css-tricks/VideoCast-74.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/8nX-_fFNFqY/ http://css-tricks.com/video-screencasts/73-wordpress-theme/ CSS-Tricks #73: Building a Website (3 of 3): WordPress Theme In part 3 of this series, we take the HTML and CSS that we have already created for this design, and convert it into a WordPress theme. We start with a completely “blank” WordPress theme, then take different parts of the HTML and put them where they need to be in the theme. We are [...] Thu, 01 Oct 2009 17:36:26 +0000 50:59 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=8nX-_fFNFqY:MRg3D5HN08o:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=8nX-_fFNFqY:MRg3D5HN08o:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=8nX-_fFNFqY:MRg3D5HN08o:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=8nX-_fFNFqY:MRg3D5HN08o:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/8nX-_fFNFqY" height="1" width="1"/>http://css-tricks.com/video-screencasts/73-wordpress-theme/http://vnfiles.ign.com/ects/css-tricks/VideoCast-73.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/vd81YT7HmII/ http://css-tricks.com/video-screencasts/72-building-a-website-2-of-3-htmlcss-conversion/ CSS-Tricks #72: Building a Website (2 of 3): HTML/CSS Conversion In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file [...] Wed, 23 Sep 2009 14:04:17 +0000 01:11:10 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=vd81YT7HmII:ma_OovM3AYM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=vd81YT7HmII:ma_OovM3AYM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=vd81YT7HmII:ma_OovM3AYM:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=vd81YT7HmII:ma_OovM3AYM:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/vd81YT7HmII" height="1" width="1"/>http://css-tricks.com/video-screencasts/72-building-a-website-2-of-3-htmlcss-conversion/http://vnfiles.ign.com/ects/css-tricks/VideoCast-72.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/K-ZCe1R_xeg/ http://css-tricks.com/video-screencasts/71-building-a-website-photoshop-mockup/ CSS-Tricks #71: Building a Website (1 of 3): Photoshop Mockup This is the start of a three-part series on building a website. This will be a real website for a musician friend of mine, who’s website I happen to ruin during a routine WordPress upgrade. In part 1, we start from absolute scratch in Photoshop, with just a few provided resources from the client. We [...] Wed, 16 Sep 2009 15:59:08 +0000 59:50 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=K-ZCe1R_xeg:_ND5EJ7HT-k:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=K-ZCe1R_xeg:_ND5EJ7HT-k:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=K-ZCe1R_xeg:_ND5EJ7HT-k:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=K-ZCe1R_xeg:_ND5EJ7HT-k:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/K-ZCe1R_xeg" height="1" width="1"/>http://css-tricks.com/video-screencasts/71-building-a-website-photoshop-mockup/http://vnfiles.ign.com/ects/css-tricks/VideoCast-71.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/GQAW9z7Y_WQ/ http://css-tricks.com/video-screencasts/70-random-pet-peeves/ CSS-Tricks #70: Random Pet Peeves I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS. I thought of about 5 more the second I was done, but I’ll spare you! Running time: 30:55 Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready) Thu, 10 Sep 2009 03:38:27 +0000 30:55 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=GQAW9z7Y_WQ:qNyIh0SbJfo:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=GQAW9z7Y_WQ:qNyIh0SbJfo:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=GQAW9z7Y_WQ:qNyIh0SbJfo:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=GQAW9z7Y_WQ:qNyIh0SbJfo:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/GQAW9z7Y_WQ" height="1" width="1"/>http://css-tricks.com/video-screencasts/70-random-pet-peeves/http://vnfiles.ign.com/ects/css-tricks/VideoCast-70.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/DSuoy95VBmE/ http://css-tricks.com/video-screencasts/69-first-ten-minutes-with-typekit/ CSS-Tricks #69: First Ten Minutes with TypeKit I got the invite from TypeKit, signed up, and had beautiful custom fonts rocking my page in just a few minutes. I’ll show you the entire process from start to finish, as well as touch on the advantages and disadvantages. Running time: 13:42 Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready) Links from Video: View Demo Tue, 25 Aug 2009 22:56:35 +0000 23:42 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=DSuoy95VBmE:D99oF2k1t18:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=DSuoy95VBmE:D99oF2k1t18:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=DSuoy95VBmE:D99oF2k1t18:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=DSuoy95VBmE:D99oF2k1t18:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/DSuoy95VBmE" height="1" width="1"/>http://css-tricks.com/video-screencasts/69-first-ten-minutes-with-typekit/http://vnfiles.ign.com/ects/css-tricks/VideoCast-69.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/XhT0jxYOlPA/ http://css-tricks.com/video-screencasts/68-think-geek-background-fade-technique/ CSS-Tricks #68: Think Geek Background Fade Technique This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then [...] Wed, 12 Aug 2009 17:50:51 +0000 22:19 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=XhT0jxYOlPA:ffhXDmevEV0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=XhT0jxYOlPA:ffhXDmevEV0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=XhT0jxYOlPA:ffhXDmevEV0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=XhT0jxYOlPA:ffhXDmevEV0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/XhT0jxYOlPA" height="1" width="1"/>http://css-tricks.com/video-screencasts/68-think-geek-background-fade-technique/http://vnfiles.ign.com/ects/css-tricks/VideoCast-68.m4v http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/rTmZYC5_3TQ/ http://css-tricks.com/video-screencasts/67-jquery-part-3-image-title-plugin/ CSS-Tricks #67: jQuery Part 3 – Image Title Plugin This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show [...] Wed, 29 Jul 2009 12:23:34 +0000 33:56 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rTmZYC5_3TQ:iFMvpClMiL8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rTmZYC5_3TQ:iFMvpClMiL8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=rTmZYC5_3TQ:iFMvpClMiL8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rTmZYC5_3TQ:iFMvpClMiL8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/rTmZYC5_3TQ" height="1" width="1"/>http://css-tricks.com/video-screencasts/67-jquery-part-3-image-title-plugin/http://vnfiles.ign.com/ects/css-tricks/VideoCast-67.m4v Chris CoyiernonadultTips, Tricks, and Tutorials