CSS-Tricks Screencasts show

CSS-Tricks Screencasts

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

Join Now to Subscribe to this Podcast

Podcasts:

 #26: Designing for WordPress: Part Two | File Type: video/mpeg | Duration: 52:48

We have WordPress installed, now let’s really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts/pages. Then …

 #25: Designing for WordPress: Part One | File Type: video/mpeg | Duration: 16:27

WordPress is a hugely popular CMS for blogging. The blog section of CSS-Tricks is run on WordPress and I am very happy with it. By popular request, we are going to walk through designing for WordPress. In part one, we will be downloading and installing WordPress. Then we will install the "Starkers" theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it's more trouble than it's …

 #25: Designing for WordPress: Part One | File Type: video/mpeg | Duration: 16:27

WordPress is a hugely popular CMS for blogging. The blog section of CSS-Tricks is run on WordPress and I am very happy with it. By popular request, we are going to walk through designing for WordPress. In part one, we …

 #24: Rounded Corners | File Type: video/mpeg | Duration: 25:55

Here are FIVE different techniques you can use to create rounded corners for boxes on a website. There are always different ways to do things with CSS and rounded corners is a great example of that. Each of these five …

 #24: Rounded Corners | File Type: video/mpeg | Duration: 25:55

Here are FIVE different techniques you can use to create rounded corners for boxes on a website. There are always different ways to do things with CSS and rounded corners is a great example of that. Each of these five techniques has advantages and disadvantages. Knowing all of them so you can choose the perfect one in each situation is the kind of thing that makes you the best CSS ninja you can be! Links from video: View Demo Download …

 #23: Conditional Stylesheets | File Type: video/mpeg | Duration: 17:58

Internet Explorer provides a way to target CSS styling information specifically for its different versions. These “conditional stylesheets” are the best way to handle CSS problems that pop up with your page in IE. They aren’t “hacks” (which are liable …

 #23: Conditional Stylesheets | File Type: video/mpeg | Duration: 17:58

Internet Explorer provides a way to target CSS styling information specifically for its different versions. These "conditional stylesheets" are the best way to handle CSS problems that pop up with your page in IE. They aren't "hacks" (which are liable to cause problems with new browsers down the road), they are perfectly valid code. Just be careful not to overdo it and make things more complicated for yourself. Links from video: IE-Only Stylesheets …

 #22: Cutting Clipping Paths | File Type: video/mpeg | Duration: 16:15

We’re back in Photoshop this week because I wanted to talk a little bit about a very specific skill that I think is important for all designers. That is the Pen Tool and using it to hand-draw clipping paths. There …

 #22: Cutting Clipping Paths | File Type: video/mpeg | Duration: 16:15

We're back in Photoshop this week because I wanted to talk a little bit about a very specific skill that I think is important for all designers. That is the Pen Tool and using it to hand-draw clipping paths. There are a variety of ways to make selections in Photoshop, but drawing a real vector path is the most tried-and-true and highest quality way to do so. Mastering this tool will make you a better designer and help unleash your …

 #21: Walkthrough of Contact Form | File Type: video/mpeg | Duration: 24:50

In some ways, the Contact Form is the “Hello, World!” application of web designers and web developers. It is nothing that hasn’t been done before a million times, but it is symbolic of being able to control the design of …

 #21: Walkthrough of Contact Form | File Type: video/mpeg | Duration: 24:50

In some ways, the Contact Form is the "Hello, World!" application of web designers and web developers. It is nothing that hasn't been done before a million times, but it is symbolic of being able to control the design of a page as well as make a page truly functional. In this screencast I talk about contact forms in general as well as quickly walk through the design, creating, and functionality of Contact Form. Links from video: Original Article View …

 #20: Introduction to jQuery | File Type: video/mpeg | Duration: 17:02

The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This …

 #20: Introduction to jQuery | File Type: video/mpeg | Duration: 17:02

The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions. Links from video: jQuery View Demo Download Files Make sure to check out Intro to jQuery 2, which expands on …

 #19: Designing a Unique Page for Twitter Updates | File Type: video/mpeg | Duration: 19:46

This week I take you through the creation of simple webpage to display your recent 'Tweets' from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page. Links from video: View Demo Download Files Twitter Update (October 2012) The JavaScript provided by Twitter that we used in this video no longer works. However, I quickly updated the demo to use their …

 #19: Designing a Unique Page for Twitter Updates | File Type: video/mpeg | Duration: 19:46

This week I take you through the creation of simple webpage to display your recent ‘Tweets’ from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to …

Comments

Login or signup comment.