CSS-Tricks Screencasts
213 episodes - English - Latest episode: over 2 years ago - ★★★★★ - 86 ratingsCSS-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.
Homepage Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
Episodes
#113: Creating and Using a Custom Icon Font
August 22, 2012 15:00 - 21 minutes - 311 MB VideoAs we’ve said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than …
#112: Using CodePen
June 27, 2012 18:11 - 12 minutes - 86 MB VideoCodePen is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it’s for, how …
#111: Get Yourself Preprocessing in Just a Few Minutes
May 13, 2012 16:49 - 19 minutes - 176 MB VideoThere is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in …
#110: Quick Overview of CSS Position Values
March 18, 2012 22:30 - 13 minutes - 241 MB VideoThis is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to “nudge” and leaves the element’s original position in the page flow. Absolute and fixed allow for exact placement of elements and …
#109: Getting off FTP and onto Git Deployment with Beanstalk
February 13, 2012 20:09 - 25 minutes - 249 MB VideoIn this screencast I move my own personal website from my old live FTP editing ways to a proper version controlled system including deployment. I haven’t had much experience with this, so forgive me if it’s a bit rough. We …
#108: Using Chartwell
January 30, 2012 01:33 - 15 minutes - 314 MB VideoChartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It’s as simple as writing out simple equations like 40+20+25+15. In desktop software like Adobe Illustrator, you control the graph by writing out …
#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development
December 14, 2011 16:17 - 10 minutes - 53.8 MB VideoLiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to …
#106: Use BrowserStack for Live Web-Based Cross Browser Testing
December 12, 2011 16:02 - 7 minutes - 190 MB VideoThere are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive …
#105: Using SpriteCow
November 16, 2011 16:04 - 21 minutes - 165 MB VideoIn which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exact position values needed …
#104: Quick Tip: Use Dropbox to Make a Public URL for Anything
November 07, 2011 14:45 - 1 minute - 12.7 MB VideoJust save the website from the browser (in Firefox, you get an .html file and all the resources), drop it in your Public folder, and use the right-click contextual menu to grab the public URL.…
#103: Integrating FitVids.js into WordPress
November 02, 2011 14:45 - 20 minutes - 174 MB VideoThe default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn’t …
#102: Braindump on Responsive Web Design
October 14, 2011 17:36 - 25 minutes - 186 MB VideoIn which I show and explain the very basics of what “responsive web design” has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.…
#101: Let’s Suck at GitHub Together
August 25, 2011 02:42 - 18 minutes - 116 MB VideoYou are probably pretty aware of why using version control is a good thing. In case you aren’t, I quickly go through that in this video. Then we get into the most basic thing we can possibly do: put a …
#100: Let’s Write Semantic Markup
August 17, 2011 05:05 - 1 hour - 444 MB VideoWe spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don’t …
#99: Overview of HTML5 Forms Types, Attributes, and Elements
June 20, 2011 11:37 - 49 minutes - 135 MB VideoHTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it …
#98: Playing with Body Borders
May 27, 2011 00:06 - 23 minutes - 151 MB VideoPutting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so that the borders don’t scroll away as the page scrolls? …
#97: Intro to CSS Animations
May 12, 2011 19:46 - 30 minutes - 195 MB VideoAnimations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before you can use it, which allows you to specify values …
#96: localStorage for Forms
April 15, 2011 13:38 - 26 minutes - 128 MB VideoHTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing the key, you can retrieve it at any time. This …
#95: A Tale of Border Gradients
April 07, 2011 20:54 - 20 minutes - 121 MB VideoTurns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way. View Demo…
#94: Intro to Pseudo Elements
January 19, 2011 16:09 - 18 minutes - 99.8 MB VideoPseudo elements are visible elements on a web page that aren’t “in the DOM” or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo …
#93: CSS3 Slideup Boxes
November 08, 2010 11:37 - 18 minutes - 87.4 MB VideoFollow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized …
#92: Code Walkthrough of Drawing Table
October 07, 2010 19:44 - 34 minutes - 194 MB VideoThe Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy …
#91: The WordPress Loop
August 31, 2010 11:59 - 31 minutes - 139 MB VideoThere is no shortage of documentation on WordPress’ famous content-spewing structure, but I still feel like there is more confusion and mystery surrounding “The Loop” than there should be. In this screencast I try and explain what it is, how …
#90: Simple TextMate Tips
July 22, 2010 12:48 - 20 minutes - 88.2 MB VideoTextMate is a mac-only code editor. Sorry to all the PC users this time around. If you’ve been watching these screencasts for a long time, you know I used to mostly use Coda. Since I’ve been working a lot more …
#89: Organizing a Photoshop Document
July 08, 2010 11:50 - 19 minutes - 120 MB VideoIf you are like me, you are both guilty of seriously unorganized Photoshop documents and appreciate well organized ones. The disorganization isn’t intentional, it’s just born of (if you’ll pardon the likely-inaccurate cliché) being in right-brained creative mode and caring …
#88: Intro to Compass/Sass
June 23, 2010 21:07 - 29 minutes - 160 MB VideoAsk a bunch of designers what they wish CSS could do that it can’t now, and you’ll get a big list that reads much like the list of features for the Compass/Sass framework. If you are like me, you don’t …
#87: Moving Up with MAMP
June 17, 2010 11:41 - 23 minutes - 149 MB VideoWorking locally with MAMP is awesome, but what about when you need to take that site live? Last time we got a version of WordPress installed locally, now we’ll take that local version and move it to a real live …
#86: First Moments with MAMP
May 28, 2010 12:52 - 11 minutes - 66.2 MB VideoI’m way behind the times on this one, but until recently, I have never really developed locally. Everything I did was “going commando” and working directly on servers. The situation arose where I really needed to, so now I have …
#85: Best Practices with Dynamic Content
May 13, 2010 13:28 - 31 minutes - 164 MB VideoOne of the articles I updated during “May is Maintenance Month” was an article about dynamic content. The idea was a simple website where clicking a link would fade out the existing content and fade in new content that it …
#84: Site Walkthrough of chris-mcgarry.com
April 15, 2010 13:02 - 36 minutes - 233 MB VideoI built a site for a musician friend of mine who is putting out a new album. Clearly having playable tracks is important, but the classic issue of having those tracks stop when a new page is loaded comes up …
#83: Thoughts on SEO
April 01, 2010 11:52 - 39 minutes - 192 MB VideoFair warning: more rambling than usual. Listen to my thoughts about SEO. What I think I know is that SEO is a series of fairly obvious best practices. A SEO service that helps you with those things can be good, …
#82: CSS Image Switcher
March 04, 2010 13:04 - 12 minutes - 30.1 MB VideoRoll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning.…
#81: AJAXing a WordPress Theme
February 25, 2010 13:30 - 42 minutes - 144 MB VideoWatch me bumble my way through adding AJAX functionality to a WordPress theme. The idea is that any internal link on the site will load into the main content area without requiring a page refresh, including search. Not always the …
#80: Regarding Wheel Invention
February 11, 2010 13:37 - 19 minutes - 51.7 MB VideoA couple needs a photo gallery for their wedding, where everyone can browse and upload their own photos from the wedding. Beginner developer: I know of some great software we can use, give me a couple of days. Skilled developer:…
#79: Complete/Non-Queuing Animations with jQuery
January 22, 2010 15:04 - 19 minutes - 47 MB VideoWhen you use jQuery’s .animate() function with something like a hover event, those animations will “queue up”. That is, if you hover multiple times, that animation will fire multiple times. The classic method to prevent this is to throw in …
#78: On Web Advertising
January 04, 2010 13:06 - 45 minutes - 162 MB VideoIn this screencast I discuss online advertising. What it is, how it works, and why it isn’t evil (except when it is). I talk about my experiences, the different services out there and the ones I use. Advertising is a …
#77: Styling an Individual Article
December 16, 2009 13:49 - 41 minutes - 183 MB VideoThe idea of “art directing” posts is very popular lately. It’s the idea of applying unique styling to an article on the web in the way that print designers uniquely style articles for, say, a magazine. This is more than …
#76: A Tour of jQuery on a Live Site
November 20, 2009 15:04 - 38 minutes - 135 MB VideoI’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 …
#75: How Not To Design a Checkout
October 29, 2009 00:11 - 11 minutes - 29.7 MB VideoYou’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 …
#74: Editable CSS3 Image Gallery
October 18, 2009 23:23 - 42 minutes - 139 MB VideoWe 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 …
#73: Building a Website (3 of 3): WordPress Theme
October 01, 2009 17:36 - 50 minutes - 164 MB VideoIn 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 …
#72: Building a Website (2 of 3): HTML/CSS Conversion
September 23, 2009 14:04 - 1 hour - 212 MB VideoIn 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 …
#71: Building a Website (1 of 3): Photoshop Mockup
September 16, 2009 15:59 - 59 minutes - 144 MB VideoThis 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 …
#70: Random Pet Peeves
September 10, 2009 03:38 - 30 minutes - 73.3 MB VideoI 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!…
#69: First Ten Minutes with TypeKit
August 25, 2009 22:56 - 13 minutes - 39.1 MB VideoI 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.…
#68: Think Geek Background Fade Technique
August 12, 2009 17:50 - 22 minutes - 75.3 MB VideoThis 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 …
#67: jQuery Part 3 – Image Title Plugin
July 29, 2009 12:23 - 33 minutes - 83.4 MB VideoThis 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 …
#66: Table Styling 2, Fixed Header and Highlighting
July 01, 2009 14:22 - 26 minutes - 55.5 MB VideoJust a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. …
#65: Advanced Uses for Custom Fields in WordPress
June 23, 2009 19:35 - 47 minutes - 145 MB VideoMore than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Custom fields are chunks of data that travel along with posts and pages in key/value pairs. This data can …
#64: Building a Photo Gallery
June 09, 2009 13:21 - 23 minutes - 70.6 MB VideoThis photo gallery will automatically build itself from a directory of images, including sub-directories and the images inside them. Images open in a nice looking jQuery lightbox. Links from Video: Demo ImgBrowz0r prettyPhoto jQuery plugin …