CSS-Tricks Screencasts

CSS-Tricks Screencasts

United States

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.

Episodes

#143: Using and Caching Third-Party JSON with WordPress  

On the design of CSS-Tricks as I record this, one of the things I wanted to add was a "Front End Design & Development Jobs" widget, powered by the CodePen Job Board. Those jobs are available as JSON data.

Couldn't we just do an Ajax request for that and use it? Perhaps a little JavaScript Templating? Sure, we could. But Ajax requests are async. I'm picturing a little spinner on every page load, waiting for the data …

#142: Hiding Things With CSS  

There isn't just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we'll go over in this video.

For instance, there is the display property in which display: none; is very effective at hiding things. But it will hide that element from assistive technology as well, and you don't always want that, like a dropdown navigation menu (the dropdowns are visually hidden but shouldn't be hidden from …

#141: Getting the Images and Numbers for Responsive Images  

You know about responsive images. It's about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It's fantastic for performance.

You know that to get the most out of responsive images you should polyfill it with Picturefill. You download it, you include it on your page.

You have …

#140: Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap  

This is the video screencast version of a blog post I did not long ago: Useful Flexbox Technique: Alignment Shifting Wrapping. I was at a CodePen Meetup and used it as a quick show-and-tell demo and it was kinda fun so, you know, RECYCLING.

We have a title/subtitle situation with a very specific layout in mind that we want to behave a certain way responsively. We eventually get there with Flexbox, but we explore lots of CSS positioning stuff …

#139: Explaining the Server Side Mustard Cut  

I published a written post about this idea of the Server Side Mustard Cut. So if you're into reading and checking out code samples and stuff, that's the place for you. In this video I just walk through all that, explaining myself as we go.

I'll give the same caveat I have everywhere else I've introduced this: this may not be perfect for every site out there. In fact I think normal RWD stuff is generally better, up to …

138: Walking Through an HTTPS Conversion on WordPress  

We just recently moved to "HTTPS everywhere" right here on CSS-Tricks. I wrote up a blog post detailing the steps to get there. This video is a companion to that, talking through the steps, as I know some folks prefer that style and the type of detail it affords.

I should note that I'm not an expert about this stuff. I'm sure there are different types of SSL certificates that can be installed in different ways and that offer different …

#137: SVG is for Everybody  

Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at BlendConf. Of course there is far too much about SVG to cover in just one talk, so it's mostly me trying to convince you that SVG is very cool, where to get it, how to use it, and that kind of thing. Also a whole part about using SVG as an icon system and how that …

#136: Moving Things to a CMS as Needed  

In this video, I prattle on about a particular "real world" situation I was in involving how I handle the CodePen Meetups page.

At the very beginning days of CodePen Meetups, we just had a single one planned. It was to be the first ever CodePen Meetup in Austin, Texas. So I made a page for it as part of the main CodePen website (a Rails project) at the URL /meetups/. There, I got to design it however I wanted. …

#135: Three Ways to Animate SVG  

Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it. …

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More  

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code.

A "build process" is all the stuff that happens between the code you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can …

#133: Figuring Out Responsive Images  

I'm probably a bit rare in that I rather enjoyed trying to keep up on the responsive images thing. It's an interesting problem that bred lots of interesting solutions. The whole thing is starting to wrap up now though, now that the official solutions are:

<picture> and friends <img> with srcset and sizes

The problem is: I don't really get it. I thought the original picturefill was pretty simple. List a bunch of sources with media queries. First one to …

#132: A Quick Useful Case for Sass Math and Mixins  

I had a little design situation come up where I was making a fluid grid of boxes with floats. I wanted to specify how many boxes across a row was very easily, and have them flush against both edges of the container. …

#131: Tinkering With Flexbox  

In this video we tackle a little front end layout problem that would have been pretty much impossible without flexbox. I wrote up an article about it too, for easier reference of code.…

#130: First Moments with Grunt  

There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using different tools for all of them is getting increasingly difficult. Running them manually makes it worse, and easy to screw up.

Grunt is perfect for reining all this in. …

#129: Emmet (is Awesome)  

Emmet is an add-on for code editors that allows you to write HTML and CSS more quickly.

On the HTML front, it allow you to write abbreviations for HTML. For instance …

#128: Effeckt.css, Local Setup with Grunt, and Contributing on GitHub  

Effeckt.css is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web designers. The idea is to provide as little UI and JavaScript as possible so that you can extract an effect to use on your own site, and customize it, easily.

In this screencast I introduce you to the project, show how you can get it running locally, and how to contribute to it on GitHub. There is a variety of tech …

#127: Basics of JavaScript Templating  

A template is a chunk of HTML that you need to inject onto the page. Often templates are created "server side" - in that they come to the JavaScript fully formed and just need to be put into the DOM. But sometimes that isn't feasible or would require and extra round trip to the server which might be slow. In that case having the template right in JavaScript is ideal. …

#126: Using Modernizr  

Should Modernizr be part of every modern web project? Not necessarily. In this screencast I talk about how you need Modernizr when you plan to do something specifically different depending on its browser support determination. …

#125: How To Stay Up To Date With Web Technology  

This is a presentation I gave at a conference just once in December 2012. In this screencast I give it one last time to you, o' CSS-Tricks subscriber.…

#124: A Modern Web Designer’s Workflow  

This is a presentation I gave at conferences in late 2012 and early 2013. In this screencast I give it one last time to you, o' CSS-Tricks subscriber. …

0:00/0:00
Video player is in betaClose