Treehouse: Grow your CSS skills. Land your dream job.

Emoji Toggles!

Fun Friday thing! Natalya on CodePen made a super fun Pen.

You know how clicking a <label></label> with a for attribute that matches a checkbox input, it will toggle the input to checked or unchecked? That, combined with the :checked selector in CSS and the sibling combinator forms The Checkbox Hack, and you can use that to do all kinds of fun stuff. …

Read Article →

Sponsor: Treehouse 

I'd like to specially thank Treehouse today for being such an awesome long-time sponsor of CSS-Tricks. Just imagine how many people they have helped over the years learn web and mobile design and development. It's damn impressive. I've watched Treehouse evolve over the years and you can see how their experience with students guides how they teach and how the site works. For instance, I love how there are different ways to learn: take a track toward a goal like becoming a front end web developer, tackle a project like building a Swift weather app, or dig into a topic like JavaScript.

Prefetching, preloading, prebrowsing

When we talk about front end performance we think things like concatenation, minification, caching, or gzipping assets on the server so that the page loads faster and users can complete their goals as quickly as possible.

Resource prefetching is another performance enhancing technique. We can use it to tell the browser which assets the user might need in the future—before they even need them.…

Read Article →

DIY Priority+ Navigation

We've written a bit about the Priority+ pattern here before. Here's a bunch of real world examples. I needed to use it recently. I found Gijs Rogé's priority-navigation. It's pretty nice: no dependencies, clean code, fairly configurable and designable. It's not particularly small though, and there is a good amount of it defining helper functions. I was in an environment that had all that stuff available and so I figured I'd take a crack at a version. …

Read Article →

Six Tips for Chrome DevTools

The following is a guest post by Umar Hansa. Umar has a newsletter I'm a fan of and graciously offered to write this guest post in that style. I'll let him introduce himself.

Hey, I'm Umar. I like to share web development related tips on Twitter (@umaar) and also through Dev Tips which is a newsletter of developer tips in the form of gifs. Right now, it's all primarily Chrome DevTools related. Before we get started, thank you …

Read Article →

Sponsor: imgix — Real-time Image Resizing as a Service 

Looking to take advantage of the srcset attribute or <picture> element, but don't want to store the different versions of each image? Looking to apply blurs to images that don't peg the browser? imgix can help.

imgix is a real-time image resizing service and CDN. Resize, crop, and process images simply by changing their URLs. Mix and match over 90 URL parameters for unlimited different ways to process images.

It's free to sign up, and every new account gets $10 in credit. Don't let engineering constraints affect your design decisions.

Responsive Images 101 

Jason Grigsby just wrapped up a 10-part series masterclass on responsive images. There is a table of contents at the bottom of each post for jumping around.

#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 …

Watch Video →

More Blog Posts →