June 16, 2015 in Learn
The Treehouse Show | Episode 145: Justice, Carousels, Centering in CSS
It’s Tuesday which means that the Treehouse Show is back! In episode 145 of The Treehouse Show, Nick (@nickrp) and Jason (@jseifer) talk about Justice, Carousels, and Centering in CSS. For a free month’s trial, Join Jason and Nick at…
January 21, 2015 in Learn
How to Create a Simple CSS Dropdown Menu
Many dropdown menus we see on websites use JavaScript in some way, but it’s possible to build one entirely with HTML and CSS. In this short video tutorial, we’ll take advantage of helpful CSS selectors to build a simple dropdown…
October 13, 2014 in Learn
Cutting-Edge CSS Features You Can Use Today
The last wave of new CSS3 features introduced in-browser design features like border-radius, gradients, multiple backgrounds, and box-shadow. CSS continues to evolve and today’s native features are becoming closer to tools we’d normally use in our favorite graphics editor. In…
August 6, 2014 in Learn
CSS Hover Effects for Photos
One of the most popular courses on Treehouse is How to Make a Website, which walks through the process of building a complete portfolio site from scratch. However, even after completing the course, the learning is only just beginning. Thousands of students have…
June 11, 2014 in Learn
Box-Sizing: The Secret to Simple CSS Layouts
(Photograph from Flickr user Rachel Kramer) Box-sizing is a CSS property that makes CSS layouts work intuitively. If you’ve been working with CSS for any period of time, you know that using properties like width, padding, and border can be confusing….
May 27, 2014 in Learn
Tips for Debugging HTML & CSS
(Image from Flickr user Kevin Dooley) Debugging HTML and CSS problems can really ruin your creative momentum, but they’re inevitable when building almost any web project. It’s annoying when you’re designing a page and suddenly you notice that something isn’t quite aligned right…
April 29, 2014 in Learn
Flexbox: The Next Generation of CSS Layout Has Arrived
(Stretch your CSS layout options with Flexbox. Flickr photo by Duncan Hull.) Flexbox is a totally new set of CSS properties that allows designers to create flexible layouts. This is great news for responsive design because it dramatically reduces the complexity of…
December 4, 2013 in Learn
Intentional Breakpoints with CSS Transitions
Responsive Web Design is more than just a few lines of code in your HTML & CSS. It’s an approach to building websites that requires us to think about the entire user experience. This means accepting that the user won’t…
September 3, 2013 in Learn
3D in the Browser: WebGL versus CSS 3D Transforms
WebGL and CSS 3D transforms are two major technologies for creating 3D in the browser, and as recently as a few years ago, they didn’t have much browser support. Much has changed in a short period of time, and if…
August 7, 2013 in Learn
CSS Sprites with Background Positioning
There’s nothing more common than hover states to give your website some life. The user comes to your site, scrolls over an image with their mouse cursor, and the image changes. That’s it. While I spent most of 2012 learning…
August 5, 2013 in Learn
Multiplane Design with SVGs and CSS 3D Transforms
Recently I tweeted about my experimentations with an idea that I’m calling multiplane design. I’ve been experimenting with multi planing using 3D and SVGs: http://t.co/l4h1slT4jK Only works on desktop Chrome/Safari (for now). — Nick Pettit (@nickrp) August 4, 2013 Right…
July 18, 2013 in Learn
CSS Tip: A Better Clearfix with Sass
The CSS clearfix has been a must-have in our web design toolkit for quite some time and, until new layout features like flexbox become more stable, we’ll always need some form of clearfix in float based layouts. There are several…